Как проектировалось приложение Cinemato

Богдан Головатый, UI/UX дизайнер в Upwork, написал на Medium прекрасный пост о том, как он проектировал интерфейс приложения для покупки билетов в кино. С его разрешения мы приводим статью на нашем сайте.

Вы любите ходить в кинотеатр? Уверен, что каждый из нас любит смотреть зрелищные фильмы на большом экране и приятно проводить время с друзьями или семьей.

Но, увы, в нашем городе нельзя посмотреть афишу всех фильмов и купить билет в любой кинотеатр на одном сайте. На одном ресурсе есть афиша, но билеты продаются не во все кинотеатры. Билет можно купить только на сайте кинотеатра, или что хуже нужно идти в сам кинотеатр, стоять в очереди и в итоге занять не самые лучшие места.

Этап 1: Дизайн продукта

В рамках курса DIGITAL PRODUCT DESIGN я выбрал задание разработать продукт для заказа билетов в кинотеатр, с помощью которого можно быстро узнать расписание сеансов и купить билет без очереди в любой из кинотеатров Украины. Остановился на платформе Android, как наиболее доступной и распространенной.

Цели и требования бизнеса

Бизнес-цели: Он-лайн продажа электронных билетов в кинотеатр

Бизнес-требования:

1. Пользователи должны иметь возможность выбирать фильм по жанру, времени сеанса, расположению кинотеатра, выбирать место в зале.
2. Предоставлять информацию о ближайшем кинотеатре (расписание сеансов, контакты).
3. Пользователи должны иметь возможность оплачивать билет.
4. Предоставлять полную информацию о фильме.
5. Уведомлять пользователей о будущих показах.
6. Использовать приложение как рекламную площадку для кинотеатров

Бизнес-стратегия:

1. Войти в топ 10 Google PlayMarket среди приложений для покупки билетов в кинотеатр.
2. Собрать 400 кинотеатров-партнеров и получать от них прибыль.

Исследования предметной области и целевой аудитории

В основную целевую аудиторию вошли люди от 18 до 35 лет, которые посещают кинотеатр 1–3 раза в месяц. Активные пользователи мобильных телефонов и Интернета, в основном офисные сотрудники.

В процессе исследования я использовал следующие инструменты и источники для получения информации:

• Полевые исследования внутри и возле кинотеатра;
• Интервью с посетителями кинотеатра;
• Интервью с экспертами в предметной области (кассирами);
• Онлайн-опрос созданный с помощью Google Forms и опубликованный в социальных сетях Вконтакте и Facebook;
• Обзор приложений-конкурентов и отзывов о них в App Store и Google PlayMarket: «Планета Кино», Vkino, Multiplex, «Яндекс.Киноафиша», Rambler Афиша, RamblerКасса, Kinohod, «Киномакс»/

1. Полевые исследования

Чтобы ближе узнать свою аудиторию, ощутить все проблемы пользователей, изучить технологии электронных билетов я побывал в 3-х кинотеатрах разных городов + в кинотеатре своего города.

Теперь знакомимся с видами электронных билетов. Изучаем как люди их уже используют.

Электронный билет можно распечатывать:

Электронный билет в виде QR-кода можно показывать на экране смартфона:

Для того, чтобы пройти в кинотеатр без бумажного билета, пользователю нужно купить его в интернете как обычно и сохранить на телефон QR-код:

2. Интервью с посетителями кинотеатра

• В какое время и дни недели Вы посещаете кинотеатр?
• Опишите как Вы покупаете билеты в кино?
• С кем Вы обычно ходите в кино?
• Что побудило вас покупать билеты онлайн?
• Какая основная причина Вашего похода в кинотеатр? Почему?
• Какие трудности возникают при покупке билетов в кинотеатр?
• Пользовались ли Вы сервисами он-лайн бронирования билетов. Что понравилось и что не понравилось в них?
• Как Вы выбираете фильм для просмотра? На что обращаете внимание?
• С какого устройства Вы чаще всего ищите информацию о фильмах, бронируете билеты? Какая у Вас модель смартфона?
• Опишите идеальный инструмент для он-лайн заказа билетов в кино? Что там должно быть?

3. Интервью с экспертами в предметной области

• Кто приходит в кинотеатр? Опишите портрет вашего зрителя?
• Где посетители покупают билеты на сеансы в вашем кинотеатре?
• Какие трудности возникают у людей при покупке билетов в кинотеатр?
• Расскажите про условия бронирования/покупки в вашем кинотеатре?
• С помощью каких инструментов можно забронировать/купить он-лайн билет на сеанс в ваш кинотеатр?

4. Онлайн опрос с помощью Google Form

Чтобы провести онлайн опрос я воспользовался Google Forms и социальной сетью ВКонтакте и Facebook. Разместил пост с просьбой заполнить опрос у себя в профиль и распространил его в группах своего города, сообществах кинотеатров и антикафе. В опросе участвовали ребята из России, Украины, Беларуси. В течение 2-х дней я собрал ответы от 103 человек.

Ссылка на опросник: http://goo.gl/forms/Dzdrk2hJ4Y

Результаты ответов: https://docs.google.com/spreadsheets/d/1p_WN0BInMG_9xse4wqEcwXWugDbCzOO8PnJCRWocMVs/edit#gid=68802409

5. Обзор и анализ приложений-конкурентов

На сегодняшний день уже существуют приложения для покупки билетов в кинотеатр: Планета Кино, Vkino, Multiplex, Афиша, Яндекс.Киноафиша, Rambler.Касса, Kinohod, Киномакс.

Устанавливаем приложения на смартфоны iPhone 5s и Nexus 5, чтобы изучить как они выглядят и работают в операционных системах iOS и Android, находим их недостатки, которые следует избегать, и достоинства (идеи), которые можно позаимствовать. Походу дела изучаем отзывы пользователей на Google PlayMarket и собираем хотелки.

Ссылка на подробный анализ конкурентов: https://docs.google.com/document/d/1Y8ZWkY34A3vaUVs7AWjHpU5_xLvgXRi5_bNYUZiQxjY/edit

Выводы после этапа исследований:

После проведения индивидуальных интервью и онлайн опроса мне удалось составить список проблем, которые возникают у людей при покупке билетов в кинотеатр. У тех кто покупает билеты в кассе большинство трудностей весьма стандартны:

Покупка в кассе:

• Очередь в кассу;
• Тяжело выбрать подходящее место на схеме;
• Заняты лучшие (желаемые) места в зале;
• Невозможность бронировать билеты ранее, чем в день сеанса;
• Люди быстро разбирают билеты на премьерный сеанс;
• Не принимают кредитные карты к оплате;
• Не всегда удается собрать компанию в кинотеатр.

Покупка онлайн (сайт или приложение):

• Не любят распечатывают электронные билеты, т.к. боятся, что их не примут на кассе, не считает сканер. А у некоторых вообще нет возможности это сделать, т.к. нет принтера;
• Опасаются мошенничества, боятся вводить номер карты, сомневаются в конфиденциальности оставленных персональных данных, безопасности проведения платежа;
• Опасаются, что устройство, которое считывает электронный билет будет неисправно;
• Опасаются, что если случится программный сбой и система не засчитает оплату, билет может быть потерян;
• Боятся переплатить за электронный билет;
• Настораживает то, что могут не принять электронный билет и сообщить, что он поддельный;
• Данные банковской карты не сохраняются;
• Только 1 способ оплаты. Нет подходящих платежных систем или оплаты через СМС;
• Не сразу видно цену на сеанс;
• Не обновляется список свободных мест, с которых снята бронь за полчаса/час до сеанса;
• Нет полной информации о фильме, включая трейлер, рейтинг и отзывы;
• Невозможно оставить свой отзыв о просмотренном фильме;
• Проблемы с геолокацией, приложение не определяет местоположение человека, нельзя задать вручную свое местоположение;
• Отсутствует добавление в избранное любимых кинотеатров;
• Нет привязки к аккаунту, чтобы видеть все свои билеты;
• Нет фильтра по рейтингу, жанру, длительности, цене, времени;
• Если приложение работает от интернета, может теряться связь, а в этот момент нужно показать штрих-код и появляется очередь на входе;
• Люди ошибочно заказывают билеты в кинотеатр, который находится в другом городе

Персонажи и их потребности

В результате проведенных исследований информацию о будущих пользователях можно оформить в виде персонажей. Я выделил 2 типа персонажей и определил их проблемы, цели и потребности.

Генерация идей и список требований к продукту

После фокусировки на всех проблемах и потребностях можно приступить к поиску решений:

Пользовательские сценарии

Со сценариев начинается проектирование будущего продукта. Для этого нужно описать ситуации в которых продукт будет использоваться разными людьми.

Сценарий 1. Планы на вечер

Сегодня пятница и Наталья с своим парнем думают как провести вечер.

Они решают пойти на кинотеатр на фильм «Алису в Зазеркалье». Наталья хочет занять лучшие места в зале, но заранее купить билет не получается, т.к. они с парнем заняты почти весь день. Наталья решает заказать билет он-лайн и устанавливает на телефон приложение CINEMATO, которое давно советовали друзья.

Приложение при первом запуске запрашивает город, Наталья выбирает Киев. Наталья находит в подборке с фильмами на сегодня «Алису в Зазеркалье» и выбирает фильм. Дальше она видит список кинотеатров в котором идет фильм и расписание сеансов. Наталья вводит в поле поиска название кинотеатра, система находит его. Наталья выбирает время сеанса. CINEMATO показывает схему кинотеатра и Наталья выбирает 2 лучших места в зале. Далее Наталья проверяет итоговую информацию, вводит e-mail и оплачивает билеты мобильным платежем. Наталья распечатывает билет, который система выслала ей на e-mail после оплаты.

