Проектирование и редизайн сайта ХК «Авангард»
Назад
Хоккейный клуб «Авангард» - чемпион России по хоккею 2004 года и обладатель Кубка Гагарина 2021 года. Выступает в КХЛ.
Клиент
Хоккейный клуб «Авангард»
Год
2025
Задача
Дизайн основного сайта хоккейного «Авангарда» не менялся семь лет. За это время индустрия шагнула далеко вперёд — изменились подходы к UX, визуальным трендам и контенту.
Реализация проекта
Клуб понимал, что пришло время обновления, но прежде чем что-то менять, нужно было понять что именно требует доработки.
Мы предложили провести комплексный аудит сайта.
С чего всё началось
Дизайн основного сайта хоккейного «Авангарда» не менялся семь лет. За это время индустрия шагнула далеко вперёд — изменились подходы к UX, визуальным трендам и контенту. Клуб понимал, что пришло время обновления, но прежде чем что-то менять, нужно было понять что именно требует доработки.
Мы в 2ДИТ работаем со спортом не первый год — поддерживаем, дорабатываем и развиваем несколько десятков сайтов профессиональных клубов и лиг, федераций и стадионов.
Так вот, в разгаре прошлого сезона ИТ-отдел заказчика запросил у нас аудит текущей версии сайта — прежде всего визуальной части и пользовательских сценариев.
Так выглядел старый сайт на тот момент:
Аудит старого сайта
Мы провели глубокий внешний аудит: отдали документ на 25 страниц со скриншотами, комментариями и примерами. При этом мы не ограничились интерфейсом — проверили корректность вывода спортивных данных, отображение статистики и внутреннюю логику API.
В итоге выявили десятки проблем — от устаревшей типографики и перегруженной структуры до потери связности данных между матчами, игроками и статистикой.
После изучения результатов клуб понял: редизайн — не косметика, а необходимость. Но как подойти к задаче системно?
Разбор бизнес-требований
Сегодня ХК «Авангард» — это больше, чем просто хоккейная команда. Это целая экосистема:
главная команда — центр интереса болельщиков;
молодежная команда и Академия;
современная Арена;
социальные и образовательные проекты;
всё это управляется большим офисом — подразделением «Газпром нефти» со своими внутренними процессами.
Нам нужно было погрузиться в бизнес-процесс с нескольких углов обзора.
Аналитика и сбор обратной связи
По итогам интервью у нас накопился огромный пласт информации, которых предстояло проанализировать. Однако, мы решили расширить эти данные за счет количественной обратной связи.
Анкетирование болельщиков
Параллельно отдел клуба запустил анкету среди болельщиков — десятки ответов помогли собрать качественную обратную связь о том, что людям неудобно, где теряются и почему не возвращаются.
Результаты удивили, но в хорошем смысле — цифры и мнения совпали. Мы получили максимально объективную картину.
Бенчмаркинг
Мы начали с конкурентного анализа всех клубов КХЛ и даже вышли за пределы хоккея — смотрели на сайты крупных спортивных брендов, медиа и entertainment-проектов. Прототип начали с главной страницы — самой сложной и многослойной. Нужно было объединить три потока данных:
информационный (новости, события, акции);
спортивный (матчи, результаты, таблицы);
коммерческий (билеты, фан-шоп, партнерские предложения).
CJM
На основе анализа было выявлено несколько основных паттернов поведения болельщиков клуба, которые легли в основу групп целевых аудиторий: После чего были составлены Карты пути клиента (Customer Journey Map) — для 4 основных сценариев:
1. Болельщик: интересует посещение матча;
2. Болельщик: не пойдет на матч, но будет смотреть по ТВ;
3. Болельщик: не может посмотреть матч, но будет следить за счетом и контентом;
4. VIP: посещение матча в составе группы.
Для каждого сценария была составлена отдельная таблица, где выделены возможные точки контакта, действия пользователя, эмоции и мысли, возможные барьеры и предлагаются улучшения.
User Flow
Да, не всё из CJM относится непосредственно к сайту. Но важно её учитывать, так как это влияет на точки входа и выхода с сайта. И вот, исходя уже из потребностей каждой из этих ЦА, мы составили несколько Userflow, которые отражают уже непосредственно сами сценарии посещения сайта. Блок-схемы разделены на несколько веток:
Авторизация/регистрация;
Покупка билета;
Выбор домашнего матча;
Матч на выезде (будет смотреть по ТВ);
Не сможет смотреть матч (просмотр счета);
Планирует VIP-посещение домашнего матча.
Новая структура сайта
Были сделаны выводы по прежней структуре:
Раздел Клуб – перегружен, нет разделения на смысловые уровни;
Нет коммерческих акцентов для Партнеров и VIP;
Не очевиден сценарий перехода к Расписанию матчей;
Не очевиден сценарий перехода к Результатам / Матч-центру.
На основе проведенной аналитики, новых требований и пожеланий была предложена новая структура:
Прототипы нового интерфейса
После утверждения структуры перешли к прототипированию новой версии всего сайта со связями страниц между собой. Ключевые интерфейсные решения:
разгрузили первый экран — минималистичная шапка + акцент на большом фото-слайдере;
вывели ленту ближайших матчей в фиксированную нижнюю панель — она всегда под рукой;
подсветили ближайший матч и события к нему в рамках общего цикла;
внедрили stories-блок с предложениями и акциями;
проработали спортивный блок с показателями — болельщик сразу находит нужные данные.
В таком же ключе создали прототипы ключевых внутренних страниц: карточки матчей, страницы игроков, новостной раздел, фан-шоп, академию и VIP-зоны. Презентация прототипа внутри клуба прошла легко — корректировки были минимальными.
Новый дизайн сайта
Когда структура и логика были утверждены, мы перешли к визуальной части.
Отрисовка дизайна всех страниц
Помимо главной страницы наша команда дизайнеров отрисовала все основные внутренние страницы:
Новости;
Страница новости
О клубе;
Руководство;
Страница руководителя;
Подразделения клуба;
Документы;
Контакты;
Партнеры клуба;
Арена;
Команда (игроки);
Команда (тренеры);
Команда (персонал);
Страница игрока;
Календарь матчей: таблица и список;
Результаты матчей;
Турнирная таблица;
Сетка Плей-офф;
Статистика игроков;
Статистика команды;
Видео и фото;
Зал славы (игроки и тренеры);
Программа лояльности;
Партнерам и спонсорам;
Формы заявки и попапы.
Адаптивы и UI-кит
В итоге — более 75 макетов в Figma в трёх разрешениях и различных состояниях.
Верстка сайта
Верстку макетов и внедрение страниц клуб выполнял своими силами, а мы обеспечили авторский контроль: проверяли соответствие, давали рекомендации и помогали довести результат до идеала.
Тестирование
По ходу работы над версткой мы помогали клубу с авторским надзором и тестированием.
Кстати, хоть встреча по тестированию и была летом, мы сидели в переговорке рядом с трибунами и льдом — вот там-то мы и замёрзли. Зато поймали тот самый ледовый вайб, когда пустой стадион звучит по-своему, почти трепетно..
