«От мудборда до UI-кита за три месяца — продуктовый дизайн сервиса аналитики Telegram, готовый к вёрстке без переделок.»
TGsight — сервис аналитики Telegram-каналов: бот собирает данные по каналу, а портал показывает аналитику аудитории, отслеживание метрик и защиту от накруток. Мы взяли проект с нуля и за три месяца плотной работы — с августа по октябрь 2024 — прошли путь от первых мудбордов до готового к вёрстке дизайна: продуктовый лендинг, экраны бота, UI-кит и адаптивы под все ключевые разрешения.
С первого месяца собирали вводные, строили мудборд и пробовали концепты — искали тон, который читается как продуктовый сервис, а не очередной IT-лендинг. Формировали визуальный код до того, как ушли в экраны.
Брендовый блок лендинга TGsight: крупный логотип с выносками функций — анализ интересов, защита от накруток, отслеживание метрик; рядом мокап мониторинга на телефоне.
Основной концептуальный этап — отрисовали ключевые экраны и передали на ревью. Концепт несколько раз уходил на переработку: дорабатывали визуальный язык и меняли шрифтовую пару уже после отрисовки, что потребовало выверки типографики по всему макету.
Концепт главной TGsight в сиренево-синей гамме: дашборд в герое, мокапы планшетов и раскрывающийся перечень инструментов управления каналом.
Расскажите о задаче — предложим архитектуру решения. Без шаблонных КП и абстрактных смет: конкретика на старте.
Экраны бота и портала проектировали заодно с лендингом: онбординг в несколько шагов — перейти в бот, добавить канал, получить доступ к порталу, — виджеты подписчиков и рейтинга, тёмная и светлая темы. Вход в сервис читается так же продуктово, как промо.
Экраны бота TGsight в тёмной и светлой темах: онбординг «перейдите в бот — добавьте канал — получите доступ к порталу — изучите аудиторию», виджеты подписчиков и рейтинга.
Финальный этап — адаптивы под все ключевые разрешения и сборка UI-кита. У разработчиков появился единый источник истины по компонентам и сеткам: вёрстка стартует без промежуточных переговоров о деталях.
Финальный лендинг TGsight: герой с дашбордом, защита от накруток, категории каналов, тарифы и блок мобильного приложения — в фирменной синей гамме.
Сжатый горизонт заставлял вести ревью и правки параллельно с отрисовкой новых экранов — концепт не «зависал» между итерациями. За три осенних месяца проект дошёл от мудборда до готового UI-кита без длинных простоев.