Создание нового интерфейса для приложения на Smart TV

Арт-директор онлайн-кинотеатра Okko Сергей Мекрюков — о редизайне приложения, наследственности и A/B-тестах.

Материал подготовлен при поддержке Okko

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

Мы запустили приложение в 2011 году, тогда оно называлось Yota Play. Первое приложение для Smart TV под руководством директора по продукту Игоря Соколова помогало разрабатывать британское агенство AllofUs: циановые кнопки, SD-формат и все фильмы по 99 рублей. Основные ценности для пользователя: никакой рекламы, звёздочек (всё должно считываться с пяти метров) и контент на первом месте. Ведь красивые постеры лучше скучного текста.

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

В 2014 году мы перестали быть частью Yota, убрали приставку и стали называться Play. Интерфейс обзавелся различными функциями: HD, Full HD, предзаказы, оригинальный звук с субтитрами, Dolby 5.1, один вариант подписки — PlayFamily.

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

В этот момент мы начали думать о смене названия, и один из инженеров предложил новое — Okko.

В 2016 году мы начали экспериментировать с новыми продуктами и попробовали по-другому представить подписки. Создали несколько вариантов и дали пользователю возможность купить их пакетом по выгодной цене. Фактически это отдельный продукт внутри продукта, для которого мы использовали новый «скелет» вёрстки: вертикальные постеры с одним персонажем, темные цвета и круглые кнопки.

Новый раздел гармонично вписался в интерфейс продукта на Smart TV и положительно повлиял на бизнес, но появилась проблема. Мы не были готовы полгода писать клиент с новым интерфейсом. Так мы начали постепенно обновлять все разделы приложения, параллельно занимаясь UX и новыми задачами.

Каждый месяц мы выпускаем новый релиз приложения на Smart TV. Регулярно улучшаем юзабилити платформы и «причесываем» текущий UI. Благодаря этому растут бизнес-метрики, но любое, даже самое мелкое изменение мы тестируем с помощью сплитов. Это позволяет оперировать числами в момент принятия решений. Так мы увидели, например, что не все нововведения прижились, UI хуже масштабируется, а платформы сильно отличаются друг от друга.

Smart TV оставался последней платформой, где мы всё ещё использовали циан и элементы старого брендинга. Но быстро и качественно поменять основную для бизнеса платформу невозможно. В декабре 2017 года мы начали разрабатывать принципиально новый цифровой язык, чтобы связать все платформы и маркетинговые коммуникации.

Основной задачей было не сломать то, что уже работало и к чему привыкли клиенты. Они любят наше приложение, оно интуитивно понятно и воспринимается легко. Да, задача «просто перекрасить» весь интерфейс в фиолетовый цвет и заменить фон со шрифтами, покажется кому-то очень странной, но для нас это стало шансом сделать рефакторинг кода и компонентов в дизайне. Плюсом было и то, что нам наконец удалось решить простые задачи, к которым раньше мы не могли подступиться.

Над модернизацией мы работали с британским агентством W12, в копилке которых есть кейсы с крупнейшими мировыми диджитал-компаниями: Deutsche Welle, CNN, Vevo, Shazam. Со стороны Okko в работе участвовали директор по продукту Игорь Соколов, бренд-менеджер Регина Гололобова и отдел дизайна. Спустя 4-5 недель итераций W12 предложили около десяти экранов в новом брендинге, после чего мы начали адаптацию под сервис и создание из них новых компонентов.

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

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

Сейчас в Okko работает A/B-тестирование нового визуального языка в приложении для замера основных бизнес-метрик. Если с ними будут проблемы, мы сможем оперативно выпустить апдейт и провести ещё один сплит. Но уже сейчас очевидно, что динамика положительная. За счет редизайна мы сможем реализовать десятки идей, улучшающих пользовательский опыт, потратив на это меньше внутренних ресурсов.

Дома, после работы, мы сами используем собственный продукт. И мы рады, что спустя столько лет видим в новой оболочке любимый сервис и ценности, которые закладывали в него. Это большая работа, за которую хочется сказать спасибо всей команде Okko.

#партнерский