Дизайн и проектирование KHL.ru: из новостного сайта — в персональную медиаплатформу для каждого болельщика

Главное о кейсе

КХЛ — 22 клуба из четырех стран и около четырех матчей в игровой день. KHL.ru был классическим новостным сайтом: лента, календарь, таблицы. Чтобы следить за своей командой, болельщик искал нужное в общем потоке, а за видео и трансляциями шел на другие площадки.

Мы не ограничились редизайном — мы пересобрали продукт. KHL.ru стал медиаплатформой, которую каждый настраивает под себя: выбираешь команду и игроков, и сайт сам собирает матчи, новости, статистику и видео.

Девять модулей: медиахаб на главной, персональная лента, матч-центр в трех фазах, таблица-дашборд, видеоплатформа, медиасреды клубов и профили игроков, профиль болельщика с геймификацией, напоминания в 4 канала и защита от спойлеров.
Мы не ограничились редизайном — мы пересобрали продукт. KHL.ru стал медиаплатформой, которую каждый настраивает под себя: выбираешь команду и игроков, и сайт сам собирает матчи, новости, статистику и видео.

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

Как проект изменил жизнь пользователей

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

— Меньше пропущенных игр. Раньше о матче нужно было помнить самому. Теперь таймер до игры стоит на главной, а напоминание за 15 минут приходит туда, где человек и так сидит: в push, email, Telegram или ВКонтакте.

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

— Матч можно прожить, а не только узнать счет. Раньше счет, события и видео приходилось открывать на разных страницах и сервисах. Теперь страница матча живет вместе с игрой: анонс и составы, затем live-счет, таймер периода, таймлайн событий и текстовая трансляция, после сирены — итоги и лучшие моменты. Многие держат ее открытой рядом с трансляцией.

— Запись без испорченной интриги. Игры идут в часовых поясах от UTC+3 до UTC+10, и многие смотрят их в записи. Раньше счет попадался в первой же карточке на главной. Теперь одно нажатие скрывает его в карточках, таблицах, поиске и видео.

— Расклад сезона за минуту. Раньше картину борьбы за плей-офф приходилось собирать самому из таблицы и календаря. Теперь таблица показывает форму команд, серии и динамику мест, а режим «Если завтра плей-офф» сразу строит возможную сетку.

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

— Хоккей с нуля без порога входа. Новичок не обязан знать, что такое «зона плей-офф». Его встречают привычные по соцсетям форматы: вертикальные ролики, подборки, «Выбор болельщиков».

Бизнес-задача и ее решение

КХЛ поставила задачу провести редизайн и верстку официального сайта и разработать макет мобильного приложения. KHL.ru — единая точка входа во все официальные онлайн-проекты лиги, и у него четыре цели:

1. Давать актуальную официальную информацию: расписание, результаты, команды и игроков, статистику, новости, медиа.
2. Продвигать хоккей и привлекать новых болельщиков.
3. Укреплять имидж лиги, ее узнаваемость и престиж в России и за рубежом.
4. Быть площадкой для взаимодействия с болельщиками, партнерами, спонсорами и СМИ.

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

Крафт (мастерство), реализация, технические детали

Дизайн

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

— Статистика как дашборд. Форма последних матчей, победные серии, динамика мест и рекорды видны с первого взгляда. Сценарий «Если завтра плей-офф» показывает таблицу и кубковую сетку одновременно.

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

Юзабилити

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

— Матч-центр в трех фазах. Одна страница меняет иерархию вместе с игрой. До матча главное — время и анонс, во время — счет, таймер и события, после сирены — итоги и лучшие моменты.

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

— Напоминания в четырех каналах. Пользователь сам выбирает, о каких событиях узнавать и куда: push, email, Telegram или ВКонтакте.

Интерактив и анимация

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

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

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Инсайт 1. Болельщик приходит не за лигой, а за своей командой. Человек следит за одной командой из 22, а сайт лиги по своей природе рассказывает обо всех сразу. Поэтому в центр продукта мы поставили самого болельщика: выбрал команду — и сайт перестраивается вокруг нее.

Инсайт 2. Счет может испортить вечер. Лига играет в часовых поясах от UTC+3 до UTC+10, и часть болельщиков смотрит игры в записи. Для них результат на главной — не новость, а спойлер. Придумать переключатель было несложно. Сложнее оказалось пройти по всей системе и найти каждое место, где показывается счет: карточки, таблицы, поиск, видео, превью.

Инсайт 3. Две аудитории хотят противоположного. Фанату нужна глубина статистики, а новичку важно в ней не утонуть. Вместо двух версий сайта мы заложили уровни: сводка по форме команд, сериям и раскладу плей-офф понятна с первого взгляда, а подробная статистика открывается тем, кому она нужна.

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

Скриншоты