UI/UX и графика для esports analytics-платформы

Контекст проекта

DataLouna работает в нише, где пользователь одновременно смотрит на матч, статистику, вероятности, команды, прогнозы и собственную историю решений. Если интерфейс перегружен, аналитика перестает помогать и превращается в шум.

Поэтому кейс нельзя было собирать только как набор красивых экранов. Нужно было разделить продукт на понятные сценарии, сформировать визуальный язык и отдельно подготовить графические материалы, которые поддерживают бренд за пределами dashboard.

Задача в мире бизнеса

DataLouna описывает себя как сервис, который помогает пользователю ориентироваться в CS:GO через AI-прогнозы, статистику матчей, обучение и персональные сценарии работы с аналитикой. Бизнес-задача интерфейса — не просто показать данные, а довести пользователя до доверия: объяснить, как устроен прогноз, где смотреть подтверждения, как вернуться к матчам и зачем оформлять доступ к расширенным возможностям.

• Сделать вход в продукт понятным для пользователя, который еще не знает механику сервиса.
• Развести live-матчи, прогнозы, статистику, обучение и аккаунт по ясным сценариям.
• Подготовить основу для подписки, paywall и повторного возвращения в продукт.
• Сохранить esports-характер бренда, но не перегрузить интерфейс декоративностью.

Дизайн-процесс

Работу выстроили от задачи и сценариев к визуальной системе, а затем к конкретным экранам. Такой порядок помог не смешивать продуктовую логику, UI Kit и графические материалы в один общий блок.

Визуальная система и матрица стиля

Этот блок фиксирует визуальный язык платформы: темная hi-tech-среда, спортивная энергия, AI-прогнозы, игровые персонажи, контрастные акценты и карточная структура. Матрица стиля задает направление и для интерфейса, и для последующих графических материалов.

UI Kit

После определения визуального направления собрали основу UI Kit: иконки, типографику, цветовые роли, логотипный знак, состояния и элементы, из которых дальше собирались экраны dashboard, onboarding и аккаунта.

Карта продукта

Схема показывает основные сценарии веб-платформы: авторизацию, dashboard, onboarding, страницы матчей, аккаунт, подписку, историю матчей и обучение. Это не отдельный экран, а структурная карта продукта, на которую удобно опираться при сборке интерфейса.

Landing page

Лендинг работает как первый продуктовый вход: объясняет ценность DataLouna, показывает рискованные матчи, демонстрирует формат прогнозов и ведет пользователя к пробному доступу. Поэтому это часть UI/UX-сценария, а не отдельный графический баннер.

Авторизация

Вход в продукт должен быть спокойным и прямым: пользователь попадает в темную визуальную среду сервиса, но не теряется в лишних шагах до dashboard.

Onboarding

Onboarding объясняет механику продукта до того, как пользователь погружается в плотную аналитику: что такое AI Pick'em, как читать прогнозы, где смотреть матчи и зачем возвращаться к дневнику решений.

Dashboard

Dashboard объединяет аналитику, статистику и прогнозы в одном рабочем пространстве. Здесь важно было не заставлять пользователя прыгать между разделами, если решение можно принять на одном экране.

• Центр экрана показывает ключевые матчи, прогнозы и быстрые показатели.
• Карточки live-матчей дают доступ к вероятностям, деталям и статусам.
• Цветовые акценты отделяют уверенные сигналы от рискованных.
• Дополнительные страницы команды и матча раскрывают аналитику глубже.

Аккаунт и подписка

Этот блок показывает не Telegram-сценарии, а продуктовые экраны аккаунта и подписки: пользователь видит свой статус, ограничения доступа и следующий шаг к расширенным функциям платформы.

Обучение

Экран обучения помогает объяснить механику сервиса и снизить порог входа. Его логичнее показывать рядом с onboarding и dashboard, а не в блоке результата.

Graphic Design

Отдельная часть проекта — графический дизайн вокруг продукта: презентационные слайды, баннеры, посты, сторис и анимированные материалы. Они используют ту же визуальную систему, но решают другую задачу: быстро упаковать DataLouna для коммуникаций, рекламы и соцсетей.

Результат и эффект

На выходе получился разделенный, но единый по стилю проект: интерфейсная система для работы с аналитикой и отдельный графический слой для коммуникаций. Продуктовые экраны помогают пройти путь от первого входа до dashboard, обучения и подписки, а графика поддерживает бренд в презентациях, постах и рекламных форматах.

• Собран UI/UX-контур веб-платформы: карта продукта, авторизация, onboarding, dashboard и аккаунт.
• Сформирован UI Kit: типографика, палитра, знак, иконки и базовые состояния.
• Визуальная система отделена от продуктовых экранов и стала основой для графики.
• Графические материалы вынесены в отдельную часть кейса, чтобы не смешивать их с dashboard.