Мувикс — это мультимедийный сервис Дом.ru, включающий интерактивное телевидение, каталоги фильмов и сериалов, подписки и тематические подборки.
Проект стартовал весной 2015 года, с постановкой: разработать интерфейс нового поколения и конкурентно-способный продукт. Рабочее название Дом.ru TV 3.0 — это уже третья версия хорошо знакомого абонентам сервиса. На тот момент им пользовались 200 000 человек.
Разработка началась с интерфейса телевизионной приставки, главного тогда продукта в экосистеме Дом.ru. Параллельно была запущена разработка приложения для умных телевизоров, с целью привлечения новых пользователей, и перспективой выхода на рынок интернет-видеоуслуг без привязки к провайдеру.
Над задачей сосредоточились две команды. Наша, из JetStyle и ребята из Дом.ru. Первым делом мы провели большое исследование: изучили рынок, выявили тренды, придумали концепции и протестировали их на прототипах. Стало понятно какими функциями должен обладать новый интерфейс и какие задачи мы должны решить.
Первая, и самая главная — увеличить продажи «Видео по запросу» — фильмов, сериалов и подписок. Вторая задача. Разработать Систему рекомендаций и Холодный старт. Третья. Разработать конструктор тематических подборок. Четвертая. Разработать мультиплатформенную экосистему.
Через два года, в 2017, когда интерфейс приставки был почти готов, началась разработка мобильной версии сервиса, о которой и пойдет речь сейчас.
Проект стартовал весной 2015 года, с постановкой: разработать интерфейс нового поколения и конкурентно-способный продукт. Рабочее название Дом.ru TV 3.0 — это уже третья версия хорошо знакомого абонентам сервиса. На тот момент им пользовались 200 000 человек.
Разработка началась с интерфейса телевизионной приставки, главного тогда продукта в экосистеме Дом.ru. Параллельно была запущена разработка приложения для умных телевизоров, с целью привлечения новых пользователей, и перспективой выхода на рынок интернет-видеоуслуг без привязки к провайдеру.
Над задачей сосредоточились две команды. Наша, из JetStyle и ребята из Дом.ru. Первым делом мы провели большое исследование: изучили рынок, выявили тренды, придумали концепции и протестировали их на прототипах. Стало понятно какими функциями должен обладать новый интерфейс и какие задачи мы должны решить.
Первая, и самая главная — увеличить продажи «Видео по запросу» — фильмов, сериалов и подписок. Вторая задача. Разработать Систему рекомендаций и Холодный старт. Третья. Разработать конструктор тематических подборок. Четвертая. Разработать мультиплатформенную экосистему.
Через два года, в 2017, когда интерфейс приставки был почти готов, началась разработка мобильной версии сервиса, о которой и пойдет речь сейчас.
Задача
Разработать новую версию мобильного приложения Дом.ru TV (в последствии Movix) под iOS и Andriod платформы. В рамках заданных экосистемой ограничений, но с учетом особенностей и возможностей мобильных платформ.
Дизайн-система
По мере роста проекта и команды разработки, мы приняли решение «переехать» в Фигму и спроектировать атомарную дизайн-систему, включающую различные элементы и стили. Работает она так:
ios ui-kit
Элементы и стили пользовательского интерфейса.
Это набор компонентов, из которых дизайнер собирает шаблоны приложения для разных устройств и платформ.
Шаблоны
Шаблон собирается в два шага:
1. Сначала дизайнер выбирает нужное устройство (Айпад, Айфон 8, Айфон Х…) и экран (главная, карточка, профиль…)
2. Затем наполнение — это могут быть витрина, каталог (плитка), список… Дизайнер берет готовые блоки из библиотеки или создает новые, если таких еще нет.
В результате такого незамысловатого алгоритма получаем конструктор шаблонов для любого девайса и разрешения экрана.
Макеты
Теперь наполняем шаблоны актуальным контентом. Для этого используем плагин Google Sheets Sync
Трюк вот в чем. Все данные хранятся в Гугл-таблице, а плагин позволяет синхронизировать с ней проект.
И вот результат. Название, мета, рейтинги, описание, стоимость, персоны, фоны и постеры — все подгружается из базы данных.
С помощью Google Sheets Sync дизайнер управляет не только изображениями и текстом. Он может отключать и включать компоненты макета и менять размеры фреймов. Данное решение позволяет централизовано и быстро управлять наполнением на всем проекте.
Интерфейс
Теперь посмотрим на основные экраны и функциональности интерфейса мобильного приложения Мувикса
Ланчскрин
Стартовый экран сервиса, развлекает пользователя картинками пока
приложение загружается. Система берет картинки из библиотеки, поэтому
заставки всегда разные.
приложение загружается. Система берет картинки из библиотеки, поэтому
заставки всегда разные.
Видео по запросу
Это любой видео контент, который можно приобрести и смотреть сразу: фильмы, сериалы и подписки. Перед нами стояла задача придумать механизмы его продвижения и продажи.
Вторая версия сервиса делилась на два изолированных раздела: телевидение и библиотека с видео-контентом — видеотека. Пользователи смотрели телек, а в раздел с видео никто не заходил.
В новой версии мы придумали несколько решений проблемы. Вот некоторые из них:
Вторая версия сервиса делилась на два изолированных раздела: телевидение и библиотека с видео-контентом — видеотека. Пользователи смотрели телек, а в раздел с видео никто не заходил.
В новой версии мы придумали несколько решений проблемы. Вот некоторые из них:
Обвязка
Обвязка это контент, подбранный к выбранной передаче. Подборки генерируются автоматически с помощью мета-данных. Рассмотрим на примерах:
Сериал
Если это 10 серия, 3 сезона случайно включенного сериала, система поможет найти расписание всех остальных серий, доступных в эфирной сетке. Подберет похожие передачи. И самое главное, предложит похожие сериалы из видеотеки.
Если это 10 серия, 3 сезона случайно включенного сериала, система поможет найти расписание всех остальных серий, доступных в эфирной сетке. Подберет похожие передачи. И самое главное, предложит похожие сериалы из видеотеки.
Спорт
Если это футбольный матч, крупица масштабного события — Чемпионата Мира, — которое длится несколько недель, система составит расписание всех игр доступных в телепрограмме на неделю вперед и в записи на пять дней в прошлое.
А на фоне подогретого к теме интереса, станут востребованы фильмы про футбол разных жанров: байопики, драмы, зарубежные и отечественные.
Если это футбольный матч, крупица масштабного события — Чемпионата Мира, — которое длится несколько недель, система составит расписание всех игр доступных в телепрограмме на неделю вперед и в записи на пять дней в прошлое.
А на фоне подогретого к теме интереса, станут востребованы фильмы про футбол разных жанров: байопики, драмы, зарубежные и отечественные.
Другие передачи
Вариантов может быть бесконечно много. Даже совсем экзотические. Например, трансляция очередной церемонии премии Оскар в прямом эфире. Система сделает подборку всех номинантов этого года, и еще одну, с записями церемоний прошлых лет.
Вариантов может быть бесконечно много. Даже совсем экзотические. Например, трансляция очередной церемонии премии Оскар в прямом эфире. Система сделает подборку всех номинантов этого года, и еще одну, с записями церемоний прошлых лет.
«Не ждите эфира»
Второй способ: опция «Не ждите эфира». Когда передача стоит в эфирной сетке, но до ее начала еще долго и если она есть в библиотеке — ее можно купить. О чем сигнализирует банер на карточке передачи. Это могут быть сериалы...
...или каталог фильмов целой франшизы.
Теле-гид
Классическая ленточная программа телепередач, неизменная со времен первой версии сервиса. Мы предложили новые решения, например, газетную ориентацию, но тестирование показало что лента привычнее и удобнее абонентам Дом.ru.
Слева скрывается шторка с описанием каналов. А по лонгтапу на передачу открывается экшн-шит с подробностями о ней
Однако пользователям доступен и альтернативный вид: список состоящий из витрин, каждая из которых это канал с телепередачей.
Телеархив
Дополнительная услуга, которая позволяет смотреть эфир в записи. Архив хранится в течении 5 дней
Телеархив позволяет управлять эфиром. Текущую передачу можно отмотать назад или начать сначала
Телеархив позволяет управлять эфиром. Текущую передачу можно отмотать назад или начать сначала
Тематические подборки
Это каталоги фильмов и сериалов, объединенных общими тегами. Подборки могут быть приурочены к определенному инфоповоду или календарному событию: празднику, громкой премьере или кинофестивалю. Подборки собирает контент-менеджер вручную или автоматически генерирует система рекомендаций.
У контент-менеджера больше стилистических возможностей. Он придумывает уникальное оформление, управляя фонами, цветами и шрифтами. Вот несколько примеров.
Фильмы одной франшизы, например, вселенной Марвел. Подборка может быть приурочена к выходу новой серии.
Ежегодная подборка фильмов номинированных на премию Оскар. А после церемонии выходит такая же, но уже с лауреатами.
Подборка военных фильмов к 9 мая.
Система рекомендаций генерирует подборки из системных стилей и с помощью имеющейся в базе мета-информации. Это может быть подборка к 8 Марта про сильных и независимых, главных героинь.
А может быть персональная подборка. Система изучает предпочтения пользователя и знает что ему предложить. Например, жанровую подборку в которую попадут лучшие драмы, которые пользователь еще не смотрел.
Система рекомендаций
Стартовый экран приложения это пользовательский дашборд. Система ранжирует контент исходя из предпочтений пользователя.
ТВ-витрины тоже формируются системой рекомендаций. Если пользователь любит спорт, система предложит грядущие или уже начавшиеся спортивные трансляции. А если пользователь что-то пропустил, это попадает на витрину Телеархива.
С помощью меты система автоматически генерирует целые витрины. Жанровые, франшизийные, к определенному инфоповоду или любые другие.
Драмы
Марвел
Холодный старт
Система анализирует любую пользовтельскую активность. Лайки, просмотры, клики. Но при первом запуске такой информации еще нет. На помощь приходит Холодный старт: система предлагает пользователю игру, в которой нужно оценивать фильмы и сериалы. Эта информация позволит сформировать первую контент-выдачу.
Пользователь свайпает вправо карточки, которые ему нравятся, влево — которые не нравятся, вверх — которые не смотрел.
Из этих данных система рекомендаций формирует первую подборку. Если пользователь оценил Чудо-женщину в подборку могут попасть другие экранизации комиксов или фильмы, в которых женщина главная героиня.
После фильма
Когда фильм закончился, пользователю предлагается его оценить. В зависимости от оценки он получит новые рекомендации.
Если пользователю фильм понравился — рекомендации похожие. Если нет — наоборот, максимально противоположные.
Напоминания
Чтобы не пропустить эфир своей любимой передачи, пользователь может поставить напоминание.
Напоминание устанавливается на карточке передачи…
…или в контекстном меню ассета, которое появляется по лонгтапу.
Когда время придет, пользователь получит уведомление о начале передачи. Оно может сопровождаться видео- и аудио-сопровождением. Кликнув на уведомление пользователь перейдет к просмотру.
А если он сейчас занят — может кликнуть на иконку справа, чтобы свернуть эфир в ПиП. Теперь он сможет смотреть или слушать трансляцию параллельно.
А если он сейчас занят — может кликнуть на иконку справа, чтобы свернуть эфир в ПиП. Теперь он сможет смотреть или слушать трансляцию параллельно.
Если в момент события приложение не запущено, пользователь получит ПУШ-уведомление.
Через пять минут придет повторное сообщение на случай если пользователь пропустил первое.
Через пять минут придет повторное сообщение на случай если пользователь пропустил первое.
Если пользователь все-таки пропустил эфир, трансляция будет доступна в записи. Пользователь будет уведомлен об этом, а запись будет ждать его на витрине Телеархива.
Экосистемность
В экосистему Мувикса входит множество подсистем. Кроме иОС сервис портирован на Андройд. Есть версия для браузера, разнообразных телевизионных приставок, включая Эпл-ТВ. И умные телевизоры.
Сервис доступен абонентам Дом.ru и интернет-пользователям. Все устройства пользователя синхронизируются с его учетной записью. Он может начать просмотр на мобильном устройстве по дороге домой, а продолжить дома на телевизоре.
Сервис доступен абонентам Дом.ru и интернет-пользователям. Все устройства пользователя синхронизируются с его учетной записью. Он может начать просмотр на мобильном устройстве по дороге домой, а продолжить дома на телевизоре.
Но пользователь может привязать ограниченное количество устройств. В профиле предусмотрен экран для управления ими.
Плеер
Плеер работает с вертикальной и горизонтальной ориентациями устройства. В вертикальной ориентации меньше экран, но зато больше обвязки. Для телевидения был спроектирован свой плеер с парочкой особенностей.
Плеер для просмотра фильмов и сериалов. В альбомной ориентации.
В плеере можно посмотреть рекомендации: похожие фильмы, приквелы или сиквелы…
А если фильм часть большой франшизы, система покажет ее целиком и в хронологическом порядке.
Этот же плеер, но уже в портретной ориентации. В ней экран комбинирует оба состояния. Плеер становится меньше, но зато пользователь сможет увидеть структурированный, разбитый по смыслу на витрины, рекомендованный контент.
Плеер при скорлле не скрывается поэтому пользователь сможет смотреть рекомендации и трансляцию параллельно.
Плеер при скорлле не скрывается поэтому пользователь сможет смотреть рекомендации и трансляцию параллельно.
ТВ-плеер имеет ряд отличий.
Пользователь может листать передачи на канале, кнопками влево и вправо на экране.
Пользователь может листать передачи на канале, кнопками влево и вправо на экране.
Вместо похожего контента — телепрограмма.
В портретной ориентации кроме телепрограммы будут витрины с рекомендациями. А клик по логотипу канала вызывает список со всеми каналами.
Картинка в картинке
Или ПиП (Picture-in-picture, PiP). Опция сворачивает плеер в миниатюру. Это удобно, можно смотреть или слушать трансляцию параллельно выбирая фильм на вечер. Или полистать каталоги с новыми фильмами во время рекламы.
Секондскрин
Опция позволяет расшарить видео-поток на телевизор, а управлять им с мобильного устройства. Плеер можно свернуть в ПиП и продолжить «гулять» по приложению.
