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

1. Вводная задача от заказчика, проблематика, цели

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

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

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

Подробное описание всего процесса работы

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

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

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

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

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

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

Интервью

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

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

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

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

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

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

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

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

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

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

глубина просмотров;

конверсия в билеты и мерч;

мобильный трафик;

среднее время на сайте;

процент отказов по типам страниц;

и т. д.

Анкетирование болельщиков

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

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

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

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

Бенчмаркинг

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

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

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

CJM

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

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

• Болельщик: интересует посещение матча;
• Болельщик: не пойдет на матч, но будет смотреть по ТВ;
• Болельщик: не может посмотреть матч, но будет следить за счетом и контентом;
• VIP: посещение матча в составе группы.

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

User Flow

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UI-кит

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

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

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

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

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

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

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

3. Результаты сотрудничества

В результате совместной работы с ХК «Авангард» мы:

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

Яна Алисина

менеджер веб-продуктов, ХК «Авангард»

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

Коллеги из 2Dit, как обычно, подошли к процессу очень ответственно: для создания нового дизайна решили провести аудит сайта.

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

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

Мы очень довольны результатом, уверены, что нас ещё ждут интересные совместные проекты.

Однозначно рекомендуем коллег из 2Dit к сотрудничеству!

Ссылка на результат - официальный сайт ХК «Авангард»