Здравствуйте! На связи Максим Кульгин, компания Notissimus. К нам обратился Хоккейный Клуб СКА, которому мы когда-то сделали мобильное приложение. Прошли годы, визуальная часть приложения устарела. Но какой смысл в изменениях, если не увеличить вовлеченность пользователей и прибыльность компании? Рассказываем, как выглядит настоящий редизайн :)

Начало истории

У заказчика возник простой вопрос: можем ли мы сделать редизайн приложения и предложить различные варианты?

Телеграм-канал

Ещё веду Телеграм-канал «Русский ИТ бизнес», в котором делюсь идеями, успехами, провалами, а также дарю платные материалы. Все посты активно обсуждаются. Нас уже почти 15 000 (предприниматели и айтишники, в основном) . Присоединяйтесь!

Начало истории может показаться довольно спокойным — ничто не предвещало, что вот-вот будет задействован весь креативный разум нашей команды.

У нас уже было мобильное приложение. Но ради болельщиков мы решили полностью переписать его «с нуля» — сделать более современным, с гораздо большим набором возможностей.
Егор Ногтев, руководитель службы интернет-маркетинга, ХК СКА

Со стороны заказчика чувствовалось некоторое сомнение. Как потом выяснилось, представители СКА рассматривали варианты проработки дизайна не только с нами.

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

Поскольку визуальная составляющая приложения была чрезвычайно важна, СКА хотел заказать разработку у известной дизайн-студии. Но…

Мы предложили: «Давайте сделаем дизайн-концепцию — у вас будет больше вариантов для выбора». Представители разработчика согласились. Когда я закончила создание дизайн-концепции, они сказали: «Да, мы будем заказывать у вас! Не только разработку, но и дизайн!»
Елизавета Брагина, ведущий дизайнер, Notissimus

Елизавета взялась за эту работу, выполнила её достойно, предложила заказчику несколько вариантов. Один из них понравился больше всего. Потом, на его основе, уже пошла плотная работа.
Александр Маркович, руководитель проекта, Notissimus

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

Зачастую заказчики отталкиваются прежде всего от визуальной составляющей и на других вопросах сильно внимание не акцентируют, дополнительных целей не ставят, никаких исследований по улучшению своего приложения не проводят. Переделывать API им тоже не очень-то и хочется. (А кому захочется?)

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

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

Вызов принят

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

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

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

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

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

Зачем такая сложность?

Всё ради удобства пользователя и простоты взаимодействия: все действия доступны за один-два свайпа, что значительно увеличивает вовлеченность.

Насколько легко этого добиться?

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

Работая над созданием дизайн-концепций главной страницы и основных разделов, мы проводили коридорные исследования (то, что в Голливуде называют «тестовая аудитория») .

Создаешь интерактивный прототип и показываешь его любому неспециалисту (кого сумеешь поймать в коридоре) ; даешь ему пощелкать (или сам щелкаешь) и спрашиваешь: «Понятно как работает это?», «Как работает то?», «Да?», «Нет?» — это необходимо, чтобы убедиться, что задумка ясна обычному человеку, ему понятно, что происходит, как это работает, а нам становятся известны его ожидания.
Елизавета Брагина, ведущий дизайнер, Notissimus

Итак. Функциональный анализ, конкурентный анализ, анализ отзывов, коридорные исследования и глубинные интервью с пользователями, «job to be done» (как пользователи действуют при отсутствии приложения) — только для разработки дизайна была проведена очень большая исследовательская работа.

Какая бы дизайн-студия это делала⁈

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

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

Структура и особенности приложения

Все особенности новой версии невозможно кратко перечислить:

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

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

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

При этом для каждого раздела, включающего несколько элементов (например, «Новости») , предусмотрен горизонтальный скроллинг. Так удалось вместить в экран смартфона целый мир хоккея — и при этом не потерять комфорт простой навигации.

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

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

На главной странице расположены разделы: «Фото», «Видео», «Интернет-магазин», «Статистика», «Голосование за лучшего игрока матча», таблицы чемпионатов «Запад», «Восток», «Плей-офф», карточки матчей (будущих, прошедших, таймлайны) .

Матч-центр содержит всю информацию по матчам: состав, пятерки, таймлайн в виде карточек, где отражены такие события, как гол (в большинстве, в меньшинстве) , удаление (причины, время) , объявления и так далее.

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

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

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

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

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

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

