Главное Свежее Вакансии Образование
😼
Выбор
редакции
1 156 2 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

Почему сайт команды получился именно таким? Разработчики рассказывают, какие идеи воплощали на сайте хоккейной команды «Спартак» Москва.

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

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

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

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

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


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

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

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

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


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

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

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

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

Пример:

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

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

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

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

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


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

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


Часть изученных сайтов

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

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

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

3. Аналитика


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

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

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

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

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


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

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

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

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


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

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


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


Билеты в хедере сайта

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

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


Турнирная таблица с возможность купить билет

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


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

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


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

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


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


Табло прошедшего матча и прогресс игры

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


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


Календарь игр и отдельно ближайшие матчи

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

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


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


Страница со списком вратарей ХК «Спартак» Москва

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


Страница, посвященная конкретному игроку команды

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


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


Страницы об истории ХК «Спартак» Москва

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


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

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


«Спартак ТВ»

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


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

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

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


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


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

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

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

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

+1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Владислав Масленников
Классно передали эмоции хоккея на сайте!
В особенности понравился блок с командами и статистикой игроков
Ответить
Елена
Самый интересный, на мой взгляд, этап — это как раз исследования, чтобы узнать, зачем сайт на самом деле нужен пользователям (а может и вовсе не нужен).
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.