Как сделать онлайн-кинотеатр быстро: кейс «Киноход»

1200x630 (1)

У всех бывают проекты, которые нужно сделать вчера. Рассказываем, как приложению «Киноход» понадобилась фича к Новому году.

Задача:

У заказчика есть готовое приложение, которое мы ведем на поддержке. Приложение продает билеты во все кинотеатры города (работает в Москве, Санкт-Петербурге, Екатеринбурге, Казани, Новосибирске и др.) и у него с более 500 тыс. скачиваний в Google Play. Нужно было внедрить в Android-версию онлайн-просмотр фильмов по подписке. Сделать нужно было быстро, перед Новым годом.

«Киноход» решил выйти на рынок стриминговых сервисов. Была договоренность с платформой Megogo — все данные брали с их серверов. Подписки также на условиях Megogo. Это выгодно обеим сторонам — у «Кинохода” есть возможность держать у себя аудиторию за счет нового функционала, у Megogo — больше подписок.

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

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

Приоритезация:

Можно было сделать большой фильтр, вставить новые категории, сделать систему рейтингов. Но задача была поставлена как «быстро».  Что сделали:

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

На последнем и сконцентрировались.

Дизайн

У приложения уже был собственный стиль. Нам предстояло адаптировать его под стриминговый сервис. Дело в том, что нужно было дать много контента в одном модуле. Один модуль подразумевал под собой  категорию, в которой несколько фильмов. Уложить их горизонтально — потерять пользователя. Слишком длинный скролл для десятка фильмов в одной категории. Поэтому рассматривали варианты с вертикальным расположением постеров: Снимок экрана 2019-06-13 в 15.51.40

В итоге нашли решили на главном экране показывать только топовые фильмы из подборок, а при нажатии «смотреть все» показывать все те же фирменные горизонтальные плашки оптимального размера.

1.4

После клика на фильм появляется карточка фильма, со всей необходимой информацией.

Разработка

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

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

Мы просмотрели основные разделы Megogo и «Кинохода». Сделали предположение о структуре данных, с которой нам предстоит работать и приступили. Сначала разработали верстку (разметили страницу по блокам и информации, настроили переходы между страницами). Сделали все так, чтобы можно было доработать. В местах, где были совсем не уверены, поставили заглушки, чтобы можно было тестировать функционал без сбоев. Например, сначала делали карточку фильма — его описание, а в список фильмов было перейти нельзя  — его ещё не было.

Плеер

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

Выводы

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