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