Для повышения интерактива мы воплотили ещё одну выдумку, которая должна сделать болельщиков частью представления на площадке — световое шоу из смартфонов.

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

Так должно быть в идеале.

Сейчас СКА световым шоу почему-то не пользуется. Но мы сделали, чтобы экраны у тысяч людей моргали в такт. Такой синхронизации нелегко было добиться, учитывая, что у всех смартфоны разных производителей, на разных технологических платформах.
Александр Маркович, руководитель проекта, Notissimus

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

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

Ещё один способ сделать жизнь болельщика увлекательнее — это фэнтези-хоккей.

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

Если предсказания пользователя оправдываются — он зарабатывает баллы, которые можно потратить на покупку билета на домашний матч (Ледовый дворец СКА) , купить на них атрибутику и так далее.

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

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

Хоккейное приложение должно быть таким же живым, как и сама игра на льду. Поэтому мы уделили медиа-составляющей особое внимание.

Сделан специальный раздел, где можно найти все фото, видео, трансляции. Для удобства поиска сделан фильтр, а у каждого медиа имеется своя метка: «Интервью», «Матч», «Событие», «Болельщики». Это очень помогает и в сортировке.

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

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

Здесь также было много согласований с заказчиком. Мы придумывали, отправляли в СКА и получали развитие идеи: «Здесь надо сделать не так, а по-другому», — обычный рабочий процесс, одним словом.

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

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

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

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

Будни разработчиков

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

Работа получилась очень тяжелая. Мы ее планировали сдать к концу прошлого года, но только в марте смогли всё завершить. Одна только разработка главного экрана — с его модификациями, огромным количеством нюансов — равносильна разработке целого нового приложения.
И с точки зрения дизайна, и с точки зрения разработки — это был сложный и тяжелый проект. Были как интеграционные трудности, так и трудности по реализации: как именно должен работать свайп, как передавать отображение коэффициентов Лиги ставок и так далее.
Александр Маркович, руководитель проекта, Notissimus

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

Решения возникают при погружении в продукт: чем больше погружаешься в продукт — тем больше инсайтов возникает.
Елизавета Брагина, ведущий дизайнер, Notissimus

Чтобы сделать простое и понятное для пользователя приложение, порой приходится проделать колоссальную предварительную работу. За красивым дизайном зачастую стоит объемная работа по исследованиям. Всё требует времени и ресурсов.

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

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

Многое переделывали в процессе работы. Не всё удается учесть (например, те же методы API) . Во время прямого эфира так много информации присылается через серверы, и она вся должна преобразовываться в визуал! Приходилось умерять фантазию и подстраиваться под технические возможности.
Елизавета Брагина, ведущий дизайнер, Notissimus

Каждое приложение уникально, а это приложение особенно. Несмотря на наличие предыдущей версии вся разработка велась практически «с нуля». Четыре месяца ушло на проработку дизайна и полгода непосредственно на разработку: в сентябре приступили, в марте приложение уже было готово.
Александр Маркович, руководитель проекта, Notissimus

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

Встреча с пользователями

Всегда радует, когда приложение нравится пользователям. На Google Play набралось более 2500 отзывов, а оценка близка к максимальной и колеблется от 4.8 до наивысшей 5.0 для смартфонов (в зависимости от модели и региона, из которого происходит соединение с Google Play) .

Хорошее приложение для фаната хк: вся информация по матчам/составу/интервью и др. Даже есть стикеры для WhatsApp. Большой функционал, удобно. Всё, что нужно, сразу здесь.
Один из отзывов на Google Play

Негативные отзывы в основном вызваны ограничениями, с которыми сталкиваются находящиеся за пределами Санкт-Петербурга и области. Но это не зависящие от нас обстоятельства.

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

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

Выводы

Редизайн — это не только «другая красота».

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

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

Телеграм-канал

Ещё веду Телеграм-канал «Русский ИТ бизнес», в котором делюсь идеями, успехами, провалами, а также дарю платные материалы. Все посты активно обсуждаются. Нас уже почти 15 000 (предприниматели и айтишники, в основном) . Присоединяйтесь!

Мобильные приложения бывают разные. Есть те, которые направлены на увеличение прибыли. Встречаются те, которые решают имиджевые задачи. А также существуют созданные именно для удобства пользователей.

Это приложение — для любителей хоккея, для поклонников СКА и создано в интересах болельщиков.

Кейс: креативный редизайн мобильного приложения ХК «СКА» на 5 звезд от пользователей