Hi-Tech

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

Создание нового интерфейса для приложения на Smart TV — Партнеры на vc.ru

Свежее

Вакансии

Написать

Уведомлений пока нет

Пишите хорошие статьи, комментируйте,
и здесь станет не так пусто

Войти

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

В закладки

Поделиться

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

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

Первые шаги

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

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

Новая плоскость

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

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

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

Новые возможности

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

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

Новый путь

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

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

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

Черника

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

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

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

Новое начало

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

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

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

Push-уведомления

["\u041a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043e\u0442 email
\u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u0435\u043c\u043e\u0432","\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u043a\u0430\u043b\u0438\u0444\u043e\u0440\u043d\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430
\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u044c\u044e","\u041d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u043d\u0430\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0438\u0445\u0438
\u0433\u043e\u043b\u043e\u0441\u043e\u043c \u041f\u0430\u0441\u0442\u0435\u0440\u043d\u0430\u043a\u0430 \u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u043e\u043a\u043d\u043e \u043d\u0430 \u043e\u0441\u0435\u043d\u044c","\u0413\u043e\u043b\u043e\u0441\u043e\u0432\u043e\u0439 \u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a \u0432\u044b\u043a\u0443\u043f\u0438\u043b
\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044e-\u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u044f","\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435-\u043f\u043b\u0430\u0446\u0435\u0431\u043e \u0441\u043a\u0430\u0447\u0430\u043b\u0438
\u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430 \u0440\u0430\u0437","\u0425\u0430\u043a\u0435\u0440\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u043e\u0431\u043e\u0439\u0442\u0438 \u0434\u0432\u0443\u0445\u0444\u0430\u043a\u0442\u043e\u0440\u043d\u0443\u044e
\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u0433\u043e\u0432\u043e\u0440\u043e\u0432"]

Компания отказалась от email
в пользу общения при помощи мемов

Подписаться на push-уведомления

Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть