ХК «Авангард» перезагрузился: как мы заложили новый стандарт сайтов для хоккейных клубов

Заказчик

Хоккейный клуб

Задача

Обновить сайт ХК «Авангард», не менявшийся 7 лет: провести аудит, проанализировать метрики и пользовательские сценарии, переработать UX/UI, сохранив фирменный стиль, и запустить современный адаптивный

Мы в 2ДИТ занимаемся спортом не первый год — применяем, дорабатываем и развиваем несколько уровней сайтов профессиональных клубов и лиг, федераций и стадионов.

Содержание

• С чего всё начиналось;
• Аудит старого сайта;
• Разбор бизнес-требований;
• Как в арену ходили, интервьюировали;
• Аналитика и обратная связь;
• Анализ метрик;
• Проектирование сайта;
• Новый дизайн сайта;
• Как в офисе гуляли, тестировали и замерзли рядом со льдом;
• Результат.

С чего всё произошло

Дизайн основного сайта хоккейного «Авангарда» не менялся семь лет. За это время индустрия шагнула далеко вперед — изменились подходы к UX, визуальным тенденциям и контенту. Клуб одинаково понимает, что пришло время обновления, но прежде чем что-то менять, нужно было понять, что это требует доработки.

Так вот, в прошлом сезоне ИТ-отдел клиента запросил у нас аудит текущей версии сайта — прежде всего визуальную часть и результаты.

Так выглядел старый сайт на тот момент:

Аудит старого сайта

Мы провели глубокий внешний аудит: отдали документ на 25 страницах со скриншотами, комментариями и примерами. При этом мы не ограничивали интерфейс — проверили корректность вывода достоверных данных, обеспечение статистики и внутреннюю логику API.

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

После изучения результатов клуб понял: редизайн — не косметика, необходимость. Но как подойти к задаче системно?

Разбор бизнес-требований

Сегодня ХК «Авангард» — это больше, чем просто хоккейная команда. Это целая экосистема:

• главная — центр интереса болельщиков;
• молодежная и команда Академия;
• современная Арена;
• социальные и образовательные проекты;
• и всё это управляется большим офисом — разделением «Газпром нефти» со своими распределенными процессами.

Нам было необходимо внедриться в бизнес-процессы с несколькими углами зрения.

Интервью

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

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

Так сформировался объемный список бизнес-требований — от улучшения навигации и визуальной иерархии до объединения с объединением CRM и постоянного учета статистики.

Аналитика и сбор обратной связи

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

Оценки от сотрудников

Мы попросили руководителей клуба оценить основные аспекты сайта по 5-бальной шкале.

Анализ метрик

Чтобы доказать гипотезы, мы пошли дальше и сами изучили поведение пользователей.

Провели аналитику по двум десяткам показателей за последний год:

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

Анкетирование поклонников

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

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

Проектирование сайта

Далее: проектирование новой версии всего сайта. А точнее — перепроектирование.

Бенчмаркинг

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

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

• информационные (новости, события, акции);
• спортивные (матчи, результаты, таблицы);
• коммерческий (билеты, фан-шоп, партнерские предложения).

Составление карт путей пользователей (CJM)

На основе анализа было выявлено несколько основных закономерностей поведения поклонников клуба, которые легли в основу групп целевых аудиторий:

После чего были составлены Карты пути клиента (Customer Journey Map) — для 4 основных событий:

1. Болельщик: интересует посещение матча;

2. Болельщик: не пойдет на матч, но будет смотреть по ТВ;

3. Болельщик: не может посмотреть матч, но будет следить за счетом и контентом;

4. VIP: посетите матч в составе группы.

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

Проектирование пользовательского процесса

Да, не все из CJM относится непосредственно к сайту. Но важно ее учитывать, так как это влияет на точки входа и выхода с сайта. 

И вот, исходя уже из желания каждого из ЦА, мы составили несколько пользовательских потоков, которые отражают уже непосредственно эти сами результаты посещения сайта.

Блок-схемы делятся на несколько веток:

