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

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

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

Исследования: зачем вообще нужен сайт

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

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

Какие именно исследования мы проводили для проекта:

1. Глубинные интервью с болельщиками

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

Для примера, мы узнавали:

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

Инсайты из интервью берем в работу.

Пример:

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

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

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

2. Бенчмаркинг сайтов

Бенчмаркинг — это исследование сайтов схожей тематики, чтобы оценить их удобство и функциональность.

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

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

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

Мы делали бенчмаркинги для множества проектов, сайт ХК «Спартак Москва» — не исключение. К примеру, мы изучили 60 сайтов аэропортов мира, когда делали новый сайт Международного аэропорта Внуково.

3. Аналитика

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

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

Вывод:
Изучение статистики позволяет дополнить интервью аудитории и увидеть, как она действительно себя вела на сайте и взаимодействовала с тем, что уже есть. Так можно выделить удачные решения и зоны роста.

Также мы использовали опыт, который накопили, пока работали над новым сайтом хоккейного клуба «Торпедо» и концепцией сайта футбольного клуба «Пари-НН».

Что нужно аудитории от сайта спортивного клуба

Благодаря исследованиям мы выявили основные задачи пользователя на сайте хоккейной команды:

1. Купить билет на матч или абонемент на сезон.
2. Узнать новости, связанные с любимой командой.
3. Увидеть счет недавнего матча.
4. Посмотреть расписание игр в сезоне.

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

Как решить задачи пользователя за минимум кликов

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

1. Задача — купить билет на матч или абонемент на сезон

Часть пользователей сразу имеет запрос на покупку билетов. При заходе на сайт в верхнем меню кнопка «Билеты» бросается в глаза:

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

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

2. Задача — узнать новости о любимом клубе

Эту задачу тоже можно решить из меню или прямо на главной.

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

3. Задача — увидеть счет недавнего матча

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

4. Задача — посмотреть расписание игр в сезоне

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

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

5. Задача — узнать больше об игроках команды

Состав команды разделен по ролям игроков на поле, у каждой роли свой атрибут, как, например, шлем у вратаря. На сайте этот атрибут анимирован, привлекает внимание и добавляет динамики.

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

6. Задача — изучить историю любимого клуба

ХК «Спартак» Москва гордится своей историей. Из архивных фото и медиа мы собрали рассказ о становлении клуба и отдельно выдающихся личностях, которые на него повлияли: игроках и тренерах. Для них есть Зал славы «Спартака» и отдельные страницы с биографиями и архивными фото и видео.

7. Задача — посмотреть интервью или записи матчей

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

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

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

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

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

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

Результат — сайт, полезный аудитории

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

Сайт, который может дать пользователю эти функции в удобном виде, будет полезен и востребован.

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

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