Придя с парнем в кинотеатр, Наталья предъявляет билет сотруднику. Он считывает код на билете сканером и пропускает ребят в зал. Все получилось и пара смотрит классный фильм. Через час после просмотра CINEMATO присылает push-уведомление Наталье, чтобы она поставила оценку и оставила отзыв о фильме. Наталья авторизуется в CINEMATO, ставит фильму оценку, пишет отзыв и делится им с друзьями в социальных сетях.

Сценарий 2. Премьера фильма

Андрей большой поклонник фильмов Marvel и он узнал их новостей, что скоро выходит фильм «Люди X. Апокалипсис». Андрей не хочет пропустить премьеру, т.к. во время премьеры большая очередь и билеты быстро раскупают.
Андрей открывает CINEMATO и видит в будущих анонсах «Люди X. Апокалипсис». Что не пропустить премьеру, он нажимает «Напомнить» и выбирает пункт «за 2 дня до начала».

Через пару недель Андрею на телефон приходит push-уведомление, что 20 мая начинается прокат фильма. Он открывает CINEMATO и видит, что нужный фильм уже в прокате. Выбирает фильм, дату показа и места. Оплачивает билет банковской картой, которую сохранил внутри приложения раньше.

Придя в кинотеатр, Андрей открывает CINEMATO на телефоне и показывает QR-код билета сотруднику кинотеатра. Сотрудник считывает код сканером и пропускает Андрея в зал.

Через час после просмотра CINEMATO присылает push-уведомление Андрею, чтобы он поставил оценку и оставил отзыв о фильме. Андрей авторизуется в CINEMATO, ставит фильму оценку, пишет отзыв.

Сценарий 3. Семейный досуг в другом городе

Андрей с женой и ребенком путешествуют по Украине. Сегодня они в Киеве и решают пойти в кинотеатр IMAX, т.к. их сын хочет посмотреть мультфильм «Добрый динозавр» в 3D.

Андрей открывает CINEMATO и выбирает на карте ближайший к его отелю кинотеатр IMAX. Выбирает из списка сеансов кинотеатра мультфильм «Добрый динозавр» и время сеанса. Выбирает 3 места и оплачивает билет с помощью банковской карты.

За 1 час до сеанса, Андрей получает напоминание о времени сеанса.

По приходу в кинотеатр, Андрей открывает CINEMATO и находит в истории покупок свой билет. Возле входа в зал, Андрей сканирует код билета через терминал Smartpass. Система одобряет запрос и выводит информацию о ряде и местах. Андрей и семья заходят в зал и смотрят фильм.

Через 1 час после просмотра CINEMATO присылает push-уведомление Андрею, чтобы он поставил оценку и оставил отзыв о фильме. Андрей выбирает «Позже», а на постере с фильмом появляется кнопка «Оставить отзыв».

Этап 2: Дизайн взаимодействия

Технические требования

• CINEMATO должно корректно отображаться и протестировано на устройствах: Android device (mdpi, hdpi, xhdpi, xxhdpi).
• Дизайн CINEMATO должен соответствовать требованиям Google Material Design Guidelines.
• В CINEMATO должен быть предусмотрен офф-лайн режим, чтобы можно было посмотреть информацию в билете и предъявить его на устройстве, перед в ходом в зал (QR-код). Цифровой код купленного билета должен приходить по SMS.
• CINEMATO работает со всеми сетями кинотеатров Украины и по всем крупным городам Украины.
• Обеспечить корректную работу гео-таргетинга.
• Оплачивать билеты можно с помощью кредитной карты или мобильного счета.
• Легкий возврат билетов с компенсацией полной их стоимости.
• Поддерживать актуальное состояние занятости мест в зале.
• Заказать можно не более 5 билетов за 1 покупку.
• После авторизации приложение должно сохранять данные человека о купленых билетах, избранном, кредитной карте.
• Электронный билет содержит QR-код, который считывает контролер для пропуска в зал. QR-код можно просканировать самостоятельно через терминал Smartpass у входа в зал.

Информационная архитектура и функционал продукта

Скетчи

Пришло время включить воображение и начать генерировать идеи будущего интерфейса.

Прототипирование интерфейса

После того как у нас появилась примерная картина числа экранов приложения и их содержимого можно перейти к прототипированию. Мои инструменты: Sketch для отрисовки wireframes и InvisionApp для сборки их в прототип.

Во время отрисовки я использовал библиотеку и гайдлайны Material Design (соблюдая все отступы и правила типографики), чтобы наиболее точно повторить будущие UI-элементы и ускорить процесс визуального дизайна на дальнейших этапах.

После отрисовки всех экранов я загрузил их в InvisionApp и сделал кликабельный прототип, чтобы протестировать все сценарии на реальных пользователях.

Ссылка на интерактивный прототип в InvisionApp: https://projects.invisionapp.com/share/VY7FETS4J

Карта навигации

Нужно проработать все состояния, включая возможные ошибки, и собрать их в карту навигации.

Этап 3: Дизайн графического интерфейса