Промо
2 853

Создание нового интерфейса для приложения на 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.

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

{ "author_name": "Fedor Karnakov", "author_type": "editor", "tags": ["\u043f\u0430\u0440\u0442\u043d\u0435\u0440\u0441\u043a\u0438\u0439","advertising"], "comments": 10, "likes": 0, "favorites": 3, "is_advertisement": true, "subsite_label": "promo", "id": 46663, "is_wide": true, "is_ugc": false, "date": "Fri, 28 Sep 2018 13:51:46 +0300" }
{ "id": 46663, "author_id": 160974, "diff_limit": 1000, "urls": {"diff":"\/comments\/46663\/get","add":"\/comments\/46663\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/46663"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199134, "possessions": [] }

10 комментариев 10 комм.

Популярные

По порядку

Написать комментарий...
0

А 4k по подпискам у вас планируется?

Ответить
0

Есть отдельная подписка с 4K контентом.

Ответить
0

Всё нравится, но пока через браузерную версию нельзя смотреть фильмы и сериалы в оригинале (дома нет тв, а знаю что на нём функция реализована) то выбор падает всё-таки на нетфликс.

Ответить
0

Окко продолжает попытки списать абонентку с удалённой из профиля карты.

Ответить
0

Зачем сейчас нужен смарт ТВ? Кто им пользуется?

Ответить
0

А что уже изобрели что-то удобнее и я пользуюсь устаревшей технологией?

Ответить
0

Дак а чё там делать то в этом смарт ТВ?

Ответить
0

Ну, запустить приложение ОККО, например, и смотреть кино.

Ответить
0

37% населения России на 2018 год.

Ответить
0

А как вы проводите A/B тесты? Какие инструменты используете? Какие основные метрики оцениваете и улучшаете?

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }