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

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

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

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

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

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

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

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

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

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

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

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

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

Поделимся парой выводов для примера:

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

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

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

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

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

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

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

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

Пример удачной реализации: расписание матчей уже на втором экране на <a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fwww.fclm.ru%2F&postId=942383" rel="nofollow noreferrer noopener" target="_blank">www.fclm.ru</a>
Пример удачной реализации: расписание матчей уже на втором экране на www.fclm.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Основным персонажам место на главной сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

Официальный магазин

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

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

Результат

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

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

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

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

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

Вам может быть интересно, как мы разрабатывали сайт Международного аэропорта Внуково:

2626
11
14 комментариев

Неплохо! Подошли с большим креативом, я думаю, что для любителей футбола вы создали рай)

4
Ответить

Спасибо! Хотелось найти какое-то нестандартное решение)

Ответить

Клёво получилось с анимированными футболистами, если у каждого еще своя "фишка" в движении, то вообще прикольно.

2
Ответить

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

1
Ответить

Статья рассказывает о разработке нового сайта для футбольного клуба «Пари-НН»

Саммари:
- Riverstart обновляет сайт ФК «Пари-НН»
- Цель: больше эмоций и удобства для фанов
- Опыт с сайтами ХК «Торпедо» и «Спартак»
- Бенчмаркинг спортивных сайтов
- Идеи: разделение матчей, доступ к таблицам
- Концепция: азарт и героизация игроков
- "Выбери своего героя" - концепт с видеоиграми
- Игроки как основные фигуры на сайте
- Важная информация на главной странице
- Новости в тематических лентах
- Промо региона и стадиона
- Официальный магазин с мерчем
- Анимация и видео для динамики
- Кейс о сайте аэропорта Внуково от Riverstart

Стараюсь выделять самое важное для вас.

2
Ответить

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

2
Ответить

Совсем превращать сайт в интерфейс игры не хотелось) Но что-то переняли.

Ответить