Как создавали новый сайт ХК «Спартак» Москва: рассказывают разработчики

2024-05-31 03:25:04 Время чтения 14 мин 1289 1

Что стоит за созданием агрессивного и яркого сайта хоккейного клуба «Спартак».

Новый сайт хоккейного клуба «Спартак» Москва

ХК «Спартак» Москва — одна из самых популярных команд КХЛ. Riverstart обновили официальный сайт команды. 

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

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

Сайт уже оценили болельщики и эксперты из континентальной хоккейной лиги: на Премии КХЛ по маркетингу и коммуникациям 2024 хоккейный клуб «Спартак» Москва получил награду «Лучший интернет-сайт». 

Аналитика: проводим бенчмаркинг и глубинные интервью с болельщиками

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

Для создания прототипа нового сайта ХК «Спартак» Москва мы:

  1. Изучили старый сайт.Проанализировали Яндекс.Метрику исходного сайта: нашли зоны роста и выделили паттерны поведения аудитории.
  2. Узнали, что нужно пользователям.Мы делаем сайты для людей, поэтому спрашиваем, что нужно людям. Мы провели 12 глубинных интервью с с болельщиками «Спартака» и других клубов из КХЛ: узнали, какими сайтами они пользуются, чтобы быть в курсе хоккейных событий, пользуются ли сайтами клубов, что они там ищут, где предпочитают читать новости и так далее.
  3. Провели бенчмаркинг.Собрали базу сайтов спортивных команд в России и в мире, прошли на них основные сценарии поведения пользователей и выделили удачные решения.
  4. Использовали накопленный опыт.Мы уже работали над сайтами из сферы спорта: модернизировали сайт ХК «Торпедо» и провели UX-аудит сайта ФК «Пари-НН», чтобы создать новую концепцию, так что представляем, каким должен быть современный спортивный сайт.
Бенчмаркинг спортивных сайтов

Исследования дают интересные выводы, полезные в прототипировании сайта, создании интерфейса и дизайне.

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

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

Самое важное, что делает сайт полезным

На этапе исследования мы определили основные задачи болельщика. Если сайт не дает их решить, он становится бесполезен для болельщика:

  1. просмотр расписания матчей;
  2. покупка билета или абонемента на сезон;
  3. чтение новостей о событиях, связанных с клубом, и результатах матчей.

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

  1. Первый экран главной показывает итоги прошедшего матча и дату следующего. 
  2. Меню дает быстрый доступ к календарю и возможность быстро купить билет или абонемент. 
  3. Блок новостей сообщает обо всем, что произошло. Причем новости скомпонованы по инфоповодам, чтобы точно ничего не пропустить.
Главная сайта хоккейной команды «Спартак» Москва

Посмотрели все варианты расписания и скомпоновали лучший

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

  1. Пришли к делению матчей на домашние и выездные. Оказалось, это важно болельщику для планирования.
  2. Отобразили основную информацию: кто соперник, когда, где и во сколько мат.
  3. Вывели кнопку для быстрой покупки билета или абонемента. Захотел посмотреть игру в живую — сразу купил возможность.
Календарь игр на сайте

Нестандартная лента новостей

Обычная лента новостных постов — хронологическая, новости идут одна за другой по порядку, сверху свежие. Такая лента есть на сайте «Спартака», но, кроме нее, мы сделали ленту по событиям, она отображается на главной.

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

Такой подход вовлекает в изучение материалов по теме и увеличивает глубину просмотра сайта. 

Раздел новостей на сайте ХК «Спартак» Москва

Видео без тормозов

У клуба есть «Спартак ТВ»: на сайте выкладывают записи матчей, интервью и атмосферные ролики. Болельщик может использовать официальный источник, ему не нужно искать другой сайт, чтобы посмотреть запись. Мы организовали воспроизведение роликов со стороннего хранилища, поэтому они не нагружают систему и работают без тормозов. Смотреть видео на официальном сайте также удобно, как и на других платформах.

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

Видео Спартак ТВ

Команда как супергерои

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

Раздел игроков
Карточка хоккеиста

Все о борьбе за чемпионство в турнирной таблице

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

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

Турнирная таблица матчей

Следим за статистикой матча — все важное перед глазами

Официальный сайт клуба — самое надежное место, чтобы узнать счет и верную статистику по игре. Карточка матча дает всю основную информацию, которая интересует болельщика в первую очередь:

  1. соперник и счет сразу бросаются в глаза;
  2. понять, как шел матч, поможет счет по периодам;
  3. ниже есть подробная статистика: состав команд с обеих сторон и статистика по каждому игроку: броски, коэффициенты, шайбы и время.
Статистика матча на сайте ХК «Спартак»

Клуб гордится своей историей

Хоккейный клуб «Спартак» берет начало в 1946 году, на протяжении всей истории у него было много громких достижений, славных голов и легенд — тренеров и игроков, которыми гордится и клуб, и болельщики. 

Несколько разделов на сайте посвящены истории и достижениям «Спартака» в хоккее:

  1. начало и становление команды, успехи и вызовы, которые помогли стать собой —  раздел «История клуба»;
  2. легендарные тренеры, выдающиеся игроки и все чемпионы, которые были в команде с ее образования — раздел «Зал славы»;
  3. биография и фото важного для клуба человека — тренера или игрока — на «Странице о легенде», на которую можно перейти из «Зала славы».

Все эти исторические разделы сопровождают архивные фотографии и видеоролики.

Раздел История хоккейного клуба «Спартак» Москва

Дизайн сайта — это драйв, эмоции и агрессия

Спорт — эмоциональная тема. Хоккей динамичный, энергичный и даже в какой-то мере агрессивный. Мы передали это настроение в дизайне: новый сайт транслирует силу и энергию, настраивает на уверенность в победе. 

В оформлении сайта много движения:

  1. активные цвета, бегущие строки и шрифты привлекают внимание и расставляют акценты на важном;
  2. фотографии показывают эмоции игроков и болельщиков на трибунах;
  1. если нет важных новостей, на главной пользователя встречает видео, которое настраивает на предвкушение матча, ожидание победы и переживания за любимую команду.
Хоккейная команда «Спартак» Москва

Новый сайт ХК «Спартак» Москва решает все задачи болельщика

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

Напишите в комментариях, как вам новый сайт ХК «Спартак» Москва — https://spartak.ru/