Единая цифровая экосистема, объединяющая проекты футбольного клуба

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

Задачи:

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

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

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

• унифицировать управление контентом на сайтах;

• проработать сценарии использования сайтов;

• продумать методы стимулирования интереса к клубу.

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

Результат — цифровая экосистема pfc-cska.com.

Реализовали:

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

• создали более 1 000 макетов с адаптивами для разных браузеров и устройств ;

• сквозную авторизацию в ЛК;

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

• новую покупку билетов на 3D-схеме стадиона;

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

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

• единую админпанель.

Вовлеченность. На сайте проводят почти вдвое больше времени и просматривают почти вдвое больше страниц: глубина просмотра +93%, время +97%. Отказов меньше на 51%. На мобильных глубина просмотра +82%, время +80%, отказов меньше на 45%.

Покупка билетов. На всех устройствах +130% конверсий.

Неполный стек: Html, Css, Vue, Nuxt 3, Node.js, Gitlab, Docker, Zabbix. Использовали эквайринг Uniteller, CRM Mindbox, систему статистики RuStat.

Система стабильна при 10 000 одновременных пользователей и защищена от DDoS‑атак: трафик проходит через фильтры, которые блокируют вредоносные запросы. 

Старые версии сервисов были созданы разными командами и использовали свои механизмы авторизации. Подрядчики провели масштабную работу для объединения в единую систему, чтобы можно было использовать их бесшовно через один ЛК:

• спроектировали экосистему ПФК ЦСКА и объединили сервисы;

• разработали новый основной официальный сайт клуба;

• проработали процессы покупки, включая схему выбора билетов на матч;

• создали личный кабинет болельщика, сохранили все данные пользователей;

• реализовали единую административную панель для управления контентом.

• объединили данные болельщиков в единой CRM системе.

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

Аудитория экосистемы — болельщики ПФК ЦСКА. Благодаря экосистеме у болельщиков появляется единая точка доступа к сервисам, а у клуба — инструмент для работы с аудиторией и ее вовлеченностью.

Для болельщиков:

1. Ощущение бесшовности: единый визуальный стиль сайтов, унифицированные хедеры и навигация.

2. Сквозная авторизация: один личный кабинет на все сервисы экосистемы. 

3. Привычные учетки: перенесли все активные учетки пользователей, сохранив все данные и достижения.

4. Достижения в ЛК: отслеживание своей фанатской активности, «биткони» за действия, которые можно тратить на товары лоляльности, билеты, скидки, услуги и сувениры.

5. Интерактивная карта стадиона с 3D визуализацией покрывает все 30 000 мест, для поиска есть фильтры по цене, расположению, семейным зонам, близости к скамейке запасных.

6. Учет потребностей семей при покупке билетов: информация о льготах и детских местах, фильтр с местами рядом, добавление детей, родителей, друзей в свой ЛК.

7. Актуальная статистика в live‑режиме: голы, карточки, замены, статус матча. 

8. Инклюзивность: сайт оптимизирован для скринридеров и клавиатурного управления без мыши.

Для клуба:

1. Интеграция с CRM: собирает данные о действиях болельщиков на сайте, учитывает их покупки и помогает персонализировать предложения. 

2. Мультиоплата. Пользователь в один чек покупает билет, оплачивает парковку и заодно берет сувенир, а система мультиоплаты распределяет транзакции по нужным юрлицам.

3. Внутренняя валюта: «биткони» можно обменять на билеты, скидки, услуги и сувениры.

4. Геймификация с помощью достижений в ЛК для вовлечения и удержания внимания.

5. Управление картой стадиона: можно размещать кресла, добавлять сектора, фильтры, промо‑блоки и «пасхалки» для вовлечения.

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

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

Россия