Дизайн-концепция сайта футбольного клуба

Задача и проблема

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

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

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

О клиенте

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

Решение — концепция официального сайта спортивного клуба

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

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

Аудит сайта и исследование мирового опыта

Перед проектированием концепции мы изучили сайты российских и зарубежных спортивных клубов и проанализировали существующий сайт ФК «Пари Нижний Новгород».

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

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

Главная страница создает эмоциональное вовлечение

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

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

Так главный экран начинает работать не только как навигация, но и как инструмент эмоционального вовлечения.

Сделали футболистов главными героями сайта

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

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

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

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

Построили структуру вокруг главных сценариев болельщиков

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

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

Изменили подход к публикации новостей

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

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

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

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

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

Интегрировали фирменный магазин в пользовательские сценарии

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

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

Какие задачи помогает решать такой подход

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

Такой подход позволяет решать задачи:

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

Кому актуально это решение

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

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