У заказчика возник простой вопрос: можем ли мы сделать редизайн приложения и предложить различные варианты?
Начало истории может показаться довольно спокойным — ничто не предвещало, что вот-вот будет задействован весь креативный разум нашей команды.
Со стороны заказчика чувствовалось некоторое сомнение. Как потом выяснилось, представители СКА рассматривали варианты проработки дизайна не только с нами.
Поскольку визуальная составляющая приложения была чрезвычайно важна, СКА хотел заказать разработку у известной дизайн-студии. Но…
Начало истории может показаться довольно спокойным — ничто не предвещало, что вот-вот будет задействован весь креативный разум нашей команды.
Со стороны заказчика чувствовалось некоторое сомнение. Как потом выяснилось, представители СКА рассматривали варианты проработки дизайна не только с нами.
Поскольку визуальная составляющая приложения была чрезвычайно важна, СКА хотел заказать разработку у известной дизайн-студии. Но…
Мы предложили: «Давайте сделаем дизайн-концепцию — у вас будет больше вариантов для выбора». Представители разработчика согласились. Когда я закончила создание дизайн-концепции, они сказали: «Да, мы будем заказывать у вас! Не только разработку, но и дизайн!»
Елизавета Брагина
Ведущий дизайнер NOTISSIMUS
СКА мало нынешней аудитории и клуб хочет привлечь новых болельщиков — отыскать их среди тех, кто пока не сильно интересуется хоккеем.
Егор Ногтев
Руководитель службы интернет-маркетинга, ХК СКА
Задача - привлечь новую аудиторию
То, что мы смогли убедить заказчика доверить именно нам разработку дизайна, пошло приложению на пользу: те задачи, которые мы закрыли, те улучшения, которые внедрили, ту функциональность, которую добавили — никто бы не смог придумать и воплотить лучше чем единая команда, имеющая восьмилетний опыт создания мобильных приложений.
Нам повезло, что со стороны заказчика проект вел Егор Ногтев — опытный специалист, который ясно и грамотно ставит задачи, быстро схватывает суть вопроса и предлагает конструктивные идеи.
Нам повезло, что со стороны заказчика проект вел Егор Ногтев — опытный специалист, который ясно и грамотно ставит задачи, быстро схватывает суть вопроса и предлагает конструктивные идеи.
Дизайн-система
Мы начали с создания дизайн-системы. Прорабатывается всё до мелочей: типографика, отступы, цвета, элементы интерфейса, иконки, миллион разных кнопок, бэйджи и прочее. Это обязательный шаг, без которого в дальнейшем есть риск попросту утонуть в работе. Например, не до конца продуманные элементы интерфейса могут стать причиной того, что на каком-то этапе придется всё переделывать.
Работа с дизайном на уровне структуры приложения строилась вокруг главной страницы. В этом состояла особенность: главная страница очень сложная, на ней располагаются все основные разделы. При этом она не должна смотреться перегруженной. Потребовалось сделать много дизайн-концептов, чтобы добиться такой сбалансированности.
Работа с дизайном на уровне структуры приложения строилась вокруг главной страницы. В этом состояла особенность: главная страница очень сложная, на ней располагаются все основные разделы. При этом она не должна смотреться перегруженной. Потребовалось сделать много дизайн-концептов, чтобы добиться такой сбалансированности.
Зачем такая сложность?
Всё ради удобства пользователя и простоты взаимодействия: все действия доступны за один-два свайпа, что значительно увеличивает вовлеченность.
Насколько легко этого добиться?
Мы анализировали отзывы пользователей. Мы изучали приложения конкурентов, причем не только прямых, но и косвенных. Смотрели примеры не только хоккейных клубов, но и футбольных, не только российских, но и зарубежных. Произвели детальный разбор примерно 200 приложений, включая спортивные, приложения по игровым ставкам, сайты-агрегаторы.
Работая над созданием дизайн-концепций главной страницы и основных разделов, мы проводили коридорные исследования (то, что в Голливуде называют «тестовая аудитория»).
Работая над созданием дизайн-концепций главной страницы и основных разделов, мы проводили коридорные исследования (то, что в Голливуде называют «тестовая аудитория»).
Создаешь интерактивный прототип и показываешь его любому неспециалисту (кого сумеешь поймать в коридоре); даешь ему пощелкать (или сам щелкаешь) и спрашиваешь: «Понятно как работает это?», «Как работает то?», «Да?», «Нет?» — это необходимо, чтобы убедиться, что задумка ясна обычному человеку, ему понятно, что происходит, как это работает, а нам становятся известны его ожидания.
Елизавета Брагина
Ведущий дизайнер NOTISSIMUS
Структура и особенности приложения
Ключевая особенность структуры приложения в том, что главная страница похожа на ленту социальной сети — пользователь может листать её и видеть основное: от результатов игры до голосований по матчам. Чем больше скроллинга — тем меньше вкладок и незамеченной информации.
При этом для каждого раздела, включающего несколько элементов (например, «Новости»), предусмотрен горизонтальный скроллинг. Так удалось вместить в экран смартфона целый мир хоккея — и при этом не потерять комфорт простой навигации.
В приложении много разных нюансов, разделов — у каждого из них свои требования и ограничения. Чтобы сделать редизайн главной страницы, надо глубоко продумать редизайн всего приложения. Необходимо было проработать все разделы.
Все особенности новой версии невозможно кратко перечислить:
- обновленный главный экран, на котором удобно размещается самые востребованные разделы;
- матч-центр, где можно смотреть прямые эфиры, короткометражки с лучшими моментами, новости и информацию об игроках;
- таймлайн, с которым не будет скучно;
- появились сториз — да-да, прямо в приложении! — так гораздо удобнее следить за новинками магазина и интересными моментами из жизни команды;
- PUSH-уведомления;
- подробнейшая статистика;
- голосования, фэнтези-хоккей, многое другое.
На главной странице расположены разделы: «Фото», «Видео», «Интернет-магазин», «Статистика», «Голосование за лучшего игрока матча», таблицы чемпионатов «Запад», «Восток», «Плей-офф», карточки матчей (будущих, прошедших, таймлайны).
Матч-центр содержит всю информацию по матчам: состав, пятерки, таймлайн в виде карточек, где отражены такие события, как гол (в большинстве, в меньшинстве), удаление (причины, время), объявления и так далее.
Помимо видеотрансляций предусмотрен текстовый таймлайн, таймлайн в виде карточек — можно поминутно увидеть как проходил матч, какие были события: голы, удаления, буллиты, игра в неравных составах, лучшие моменты…
Отдельное внимание уделено статистике. Можно работать с таблицей регулярного чемпионата, изучать статистику всех прошлых чемпионатов — мы сделали удобный календарь, детально продумали скроллинг.
Плей-офф — пожалуй, самая важная часть хоккейной жизни. Мы сделали схематичное отображение того, кто с кем играет — динамически формируемая инфографика значительно повышает удобство восприятия.
Цель - улучшить интерактив
Повышение интерактива — это выигрыш для всех сторон: хорошо и пользователю, и заказчику.
Для повышения интерактива мы воплотили ещё одну выдумку, которая должна сделать болельщиков частью представления на площадке — световое шоу из смартфонов.
Для повышения интерактива мы воплотили ещё одну выдумку, которая должна сделать болельщиков частью представления на площадке — световое шоу из смартфонов.
Сейчас СКА световым шоу почему-то не пользуется. Но мы сделали, чтобы экраны у тысяч людей моргали в такт. Такой синхронизации нелегко было добиться, учитывая, что у всех смартфоны разных производителей, на разных технологических платформах.
Александр Маркович
Руководитель проекта
Ещё один способ сделать жизнь болельщика увлекательнее — это фэнтези-хоккей.
Пользователь выбирает игроков в команде, которые по его мнению проявят себя в ближайшей игре: забьют гол, сделают результативную передачу и тому подобное. Можно делать прогноз на счет в матче, на его завершение (основное время, овертайм, буллиты).
Если предсказания пользователя оправдываются — он зарабатывает баллы, которые можно потратить на покупку билета на домашний матч (Ледовый дворец СКА), купить на них атрибутику и так далее.
Для участников фэнтези-хоккея сделан отдельный рейтинг — они могут соревноваться между собой. Чтобы преуспеть в этом соревновании, пользователям надо хорошо разбираться в хоккее, внимательно следить за игроками и их физической формой.
Поэтому мы добавили раздел с подробной статистикой (по командам, отдельным игрокам) за последние игры: биографии, личная статистика, награды, ссылки на статьи в спортивных медиа. Можно смотреть как мини-карточки, так и укрупненные подробные карточки — всё для достижения успеха в фэнтези-хоккее.
Поэтому мы добавили раздел с подробной статистикой (по командам, отдельным игрокам) за последние игры: биографии, личная статистика, награды, ссылки на статьи в спортивных медиа. Можно смотреть как мини-карточки, так и укрупненные подробные карточки — всё для достижения успеха в фэнтези-хоккее.
В российских профессиональных спортивных клубах плохо работают с монетизацией трафика — это проблема нашего рынка. А мы над этим усердно работаем, применяем стратегию и тактику, присущую в этом направлении ритейлу. Это необходимо для увеличения конверсии и, как следствие, выручки от продаж абонементов, билетов и атрибутики.
Егор Ногтев
Руководитель службы интернет-маркетинга, ХК СКА
Медиа-составляющая и рекламная интеграция
Сделан специальный раздел, где можно найти все фото, видео, трансляции. Для удобства поиска сделан фильтр, а у каждого медиа имеется своя метка: «Интервью», «Матч», «Событие», «Болельщики». Это очень помогает и в сортировке.
У СКА есть специальная команда, нарезающая в прямом эфире видеофрагменты, которые быстро загружаются на сервер, откуда благодаря сложной логике на бэкенде попадают в нужные места в приложении — и всё это работает в режиме реального времени.
Спорт существует во многом за счет рекламы. И чтобы сделать спортивное приложение более рентабельным, привлекаются спонсоры и рекламодатели.
Спорт существует во многом за счет рекламы. И чтобы сделать спортивное приложение более рентабельным, привлекаются спонсоры и рекламодатели.
Каким бы особенным приложение не казалось, его создание — обычная рутинная работа: делаются промежуточные сборки, тестирования и прочее. При этом заказчик всегда знает на каком этапе находится разработка.
Результат проделанной работы
