Как создавали новый сайт ХК «Спартак» Москва: рассказывают разработчики
Что стоит за созданием агрессивного и яркого сайта хоккейного клуба «Спартак».
ХК «Спартак» Москва — одна из самых популярных команд КХЛ. Riverstart обновили официальный сайт команды.
Больше всего мы любим цифры: было бы нагляднее сравнить статистику старого и нового сайта, чтобы говорить об эффективности изменений и поведении пользователей. Новый сайт запустили в марте 2024 года, поэтому статистики для достоверного сравнения еще мало.
Но пока вы можете составить впечатление об интерфейсе и дизайне, а мы расскажем о создании сайта и о процессах, которые стоят за разработкой таких проектов.
Сайт уже оценили болельщики и эксперты из континентальной хоккейной лиги: на Премии КХЛ по маркетингу и коммуникациям 2024 хоккейный клуб «Спартак» Москва получил награду «Лучший интернет-сайт».
Аналитика: проводим бенчмаркинг и глубинные интервью с болельщиками
Мы проводим исследования, чтобы понять, какие разделы должны быть на сайте, какие функции нужны пользователям, как скомпоновать меню и что вывести в быстрый доступ. Обычно это интервью с целевой аудиторией сайта и бенчмаркинг — анализ сайтов той же тематики с целью найти бенчмарки — лучшие показатели, к которым стоит стремиться.
Для создания прототипа нового сайта ХК «Спартак» Москва мы:
- Изучили старый сайт.Проанализировали Яндекс.Метрику исходного сайта: нашли зоны роста и выделили паттерны поведения аудитории.
- Узнали, что нужно пользователям.Мы делаем сайты для людей, поэтому спрашиваем, что нужно людям. Мы провели 12 глубинных интервью с с болельщиками «Спартака» и других клубов из КХЛ: узнали, какими сайтами они пользуются, чтобы быть в курсе хоккейных событий, пользуются ли сайтами клубов, что они там ищут, где предпочитают читать новости и так далее.
- Провели бенчмаркинг.Собрали базу сайтов спортивных команд в России и в мире, прошли на них основные сценарии поведения пользователей и выделили удачные решения.
- Использовали накопленный опыт.Мы уже работали над сайтами из сферы спорта: модернизировали сайт ХК «Торпедо» и провели UX-аудит сайта ФК «Пари-НН», чтобы создать новую концепцию, так что представляем, каким должен быть современный спортивный сайт.
Исследования дают интересные выводы, полезные в прототипировании сайта, создании интерфейса и дизайне.
Например, на глубинных интервью мы выяснили, что приоритетная информация для болельщика — расписание игр, отчет по прошедшему матчу и новости. Многие болельщики идут за новостями и хайлайтами матчей на сайты спортивных СМИ типа sports.ru. Им нравится удобная лента и то, что самые важные моменты залиты как гифки — оказалось, их удобнее смотреть.
На этапе разработки мы забрали себе эти идеи: добавили на сайт возможность заливать гифки, чтобы показать красивые голы, реализовали удобную новостную ленту с группировкой по инфоповодам. Дальше мы расскажем о функциях подробнее.
Самое важное, что делает сайт полезным
На этапе исследования мы определили основные задачи болельщика. Если сайт не дает их решить, он становится бесполезен для болельщика:
- просмотр расписания матчей;
- покупка билета или абонемента на сезон;
- чтение новостей о событиях, связанных с клубом, и результатах матчей.
Мы реализовали функции, позволяющие решить эти задачи, и выдвинули их вперед — на главную сайта, чтобы пользователь добрался до них за минимум кликов.
- Первый экран главной показывает итоги прошедшего матча и дату следующего.
- Меню дает быстрый доступ к календарю и возможность быстро купить билет или абонемент.
- Блок новостей сообщает обо всем, что произошло. Причем новости скомпонованы по инфоповодам, чтобы точно ничего не пропустить.
Посмотрели все варианты расписания и скомпоновали лучший
Бенчмаркинг позволяет оценить, как одну и ту же функцию воплощают разные сайты. Мы изучили расписание матчей на всех сайтах, которые собрали для исследования, выбрали самые удобные решения и воплотили их в расписании для сайта «Спартака».
- Пришли к делению матчей на домашние и выездные. Оказалось, это важно болельщику для планирования.
- Отобразили основную информацию: кто соперник, когда, где и во сколько мат.
- Вывели кнопку для быстрой покупки билета или абонемента. Захотел посмотреть игру в живую — сразу купил возможность.
Нестандартная лента новостей
Обычная лента новостных постов — хронологическая, новости идут одна за другой по порядку, сверху свежие. Такая лента есть на сайте «Спартака», но, кроме нее, мы сделали ленту по событиям, она отображается на главной.
В такой ленте новости, относящиеся к одному инфоповоду, собраны в группу. Болельщику не нужно скроллить все новости, чтобы выбирать из них связанное с матчем, переходом игрока в команду или важным решением тренера, он сразу увидит группу постов.
Такой подход вовлекает в изучение материалов по теме и увеличивает глубину просмотра сайта.
Видео без тормозов
У клуба есть «Спартак ТВ»: на сайте выкладывают записи матчей, интервью и атмосферные ролики. Болельщик может использовать официальный источник, ему не нужно искать другой сайт, чтобы посмотреть запись. Мы организовали воспроизведение роликов со стороннего хранилища, поэтому они не нагружают систему и работают без тормозов. Смотреть видео на официальном сайте также удобно, как и на других платформах.
Интерфейс, на который можно влиять, нравится пользователям. Мини-интерактив в виде реакций на ролик позволяет выразить свое отношение к видео с помощью эмоджи, поддержать команду и увидеть реакцию единомышленников.
Команда как супергерои
Болельщики любят членов команды, гордятся лучшими игроками. Мы развели членов команды по разделам в зависимости от их роли — вратарь, защитник или нападающий. Разделы сопровождают атрибуты — шлем, перчатки и шайба, они крупные, даже гротескные, и анимированные, чтобы привлечь внимание. Карточки членов команды похожи на супергеройские досье с красочным фото и важной для болельщика информацией о хоккеисте и статистике его достижений.
Все о борьбе за чемпионство в турнирной таблице
За успехами клуба можно следить по турнирной таблице. Мы думали, как сделать схему понятной, и остановились на разделении на таблицу регулярного чемпионата и сетку Плей-офф. Сетка отображает прошедшие матчи с результатом и счетом, вышедшие в следующий раунд команды и предстоящие игры.
Здесь же можно быстро купить билеты на предстоящие игры. Сайт в принципе предлагает билеты на матчи во всех случаях, где это уместно, чтобы пользователь не тратил время на поиск нужной кнопки и успел купить билет.
Следим за статистикой матча — все важное перед глазами
Официальный сайт клуба — самое надежное место, чтобы узнать счет и верную статистику по игре. Карточка матча дает всю основную информацию, которая интересует болельщика в первую очередь:
- соперник и счет сразу бросаются в глаза;
- понять, как шел матч, поможет счет по периодам;
- ниже есть подробная статистика: состав команд с обеих сторон и статистика по каждому игроку: броски, коэффициенты, шайбы и время.
Клуб гордится своей историей
Хоккейный клуб «Спартак» берет начало в 1946 году, на протяжении всей истории у него было много громких достижений, славных голов и легенд — тренеров и игроков, которыми гордится и клуб, и болельщики.
Несколько разделов на сайте посвящены истории и достижениям «Спартака» в хоккее:
- начало и становление команды, успехи и вызовы, которые помогли стать собой — раздел «История клуба»;
- легендарные тренеры, выдающиеся игроки и все чемпионы, которые были в команде с ее образования — раздел «Зал славы»;
- биография и фото важного для клуба человека — тренера или игрока — на «Странице о легенде», на которую можно перейти из «Зала славы».
Все эти исторические разделы сопровождают архивные фотографии и видеоролики.
Дизайн сайта — это драйв, эмоции и агрессия
Спорт — эмоциональная тема. Хоккей динамичный, энергичный и даже в какой-то мере агрессивный. Мы передали это настроение в дизайне: новый сайт транслирует силу и энергию, настраивает на уверенность в победе.
В оформлении сайта много движения:
- активные цвета, бегущие строки и шрифты привлекают внимание и расставляют акценты на важном;
- фотографии показывают эмоции игроков и болельщиков на трибунах;
- если нет важных новостей, на главной пользователя встречает видео, которое настраивает на предвкушение матча, ожидание победы и переживания за любимую команду.
Новый сайт ХК «Спартак» Москва решает все задачи болельщика
Все решения, которые мы принимали во время проектирования сайта, мы основывали на выводах из исследования. Интервью с болельщиками, бенчмаркинг и опыт работы со спортивными сайтами помогли сформировать удобный интерфейс и подобрать дизайн. Мы выделили приоритетные задачи болельщика, нашли способы реализовать их на сайте, чтобы пользоваться было удобно, и добавили интересные фишки, которые сделают использование сайта приятнее.
Напишите в комментариях, как вам новый сайт ХК «Спартак» Москва — https://spartak.ru/