Редизайн сайта хоккейного клуба "Металлург": лучшее решение для клуба, для фанатов, для КХЛ

ЗаказчикМагнитогорский «Металлург» — самый титулованный хоккейный клуб в Европе в новейшей истории России, Двукратный обладатель Кубка Гагарина и один из ключевых участников Континентальной хоккейной лигиЗадачаГлавные задачи проекта: провести комплексный редизайн сайта, упростить покупку билетов на матчи, привлечь болельщиков в магазин атрибутики, создать англоязычную версию сайта

В 2013 году мы сделали для «Металлурга» сайт, который получил несколько наград, а его UI‍-? решения с удивительным постоянством начали появляться на других спортивных сайтах. За эти годы отсутствие адаптивной версии стало проблемой — заходы с мобильных устройств в несколько раз превысили основной трафик.

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

До редизайна сайт клуба выглядел так:

de9b3ff62643bfd2e451ec079d1dce1d.png

Главные задачи

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

Что сделали

  • Разобрали ВСЕ ветки сценариев при взаимодействии «болельщик — клуб»
  • Через навигацию и взаимодействие рассказали болельщикам обо всех возможностях сайта
  • Отрисовали БОЛЕЕ 200 макетов
  • Создали англоязычную версию
  • Собрали новый сайт «Металлурга»: красивый, аутентичный, динамичный

Визуальное сравнение старого и нового дизайна:

5d55d099573bb630280b55921b71ab08.png

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

Главная страница

В новой версии сайта мы использовали 100% экрана! Ведь спорт требует полного погружения. Болельщик хочет узнать всё самое интересное сразу — мы вынесли на первый экран слайдер с важными событиями и ленту матчей.

e63d4880b9180f2d93621bfbb091961d.gif

Карточка игрока и страница состава команды

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

dfa4ab6f6c511b837aecb50fdbd762c2.png

Календарь матчей

Календарь выглядит стильно, удобно и информативно с любого устройства.

1b3ea6daf9675b78c9eeb977647b8081.png

Интерфейс трансляции матчей

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

06bf0fc3d048d189b01fe341b55e0d6b.png

Голосование за самого ценного игрока каждого матча

Вывели один из любимых разделов болельщиков ближе к ним — на главную страницу и на страницу новостей.

bf001f13845bcbb3e312c15f2d261dc6.png

Конкурс прогнозов

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

e9daf9bbbb2740995c20034b1fa3a558.png

Статистика матчей и игроков

Мы сделали раздел статистики понятным каждому. И интегрировали его с КХЛ, чтобы данные всегда были актуальны.

ef7cd854be1408d64f25780ea38d0603.png

Новые возможности e?-? commerce

»Сделайте так, чтобы купить билет на хоккей стало так же просто, как в кино», — поставил задачу заказчик.

И мы ее выполнили. Затем разработали страницу абонементов и заново собрали онлайн-магазин фан-атрибутики.

2e762d1fc07131e47e9064ec6bd1c24f.png

06f18e1c819a37640ae57787bf1df763.png

0bb348af30a3ab4b7b2d50a6b6367e28.png

6d44d905a643f0f663cdcdcdcd96ad52.png

96b437a6e5825339c194d4a754cd1a15.png

1f40da7a2d7bb49e39d15d1a57b56a0d.png

Успешные проекты появляются благодаря совместной работе и разработчика, и заказчика. Благодарим нашего партнера по разработке — старшего менеджера отдела информационных технологий «Металлурга» Виталия Витальевича Кузнецова!

Мы поддерживаем и развиваем сайт metallurg.ru с 2013 года, новую версию — с 2020 года. Почитать кейс разработки первой версии этого красивого digital-продукта можно на сайте Студии Валерия Комягина. 

Спасибо за внимание — успешного бизнеса каждому, новых побед «Металлургу»!  

Перейти на сайт

Полный текст статьи читайте на CMS Magazine