• Авторизация/регистрация;
• Покупка билета;
• Выбор домашнего матча;
• Матч на выезде (будет смотреть по ТВ);
• Невозможно смотреть матч (просмотр счета);
• Планирует VIP-посещение домашнего матча.

Новая структура сайта

Были сделаны выводы по прежней сцене:

• Раздел Клуб – перегружен, нет разделения на смысловые уровни;
• Нет коммерческих акцентов для Партнеров и VIP;
• Не очевиден переход сценария к Расписанию игр;
• Не очевиден переход сценария к Результатам / Матч-центру.

На основе проведенного анализа, новых требований и пожеланий была предложена новая структура:

Прототипы нового интерфейса

После утверждения структуры перешли к созданию прототипа новой версии всего сайта со связями страниц между собой.

Ключевые интерфейсные решения:

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

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

Презентация прототипа внутри клуба прошла легко — корректировки были великолепны.

Новый дизайн сайта

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

Дизайн-концепция

Брендбук в клубе уже был — современный, узнаваемый, с характером. Мы аккуратно переложили его в цифровую среду.

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

Ключевые детали дизайна десктоп-версии:

Использование фирменного элемента 

Посетителей сайта встречает крупный слайдер с фирменным элементом – стилизованной буквой А.

Коммерческий блок в видеоленте сториз 

Выносите коммерческие баннеры и предложения в аккуратную ленту с механической сториз.

Акцент на ближайшем событии

Особенно отметили ближайшей матч и все новости, которые аккумулируются вокруг этого инфоповода – от представления соперников перед матчем, до послематчевой пресс-конференции тренеров и аналитиков.

Спортивная часть

В одном месте, буквально в пределах одного экрана, собраны все данные, относящиеся к спортивным выступлениям: 

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

• турнирная таблица;

• сводка по лучшим бомбардирам, снайперам, ассистентам сезона и вратарям.

Помимо этого был сделан акцент на звездах команды. Лидеры крупным планом единой ленты.

Блок фан-шопа

Для помощи в обеспечении целевых показателей добавлена ??перелинковка с интернет-магазином клуба.

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

Отрисовка дизайна всех страниц

Помимо главной страницы, наша команда дизайнеров отрисовала все основные внутренние страницы:

• Новости;
• Страница новостей;
• О клубе;
• Руководство;
• Страница руководителя;
• Подразделения клуба;
• Документы;
• Контакты;
• Партнеры клуба;
• Арена;
• Команда (игроки);
• Команда (тренеры);
• Команда (персональная);
• Страница;
• Календарь матчей: таблица и список;
• Результаты результатов;
• Турнирная таблица;
• Сетка Плей-офф;
• Статистика игроков;
• Статистика команды;
• Видео и фото;
• Зал славы (игроки и тренеры);
• Программа лояльности;
• Партнерам;
• Формы заявок и папы.

Адаптивы и UI-кит

В итоге — более 75 макетов в Figma в трёх разрешениях и различных состояниях.

UI-кит

Отрисованы страницы версий в различных хронических состояниях и вариациях, а также ховерах и выпадениях.

Мобильная и планшетные версии

Адаптивные версии макетов передают полный объем исходной информации.

Верстка сайта

Верстку макетов и внедрение страниц клуба выполнили своими силами, а мы выполнили авторский контроль: проверяли соответствие, данные рекомендации и приводили довести результат до идеала.

Тестирование

По ходу работы над версткой мы сделали клуб под авторским надзором и тестированием. Кстати, хоть встреча по тестированию и была летом, мы сидели в переговорке рядом с медсестрами и льдом — вот там-то мы и замёрзли. Зато поймали тот самый ледовый вайб, когда пустой стадион звучит по-своему, почти трепетно..

Результат

Новый сайт ХК «Авангард» стал современным, динамичным и удобным для пользователей.

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

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

Он не просто рассказывает о команде — он выбирает весь цифровой ландшафтный клуб.

Сайт уже доступен

Перейти на сайт