СКА Арена — разработка сайта

СКА Арена — крупнейшая ледовая арена в мире: она вмещает от 21 500 зрителей. Разработали сайт площадки — основной инструмент коммуникации арены с организаторами, арендаторами, болельщиками, партнёрами и рекламодателями.

Цели

— Имиджевая

Рассказать об арене и её возможностях.

— Коммерческая

Создать афишу и сделать возможной покупку билетов и услуг через сайт. Разработать отдельную страницу для VIP-гостей.

— Коммуникационная

Сегментировать целевую аудиторию на сайте. Выстроить коммуникацию и предложить способы взаимодействия с разной ЦА: организаторами, арендаторами, корпоративными клиентами, болельщиками, партнёрами и рекламодателями.

— Функциональная

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

Идея

СКА Арена находится между проспектами: Космонавтов и Юрия Гагарина. Внешне она напоминает космический корабль. Перед тем, как приступить к работе над проектом, мы изучили интерьеры и экстерьеры площадки — побывали на самой арене, чтобы погрузиться в атмосферу площадки. Смешение русского космизма и советского авангардизма 20-х годов вдохновили команду.

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

Этап 1: Исследование и анализ

Проанализировали опыт и позиционирование крупных мировых арен: в выборку попали сайты 15 спортивных арен. Отметили лучшие UX/UI-решения:

• предсказуемую и удобную навигацию;

• фоновый шоурил в первом экране главной страницы;

• фильтр мероприятий по категории и дате в афише;

• интерактивную карту и схему площадки.

Результат: исследование с наиболее эффектными визуальными и функциональными решениями.

Этап 2: Проектирование и дизайн

СКА Арена  — это место, куда приходят за эмоциями, впечатлениями и воспоминаниями. Поэтому, по нашей задумке, дизайн сайта должен был воодушевлять, транслировать яркие эмоции и побуждать к покупке билета/услуги.

• Дизайн вдохновлён космическим обликом арены. Через айдентику: цветовую палитру и шрифт подчеркнули уникальность площадки. Использовали плавный градиент из фирменных цветов, напоминающий северное сияние. Интерфейс получился живым благодаря анимациям и различным механикам взаимодействия c сайтом.

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

• Одна из задач проекта — создать отдельную страницу для VIP-гостей. С помощью кнопок, пинов и градиента золотого оттенка выделили премиум-услуги и сформировали отдельный user flow (пользовательский путь).

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

  

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

  

• Для удобного отображения на всех устройствах подготовили макеты в нескольких разрешениях: 1920 px (для десктопа), 768 px (для планшета), 360 px (для смартфона).

Этап 3: Разработка и тестирование

Нам было важно сделать устойчивый к нагрузкам и удобный продукт, поэтому выбрали проверенные решения: платформу Битрикс CMS и билетную систему «ИнфоТех» (ранее инструменты использовали при разработке сервиса продажи билетов ФК «Зенит»).

Релиз разбили на 2 MVP, чтобы ускорить запуск сайта:

• MVP 1 планировали и сделали к Кубку Первого канала по хоккею 2024 (международный традиционный турнир по хоккею с шайбой). После первого релиза пользователю были доступны основные страницы сайта: главная, «Услуги», «Афиша», «Контакты», технические страницы (400 и 500). Администраторам сайта стали доступны: вывод и управление данными доступных страниц, сбор и хранение заявок с формы обратной связи.

• MVP 2 дошлифовывали контент, добавили раздел «Об Арене» и оставшиеся страницы. Также расширили функциональные возможности: сделали версию для слабовидящих и подписку на рассылку.

  

  
  

Сайт СКА Арены — новый продукт. Успешно запустили сайт к Кубку Первого канала по хоккею 2024 — первые заявки через форму обратной связи команда СКА Арены начала получать в период турнира. Основные цели, которые мы должны были выполнить, были достигнуты. Ещё раз напомним цели:

Имиджевая:
Рассказали об арене и её возможностях. Сделали отдельный раздел «Об Арене» и интерактивную поэтажную схему арены.

Коммерческая:
Создали афишу с поиском мероприятий по дате
и категории. Cделали возможной покупку билетов и услуг через сайт, интегрировав билетную систему «ИнфоТех». Разработали отдельную страницу для VIP-гостей, а также в финальном блоке на странице «Афиша» продублировали VIP-услуги площадки, таким образом привлекая не только зрителей на арену, но и клиентов.

Коммуникационная:
Сегментировали целевую аудиторию на сайте. Выстроили коммуникацию с разной ЦА: организаторами, арендаторами, корпоративными клиентами, болельщиками, партнёрами и рекламодателями.

Функциональная:
Сделали удобную навигацию и обеспечили комфортное взаимодействие с сайтом.