Вдохновились видеоиграми: концепция нового сайта футбольного клуба «Пари-НН»

Футбольный клуб «Пари Нижний Новгород» обновил свой сайт. В процессе обновления клуб попросил нас предложить свежие идеи, которые бы придали сайту больше эмоциональности. Мы сделали концепцию и делимся с вами результатом.

Футбольный клуб «Пари Нижний Новгород» — это главный футбольный клуб региона, выступающий в Российской Премьер-Лиге. Клуб попросил нас поработать над концепцией нового сайта, чтобы он передавал больше эмоций, отражал победы команды и полюбился футбольным болельщикам.

У нас в Riverstart есть опыт работы со спортивными сайтами: модернизировали сайт ХК «Торпедо»,  скоро поделимся кейсом о разработке нового сайта ХК «Спартак».

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

Бенчмаркинг спортивных сайтов: ищем лучшие решения

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

1. Собрали базу из футбольной и в целом спортивной сферы.
2. Добавили в список для исследования старый сайт ФК Пари-НН, чтобы понять, что можно перенести на новый ресурс, а что стоит улучшить.
3. Составили список пользовательских задач, чтобы знать, что проверять на сайте.

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

Что болельщик хочет от сайта клуба:

1. узнавать обо всем, что происходит с командой — читать новости;
2. смотреть расписание матчей, вовремя узнавать о будущих играх;
3. покупать билеты на игры или абонемент на сезон;
4. следить за успехами команды по турнирной таблице;
5. покупать официальную клубную атрибутику.

Готовые бенчмарки мы объединили с результатом аудита существующего сайта. Получился список возможностей и идей, которые мы используем на сайте, чтобы сделать его удобнее и повысить конверсию. Поделимся парой выводов для примера:

Турнирная таблица и расписание матчей в быстром доступе

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

Данные из Яндекс.Вордстат

Турнирная таблица и расписание матчей должны быть в быстром доступе. Поставить эти блоки в 4-5 скроллах от начала страницы — не очень удачное решение, с каждым скроллом все меньше пользователей доходят до решения своей задачи. Нужно поднять расписание и таблицу на второй-третий скролл.

Пример удачной реализации: расписание матчей уже на втором экране на www.fclm.ru

Разделение матчей на выездные и домашние

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

Пример разделения домашних и выездных матчей

Концепция сайта ФК Пари НН

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

1. Центральные объекты — игроки команды, многие именно из-за них ходят на матчи, следят за играми и в принципе болеют за клуб. Контакт болельщика и игрока мы устанавливаем с помощью анимированных изображений футболистов.
2. Футбол — это эмоции, болельщики приходят на матчи за драйвом, радостью от победы чувством единения с такими же, как он. Эту идею в новой концепции передают видео, фото и анимация.

Обратите внимание: все, что мы вам здесь показываем — только концепция.

Первое впечатление — азарт

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

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

Главные герои сайта — игроки клуба

Многим болельщикам интересно следить за игроками команды, их результатами. Футболисты клуба Пари НН должны быть главными действующими лицами на сайте — эта идея стала стилеобразующей.

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

Карточка футболиста схожа с карточкой персонажа в видеоигре:

1. Вместо фотографий мы используем видео: футболист смотрит в камеру и делает небольшое движение, он как анимированный игровой персонаж. Футболисты были свободны в действиях во время записи, поэтому каждый из них ведет себя по-своему, как естественно для него. Зрительный контакт и это движение дает ощущение контакта с футболистом, он становится ближе, понятнее. Анимация задает сайту динамику, это уместно на спортивном ресурсе.

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

Главные персонажи на главной сайта:

На главной и на странице с составом команды также будут крупные изображения игроков в полный рост:

Самая интересная информация для болельщика:

1. когда, где и с кем играет любимая команда;
2. как прошли недавние матчи;
3. как купить билет на игру.

Это все мы скомпоновали в единый блок и поместили на главную страницу. На матч приглашает игрок команды — это тоже работает на укрепление контакта болельщика и футболиста.

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

Новости в тематических блоках

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

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

Промо родного региона и команды

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

Эта часть передает два послания:

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

Промо официального магазина

Выбрать мерч — тоже одна из задач болельщика на сайте. У футбольного клуба «Пари Нижний Новгород» есть фирменный магазин атрибутики, о чем напоминает сайт большим конверсионным блоком. Анимация демонстрирует примеры самых ходовых позиций из разных категорий товаров, подталкивая к переходу на страницу магазина.

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

Обновлением сайта клуба «Пари-НН» занимается другая команда, но наша концепция сайта клубу очень понравилась:

Это не готовый сайт, а концепция с идеями и настроением. Оцените материал лайком, если было интересно, и поделитесь в комментариях, удалось ли нам передать идеи, которые мы задумали? Каким вы видите идеальный сайт футбольного клуба?