Мы приняли участие в подготовке к сезону 2013/2014 КХЛ хоккейного клуба «Металлург», разработав для клуба удобный современный сайт.
Какую задачу мы решали?
Сотрудничеством с Магнитогорском мы обязаны другому легендарному хоккейному клубу — московскому Динамо, для которого мы сделали сайт еще в 2010 году. За эту работу мы получили свою первую Премию Рунета — сайт «Динамо» был признан лучшим сайтом спортивного клуба и надолго стал настоящим эталоном для российских хоккейных клубов.
Если другие команды предпочитали, не мудрствуя лукаво, тихо заимствовать наши идеи — руководство «Металлурга» решило обратиться к первоисточнику. Нам предложили вместе поработать над новым сайтом.
Переговоры не были долгими. Во-первых, работая над проектом московского Динамо, мы успели полюбить российский хоккей и стать, пусть не фанатичными, но преданными его болельщиками. Поэтому возможность создать проект для другого маститого клуба была очень привлекательной. Кроме этого, времени на долгие переговоры попросту не было — с Магниткой мы познакомились в середине июня, а сайт нужно было открыть к первой игре сезона, которая была назначена на 6 сентября и, по мистическому совпадению, именно с динамовцами из Москвы.
Проект идеально отвечал нашим целям: нам предстояло решить непростую задачу — создать работу, которая выводила бы на новый уровень эталон, созданный нами же самими.
Как мы решали эту задачу?
Чтобы не терять времени, нам нужно было добиться максимально точных ожиданий от конечного результата с обеих сторон. Ребята из «Металлурга» находились в полутора тысячах километров от нас, поэтому в качестве основного коммуникационного инструмента мы выбрали Skype, а для визуализации собственных идей подготовили подробный интерактивный прототип.
Пока мы занимались подготовительными работами и подготовке к дизайну, пришла неожиданная новость — Металлург обновил собственный логотип. Логотип — один из основных элементов графической концепции, а значит, нам нужно было учитывать новую версию при работе над поиском графической концепции.
Новый логотип клуба был выполнен в традициях североамериканского хоккея. Основную его часть занимал лис — клубный талисман, имя которого, в частности, носит молодежная команда клуба («Стальные Лисы»).
Создание графической концепции для сайта спортивного клуба — задача, которая только кажется простой. С одной стороны, такие сайты изобилуют информацией — болельщики проводят на страницах сайта длительное время и просматривают, зачастую, по несколько десятков страниц. С другой, спорт — это все-таки азарт, адреналин и движение. А хоккей — это еще и здоровая доля агрессии. Нельзя было забывать и о том, что будущий дизайн должен был отражать характер Магнитки — клуба, родным для которого является один из основных центров российской черной металлургии.
Для решения этих задач мы предложили необычную концепцию, сочетающую в себе крупные контрастные легко-читаемые шрифты с агрессией и динамикой, присущей спортивной тематике.
Металлургический стиль выражен в графических акцентах. Так, например, начертание названия клуба стилизовано под неполированный металл, а логотип начинает разбрасывать горячие искры при наведении на него курсора.
Хоккей — очень динамичная игра и передача этой динамики стала по-настоящему интересной и увлекательной задачей. Нам нужно было создать азартную, увлекательную атмосферу — атмосферу игры. С этой задачей, в частности, отлично справились в свое время дизайнеры Electronic Arts — одного из лидера рынка компьютерных игр, ответственные за выпуск таких игровых шедевров, как FIFA и NHL.
Именно игры EA оживили воспоминания главного продюсера проекта Сергея Филиппова о том, с каким удовольствием он возился в детстве с коллекционными карточками любимых футболистов. Информацию об игроках и тренерах команды решено было выполнить в стиле таких карточек, лицевую часть которых занимала бы фотография и номер игрока, а на обороте были бы отражены его основные игровые показатели. Эффект переворота карточки впоследствии был анимирован, что создало еще большую эмоциональную привязку пользователей.
Календарь игр — важная для болельщиков штука. Когда будет следующая игра и то, как сыграли прошлую игру — одни из тех самых частых вопросов. Поэтому на главной странице мы поместили небольшой анонс, в центре которого всегда расположена предстоящая игра. Анонс интерактивный — если подвести курсор к одной из ячеек, появятся дополнительные опции: для прошедших игр это итоговый счет и протокол состоявшейся игры, а для предстоящих — возможность сделать прогноз на исход поединка.
Подробному календарю мы выделили отдельную страницу. Одним взглядом можно быстро оценить, в каком состоянии команда — «на подъеме», когда выигранных игр больше, чем проигранных, или «испытывает спад».
Матчи — ключевой элемент сайта спортивного клуба. Ведь именно ради них все и делается — тренировки, наем лучших тренеров и игроков, разработка тактики и стратегии. Каждой игре на сайте хоккейного клуба «Металлург» посвящена отдельная страница.
Здесь помещена ключевая информация о матче: когда и где состоялась игра, с каким результатом завершилась, а также ключевая статистическая информация, разбитая по игровым периодам (в хоккее основными показателями являются голы, броски по воротам, выигранные вбрасывания и общее количество штрафных минут).
Сразу под протоколом мы поместили офигительную штуку, которую внутри Студии прозвали «таймлайном». Игра длится 60 минут (три периода по 20 минут для большинства игр), в том случае, если она завершилась победой одной из команд. Поэтому мы сделали временную шкалу, на которую нанесли важные игровые моменты. Для каждого из событий мы придумали свою иконку, при наведении на которую можно посмотреть дополнительную информацию — время события, имя и фамилия игрока и небольшие пояснения.
Еще ниже расположились ссылки, с помощью которых можно переключать режимы дополнительной информации об игре. Основным режимом является режим отображения состава играющих команд.
В хоккее команды разбиты на так называемые «пятерки» (два защитника + три нападающих). Игроки постоянно сменяют друг друга на льду, но чаще всего замена происходит целыми пятерками, и от того, как тренер распределил игроков по звеньям, зачастую, зависит исход матча.
Для более наглядной демонстрации этого игрового аспекта мы создали интерактивную карту «пятерок». Переключая звенья между собой, посетитель сайта, словно настоящий тренер, сможет увидеть, как одна пятерка «покидает лед», а другая — сменяет ушедших партнеров.
Вторым режимом является режим с подробным протоколом матча. Здесь, точно так же, как и в таймлайне, ключевые события отражены в хронологическом порядке.
Если протокола, который содержит сухую статистическую информацию, окажется мало — можно посмотреть запись текстовой «онлайн-трансляции». Такую трансляцию проводит самый настоящий спортивный комментатор, старающийся описывать еще и ход игры — так у пользователей, у которых нет возможности посетить стадион или следить за ТВ-трансляцией матча, появляется возможность почувствовать атмосферу и накал страстей.
Работая с информационными составляющими сайта, мы старались внедрить наиболее удобные практики современных СМИ. В ленте новостей мы отказались от страницы с полным текстом, после посещения которой нужно снова возвращаться к списку новостей. Вместо этого полный текст открывается в окне прямо поверх списка новостей.
Чаще всего новости касаются матчей, поэтому мы постарались упростить работу редакторам сайта — врезки с информацией из протоколов матчей интегрируются в текст публикации одним нажатием.
Небольшая иконка-индикатор переводит окно из пассивного режима чтения в активный режим, позволяющий членам фан-клуба «Металлурга» обсудить новость между собой.
В этом проекте так же, как и в работе с «Динамо», мы автоматизировали публикацию многих материалов, интегрировав систему управления сайтом с информационными системами КХЛ. Проще говоря, то, что можно подгружать с сайта КХЛ автоматически — подгружается автоматически.
Мы всегда стараемся создавать проект, думая о людях, которые будут им пользоваться. На собственном опыте мы убедились в том, насколько непросто управлять сайтом современного спортивного клуба. Поэтому необходимость такой автоматизации даже не обсуждалась, и мы очень удивлены, что подавляющая часть сайтов других хоккейных клубов не пользуется этой очевидной возможностью облегчить жизнь редакторов сайтов.
Для постоянных болельщиков мы переработали некоторые популярные сервисы прежней версии сайта. Одним из таких сервисом был и остается интернет-тотализатор — своеобразный конкурс прогнозистов с настоящими призами, которые вручаются по итогам сезона.
С помощью этого сервиса болельщики могут делать свои «ставки» на исход предстоящих игр и, в зависимости от точности сделанного прогноза, получать игровые «очки», идущие в общий зачет участников конкурса.
Настоящие болельщики (а болельщики магнитогорского «Металлурга» именно такие) всегда поддерживают клуб, в том числе и приобретая фирменную атрибутику. Поэтому на сайте представлены несколько компонентов e-commerce.
В интернет-магазине можно приобрести атрибутику клуба.
В отличие от сайтов многих спортивных клубов, на сайте Магнитки представлена не «форма заказа», а настоящий функционал электронной коммерции. Магазин интегрирован с учетной и складской системой «1С», которую используют в клубе. А пользователи могут не только выбрать понравившийся товар, но и оплатить его прямо на сайте, получив свой заказ выбранным способом доставки уже через несколько дней. Все, как у взрослых!
Для фанатичных болельщиков мы предусмотрели возможность получить эксклюзивную вещь — например, игровой свитер с автографом любимого игрока. Правда за такой раритет придется побороться с конкурентами на аукционной площадке клуба.
Наконец, одной из важнейших задач, ради которых спортивные команды вообще обзаводятся сайтами — это продажа билетов на матчи.
Бизнес-процесс продажи, как правило, отдается на обслуживание специализированной компании. Нам нужно было обеспечить понятный и удобный интерфейс, который принимал бы заказ от посетителя сайта и передавал бы в специальную систему бронирования билетов.
Мы гордимся тем, как все получилось. Совместная работа с третьим участником проекта — это всегда непросто. Но наши партнеры из компании «Инфотех», чья билетная система была использована для реализации этого функционала, оказались настолько профессиональны, что нам удалось реализовать практически все идеи и интегрировать не только саму систему так, что пользователь не замечает разницы, но даже добиться 100%-ной интеграции пользователей. То есть зарегистрированным пользователям клубного сайта не приходится дополнительно регистрироваться в билетной системе.
Хороший сайт — это всегда результат напряженной работы с обеих сторон. И сайт «Металлурга» никогда не получился бы таким, каким его можно увидеть сегодня, без той готовности и того самоотверженного труда ребят из магнитогорского хоккейного клуба, оказывающих нам любую помощь, о которой мы только просили, на протяжении всего проекта.
Стоило нам попросить собрать для фото-сессии всех игроков и тренеров, как уже буквально через несколько дней нам подготовили несколько сотен фотографий. Нам нужны были фотографии арены с различных ракурсов — ребята, в буквальном смысле, бросили все и отправились готовить для нас материал. Нам не хватало информации об истории клуба — в тот же день в наш адрес была отправлена посылка с печатным двухтомником, который для нас подписал на память Президент Клуба.
Оказалось, что «Металлург» — это не только сильная хоккейная команда, но еще и «команда мечты» с точки зрения сотрудников, — клиент, о котором можно только мечтать. Спасибо, Металлург, что выбрали нас. Мы знаем — работа не всегда протекала идеально, были и сложные моменты. Но все-таки мы верим в то, что клуб и болельщики остались довольны результатом — в конечном счете, все делалось именно ради них!
Награды
В октябре 2014 года сайт ХК «Металлург» стал серебряным призером PROsport Awards в номинации «Лучшее digital-маркетинг решение».
Уже через месяц сайт ХК «Металлург» вновь был удостоен награды, но уже в конкурсе интернет-проектов «Золотой сайт». Ему присудили