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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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