редакции
Как создавали новый сайт ХК Спартак Москва: бенчмаркинг, интервью и агрессивный дизайн
IT-компания Riverstart обновили официальный сайт хоккейного клуба «Спартак» Москва. Команда — одна из самых популярных в КХЛ, у нее множество фанатов, которые хотят читать новости о жизни клуба, покупать билеты и следить за матчами с участием «Спартака».
Новый сайт запустили в марте 2024 года, поэтому пока набралось недостаточно статистики, чтобы достоверно оценить эффективность нового сайта в сравнении со старой версией. Но сейчас можно оценить интерфейс, дизайн и функциональность продукта.
Расскажем о процессах, которые сопутствуют разработке, и идеях, которые мы воплотили на сайте.
Эксперты на Премии по маркетингу и коммуникациям 2024 в разделе КХЛ присудили ХК «Спартак» Москва награду «Лучший интернет-сайт».
Исследования: зачем вообще нужен сайт
Структурные, дизайнерские, интерфейсные решения должны иметь основания — почему меню сформировано именно так, почему на главной находятся именно эти блоки, зачем на сайте этот раздел, почему выбраны эти цвета и так далее.
Мы начинаем работу с исследования: если поймем, зачем аудитории нужен сайт и как она будет им пользоваться, то мы сможем дать ей нужные функции и сделать их максимально удобными. Тогда сайт будет полезный и удобный, а значит и востребованный.
Какие именно исследования мы проводили для проекта:
1. Глубинные интервью с болельщиками
Для создания нового сайта ХК «Спартак» Москва мы провели 12 интервью с фанатами хоккея. Участвовали болельщики «Спартака» и других команд из КХЛ, поскольку важен опыт болельщика в принципе.
Для примера, мы узнавали:
- на каких сайтах они обычно читают новости о хоккее;
- посещают ли они официальные сайты хоккейных клубов;
- если посещают, то для чего, какие задачи они решают;
- какая информация им интересна больше всего, что в приоритете;
- какая новостная лента кажется удобнее.
Инсайты из интервью берем в работу.
Пример:
Мы выяснили, что одна из потребностей — узнать, что нового произошло в жизни команды. Очевидно, для этого на сайте нужны новости. Мы выделили отдельный раздел со всеми событиями.
Поскольку узнать о новых событиях и переменах — это одна из приоритетных задач, то мы сделали дополнительный блок новостей на главной. Сосредоточились на удобном представлении постов и в качестве референсов брали новостные ленты на популярных у болельщиков площадок, чтобы им было привычно пользоваться разделом.
При этом вывели новости на главную страницу и объединили их по инфоповодам, чтобы решить еще одну задачу болельщика: узнать всё об интересном ему событии в удобном виде. Ему не нужно искать посты в общей ленте, он сразу увидит подборку материалов о матче, контракте с игроком или другом событии.
Вывод:
Сайт хоккейной команды, да и любой другой организации, должен быть создан для людей. Лучший способ узнать, что нужно аудитории — спросить напрямую.
2. Бенчмаркинг сайтов
Бенчмаркинг — это исследование сайтов схожей тематики, чтобы оценить их удобство и функциональность.
Мы проходим на сайтах несколько сценариев поведения пользователей и оцениваем выполнение задачи по разным критериям. Из такого исследования получается список бенчмарок — лучших интерфейсных и функциональных решений, которые мы адаптируем для проекта.
Например, мы изучили множество отображений матчей в сезоне на разных хоккейных сайтах и поняли, как будет логичнее отобразить их. Оказалось, что в виде календаря с разделением на домашние и выездные. По календарю болельщику проще ориентироваться, когда он сможет посетить матч или в какой день ждать трансляцию. Разделение удобно в том числе тем, кому удобнее посещать матчи в родном городе.
Вывод:
Пользователи уже привыкли к определенным решениям на сайтах, бенчмаркинг позволяет определить эти тенденции и понять, какие стоит использовать на новом сайте, какие можно улучшить, а каких избегать.
Мы делали бенчмаркинги для множества проектов, сайт ХК «Спартак Москва» — не исключение. К примеру, мы изучили 60 сайтов аэропортов мира, когда делали новый сайт Международного аэропорта Внуково.
3. Аналитика
Поскольку у «Спартака» был старый сайт, который давно работал и собирал статистику, мы могли изучить поведенческие факторы, тепловую карту кликов, трафик и другие параметры. Это позволило сделать выводы, какие страницы посещала аудитория чаще всего, на каких она задерживалась, какие покидала сразу же.
К примеру, страница с историей клуба предполагает, что ее нужно читать, изучать, рассматривать фотографии и смотреть видео. Если мы видим, что пользователи быстро покидают страницу, не доходя до второго скролла, воспринимаем это как сигнал, что информация неправильно скомпонована, ее неудобно читать.
Вывод:
Изучение статистики позволяет дополнить интервью аудитории и увидеть, как она действительно себя вела на сайте и взаимодействовала с тем, что уже есть. Так можно выделить удачные решения и зоны роста.
Также мы использовали опыт, который накопили, пока работали над новым сайтом хоккейного клуба «Торпедо» и концепцией сайта футбольного клуба «Пари-НН».
Что нужно аудитории от сайта спортивного клуба
Благодаря исследованиям мы выявили основные задачи пользователя на сайте хоккейной команды:
- Купить билет на матч или абонемент на сезон.
- Узнать новости, связанные с любимой командой.
- Увидеть счет недавнего матча.
- Посмотреть расписание игр в сезоне.
Это основное, зачем большинство болельщиков приходит на сайт. Значит, именно это нужно предоставить им это в первую очередь. Функции для решения этих задач должны быть доступны максимально быстро. Посмотрим на примере, как мы работали с сайтом Спартака.
Как решить задачи пользователя за минимум кликов
Для каждой задачи есть решение на сайте, причем достаточно просто зайти на главную.
1. Задача — купить билет на матч или абонемент на сезон
Часть пользователей сразу имеет запрос на покупку билетов. При заходе на сайт в верхнем меню кнопка «Билеты» бросается в глаза:
Но купить билет можно и из других разделов, там, где потребность купить билет может возникнуть. Билетами можно заинтересоваться из-за конкретного интересного матча или удобного для болельщика места — например, если игра пройдет в городе, куда ему легко добраться.
Пользователь открывает расписание матчей, видит тот, который хочется посетить, и здесь же покупает на него билет или абонемент на весь сезон. Аналогично с сеткой Плей-офф или карточкой ближайшего матча: открыл, заинтересовался, увидел кнопку покупки.
2. Задача — узнать новости о любимом клубе
Эту задачу тоже можно решить из меню или прямо на главной.
На главной новости сгруппированы по событию, чтобы увидеть сразу все материалы по теме и не идти в поиск. В разделе Новости стандартная хронологическая лента, привычная пользователям.
3. Задача — увидеть счет недавнего матча
Счет завершенного матча находится на главной в виде табло: крупный счет, основная информация о ходе матча. С первого взгляда понятно, как прошла игра. По клику откроется протокол, где можно увидеть успехи команд: фамилии игроков, время и шайбы.
4. Задача — посмотреть расписание игр в сезоне
Мы посмотрели, как сайты из бенчмаркинга оформляют расписание матчей, опросили болельщиков и скомпоновали вариант с разделением на домашние и выездные игры, он оказался самым удобным. Отсюда можно также купит билет на предстоящий матч.
Кроме этих четырех основных, самых популярных задач, болельщику интересен и другой контент.
5. Задача — узнать больше об игроках команды
Состав команды разделен по ролям игроков на поле, у каждой роли свой атрибут, как, например, шлем у вратаря. На сайте этот атрибут анимирован, привлекает внимание и добавляет динамики.
Страница об игроке содержит всю интересную информацию о нем самом и его достижениях в хоккее. Здесь же по тегу игрока выводятся видео и новости, где он упоминается. Можно сразу посмотреть все доступные видео и фото о любимом хоккеисте.
6. Задача — изучить историю любимого клуба
ХК «Спартак» Москва гордится своей историей. Из архивных фото и медиа мы собрали рассказ о становлении клуба и отдельно выдающихся личностях, которые на него повлияли: игроках и тренерах. Для них есть Зал славы «Спартака» и отдельные страницы с биографиями и архивными фото и видео.
7. Задача — посмотреть интервью или записи матчей
У «Спартака» есть «Спартак ТВ» — раздел с видеороликами, там публикуют блиц-интервью, нарезки с матчей, видео с трибун и другие видео. Они хранятся на сторонних ресурсах, поэтому быстро загружаются и не тормозят систему.
Здесь мы добавили интерактив: к ролику можно поставить реакцию в виде эмоджи и посмотреть, как отреагировали другие болельщики. Это добавляет некоторой динамики, живости сайту.
Агрессия, эмоции, драйв в дизайне
Хоккей, как и другой командный спорт, очень эмоционален. Фанаты болеют на трибунах, радуются заброшенным шайбам, поддерживают команду. Игроки отмечают победы, расстраиваются из-за неудач, предвкушают игру.
Сайт может передать часть эмоций с помощью дизайна. Мы используем много эмоциональных фото с игроками и болельщиками, чтобы пользователь с помощью эмпатии почувствовал часть того, что чувствовали другие болельщики во время матча.
Агрессивные и яркие цвета, лозунги, шрифты настраивают на конкуренцию, жажду соревнования, транслирует силу, уверенность в победе и активность команды.
Результат — сайт, полезный аудитории
Анализ, которым мы поделились, позволяет выделить среди всех функций сайта приоритетные, которые нужны пользователю чаще всего и как можно быстрее.
Сайт, который может дать пользователю эти функции в удобном виде, будет полезен и востребован.
Хоккейному болельщику обычно не терпится посмотреть счет или открыть новости, также важно найти способ купить билет и узнать, какие матчи будут в сезоне. Этим и обуславливаются функции и разделы сайта, которые мы поставили в быстрый доступ на главную и в меню.
Напишите в комментариях, как вам новый сайт ХК «Спартак» Москва — https://spartak.ru/