Единая цифровая экосистема ПФК ЦСКА

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

Для этого нужно объединить разрозненные сервисы: основной сайт клуба, билетный сайт, личный кабинет болельщика и CRM для управления покупками. Это позволит предоставить болельщику бесшовный опыт использования, что уменьшит потери в конверсиях.

Задачи проекта:

— объединить сервисы в единую экосистему;

— реализовать единый личный кабинет на все сервисы;

— привести интерфейс сайтов к единому стилю;

— создать общую дизайн-систему для клуба;

— переработать процесс покупки билетов;

— добавить инструменты для повышения лояльности;

— проработать управление контентом на сайтах экосистемы.

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

Мы создали единую цифровую экосистему ПФК ЦСКА, объединив основной сайт, билетный сервис, интернет-магазин, личный кабинет болельщика и CRM систему. 

 В общей сложности сделали:

— единый личный кабинет и сквозную авторизацию на всех сервисах системы;

— бесшовные переходы между сервисами;

— удобный процесс покупки билетов на интерактивной 3D-схеме стадиона;

— инструменты для повышения вовлеченности пользователей;

— интеграции с CRM и эквайрингом;

— единую админпанель;

— общую дизайн-систему: UI‑kit, иконки, Figma‑токены для синхронизации дизайна и кода;

— более 1 000 макетов с адаптивами.

Проект длился около 8 месяцев — 14 тыс. рабочих часов потребовала реализация, от Riverstart в команду вошли 44 специалиста. Участие принимали 6 экспертов со стороны клуба.

Старые версии сервисов были созданы разными командами и использовали свои механизмы авторизации. Мы объединили в экосистему основной сайт, билетный сервис, интернет-магазин, личный кабинет болельщика и CRM клуба и сделали единый личный кабинет со сквозной авторизацией в сервисах.

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

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

С клубом ЦСКА мы одними из первых в спортивной сфере внедрили систему геймификации в программе лояльности. Пользователи получают бейджи за достижения и внутреннюю валюту «биткони» за выполнение заданий и участие в активности клуба. Баллы можно обменять на новые билеты, скидки на сувениры и услуги из каталога лояльности, а бейджи отмечают прогресс пользователя как болельщика любимого клуба.

Для работы с бонусами интегрировали CRM Mindbox в систему клуба. Система обменивается с сайтом данными о действиях пользователей, автоматически учитывает начисление и списание бонусов.

Для покупки билетов на матчи реализовали интерактивную схему стадиона — детализированный 3D-рендер ВЭБ Арены, охватывающей все 30 000 кресел. Схема отображает статус каждого места — свободно оно или занято — и позволяет фильтровать по цене и удобным параметрам: места рядом со скамейкой запасных, семейные сектора, несколько кресел рядом для компании.

Сам рендер в ультравысоком разрешении (16K) весит около 350 МБ, поэтому, чтобы пользователю не пришлось загружать 350 МБ, мы использовали формат WebP со сжатием без потерь и разрезали карту на тайлы, которые подгружаются поэтапно при изменении масштаба. Это ускорило загрузку без потери качества.

Анонсы матчей выглядят как афиши блокбастеров, а яркие контентные страницы рассказывают обо всем, что происходит с футболистами любимого клуба. 

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

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

Для матчей сделали live‑режим, чтобы болельщики видели ключевые события в реальном времени: голы, карточки, замены, статус матча. Страница матча построена по уникальному шаблону с возможностью добавлять контентные блоки.

Мы создали более 1000 макетов с адаптивами для разных браузеров устройств.

Чтобы сохранить единый стиль и минимизировать дублирование кода, наши фронтенд-специалисты создали три пакета:

— Общий UI‑kit — библиотеку блоков и элементов, используемых во всех проектах. Это фундамент для всех цифровых продуктов клуба.

— Figma‑токены для автоматической синхронизации цветов и стилей между дизайном и кодом

— Пакет иконок — единый шрифт‑иконографику для всех сервисов.

Такой подход позволяет быстро вносить правки и масштабировать решения на новые проекты без избыточного копирования кода.

Для администраторов клуба реализовали простое управление: единую админпанель, общие требования к контенту и алгоритмы заполнения модераторами. Конструктор динамических страниц позволяет собирать уникальные страницы из готовых блоков в общем стиле.

Также сделали отдельные окружения для разработки и тестирования, чтобы выпускать обновления без риска для работающей версии сайта.

Мы объединили разрозненные платформы футбольного клуба ЦСКА в цифровую экосистему.

Достигли поставленной цели — конверсия выросла в 2,3 раза. Также улучшились поведенческие показатели вовлеченности:

— С десктопа глубина просмотра +93%, время +97%, отказов меньше на 51%.

— На мобильных глубина просмотра +82,%, время +80%, отказов меньше на 45%.

Экосистема готова к расширению новыми сервисами и проектами, они тоже будут доступны через единый ЛК, будут иметь унифицированный визуальный стиль и управление контентом через единую админпанель.

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

Для клуба экосистема — это единая точка управления аудиторией: помогает собирать данные для маркетинга и планирования, развивать коммерческие направления и укреплять бренд.