Редизайн сайта хоккейного клуба «Авангард»

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

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

В рамках проекта было решено:

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

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

- Интервью с заказчиками;

- Аналитика и обратная связь;

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

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

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

- Авторский надзор и тестирование верстки.

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

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

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

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

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

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

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

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

- главная команда — центр интереса болельщиков;

- молодежная команда и Академия;

- современная Арена;

- социальные и образовательные проекты;

- и всё это управляется большим офисом — подразделением «Газпром нефти» со своими внутренними процессами.

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

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

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

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

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

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

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

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

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

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

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

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

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

и т. д.

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

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

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

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

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

- информационный (новости, события, акции);

- спортивный (матчи, результаты, таблицы);

- коммерческий (билеты, фан-шоп, партнерские предложения).

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

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

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

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

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

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

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

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

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

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

- Авторизация/регистрация;

- Покупка билета;

- Выбор домашнего матча;

- Матч на выезде (будет смотреть по ТВ);

- Не сможет смотреть матч (просмотр счета);

- Планирует VIP-посещение домашнего матча.

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

- Раздел Клуб – перегружен, нет разделения на смысловые уровни;

- Нет коммерческих акцентов для Партнеров и VIP;

- Не очевиден сценарий перехода к Расписанию матчей;

- Не очевиден сценарий перехода к Результатам / Матч-центру.

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

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

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

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

- вывели ленту ближайших матчей в фиксированную нижнюю панель — она всегда под рукой;

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

- внедрили stories-блок с предложениями и акциями;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Новости;

Страница новости;

О клубе;

Руководство;

Страница руководителя;

Подразделения клуба;

Документы;

Контакты;

Партнеры клуба;

Арена;

Команда (игроки);

Команда (тренеры);

Команда (персонал);

Страница игрока;

Календарь матчей: таблица и список;

Результаты матчей;

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

Сетка Плей-офф;

Статистика игроков;

Статистика команды;

Видео и фото;

Зал славы (игроки и тренеры);

Программа лояльности;

Партнерам;

Формы заявки и попапы.

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

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

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

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

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

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