ПРОЕКТИРОВАНИЕ МОБИЛЬНОГО ПРИЛОЖЕНИЯ — MOVIE STATION

В рамках курса UX DESIGN FUNDAMENTAL я разработала мобильное приложение по покупке билетов в кинотеатр. В своей статье буду описывать пошаговый процесс проектирования приложения.

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

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

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

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

  1. Пользователи должны иметь возможность выбирать фильм по жанру, времени сеанса, расположению кинотеатра, выбирать место в зале
  2. Пользователи должны иметь возможность оплачивать билет в один клик
  3. Пользователи должны получить полную информацию о фильме

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

В процессе исследования был проведен онлайн опрос с помощью Google Forms, живое интервью с людьми, обзор и анализ приложений конкурентов (Multiplex, Планета Кино, Fander).

Участниками исследования были друзья, коллеги по работе и одногруппники. С помощью онлайн-опроса удалось собрать данные 37 человек в возрастном диапазоне от 18 до 35 лет.

Вопросы онлайн-опроса:

  1. С какой целью Вы ходили в кино последний раз?
  2. Как Вы выбирали фильм для просмотра и как покупали билеты?
  3. Какие возникли проблемы при выборе фильма и покупке билетов?

Ссылка на опросник: https://forms.gle/yKWo3snDWQ7fb77r8

Вопросы для интервью:

1. Какая цель похода в кинотеатр?

2. Как Вы выбираете фильм для просмотра и как покупали билеты?

3. Какие трудности возникали при покупке билетов и выбора фильма

Интервьюер 1:

Инна, 25 лет

Проджект менеджер

В последний раз ходила в кинотеатр до начала пандемии. Цель была развлечься.

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

У нее есть 2 способа выбора фильмов:

- смотрит в онлайн приложении что есть в прокате и выбирает из предложенных фильмов

- идет на конкретный фильм (к примеру, фильмы вселенной Marvel, она всегда в курсе когда будет следующий выпуск)

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

К тому же сам кинотеатр находится рядом с домом, пешком идти 20 минут.

При покупке билетов трудности не возникали.

Пожелание:

В приложении не видно какой будет тип кресел. К примеру, в кинотеатре 4 зала, в 3 из них кресла на последний рядах, где можно ноги поднять кверху, а в 1 нет. При выборе мест это не отображается.

Интервьюер 2:

Диана, 21 год

Студент

В данное время она меньше стала ходит в кинотеатр из-за пандемии, где то 2 раза во время пандемии. А так она ходила где то 2–3 раза в месяц.

Цель посещения:

- проводить время с близкими людьми, друзьями

- просмотр фильма с красивыми спецэффектами

Часто пользуется приложением Multiplex для выбора фильмов и покупке билетов.

Обычно следит за планирующимися фильмами, смотрит трейлеры и описание сюжета.

В основном проблем не было с выбором фильмов или покупкой билетов.

Очень нравится что у Multiplex можно купить попкорн, напитки через приложение, потом прийти в кинотеатр и забрать его без очереди по штрих-коду.

Также кинотеатр находится в пешей доступности и цена билетов 50 гривен на любые сеансы.

Интервьюер 3:

Ксюша, 24 года

Програмист

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

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

При выборе фильма проблем не возникало. При покупке билетов пару раз выбивало с оплаты, приходилось повторно вводить данные карточки. Хотелось бы, чтобы был быстрый способ оплаты, например Apple Pay.

Не нравится, что нет общего расписания на все фильмы с временем. Приходиться открывать каждый фильм и смотреть. Удобнее было бы, если можно видеть расписание на весь день.

Итоги

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

- нет расписания всех фильмов на одном экране

- нет фильтров по рейтингу, жанру

- не отображается тип кресел при выборе мест

- неудобный способ оплаты (нет Apple Pay)

Профиль пользователя. Пользовательские требования

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

Генерация идей. Формирование требований к будущему продукту

На основании цели и потребности ЦА, были сгенерированы идеи для каждой пользовательской проблемы.

Пользовательские сценарии и сториборды, юзерфлоу

Сценарий 1:

Вечер пятницы. Вероника с подругой Катей решают как провести время после работы. Обе не настроены отдыхать активно. Подруга предлагает пойти в кино. Веронике очень понравилась идея.

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

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

Пользователь оплачивает билеты через Apple Pay и потом добавляет их в Wallet для быстрого и удобного доступа.

Придя в кинотеатр, Вероника открывает Wallet на телефоне и показывает билеты сотруднику кинотеатра. Сотрудник считывает код сканером и пропускает их в зал.

Девушки находят свои места, располагаются и начинают смотреть фильм.

Фильм очень понравился, после просмотра Вероника получает уведомление оценки фильма и ставит 5 из 5.

Сценарий 2:

Инна большая поклонница фильмов вселенной Marvel и она узнала, что скоро выходит новый фильм фильм “Черная вдова”. Она ни в коем случае не хочет пропустить премьеру, т.к. во время премьеры большая очередь и билеты очень быстро раскупают.

Чтобы не пропустить продажи билетов и успеть купить билет, Инна заходит в приложение в раздел “Дополнительно”, нажимает “Напомнить о начале продаж”.

В первый день продаж Инне на телефон приходит push-уведомление. Она открывает приложение и видит, что “Черная вдова” уже в прокате. Выбирает фильм, дату, время и место в зале. Также она берет себе попкорн и напиток, чтобы не стоять в день премьеры в очереди. Оплатила все через Apple Pay.

В день премьеры фильма, Инна первым делом пошла к кассе, где выдают по билету попкорн и напитки. Когда подходила к стойке, она достала мобильный, открыла приложение, зашла в раздел “Билеты” и предъявила кассиру билет.

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

Фильм ей понравился, после просмотра она получает уведомление оценки фильма и ставит 5 из 5.

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

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

- Сервис должен быть спроектирован для мобильных платформ Android и iOS.

- Приложение должно быть на трех языках — украинский, русский и английский.

- Авторизация в приложении через Google account и по номеру телефона.

- Система фильтрации по жанру, рейтингу, статусу (в прокате или скоро в прокате), формату (2D и 3D) и кинотеатрам.

- Возможность отображения расписания всех сеансов.

- Возможность добавить и убрать фильмов из списка желания.

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

- Оплачивать билеты можно с помощью кредитной карты или Apple Pay/Google Pay.

- Перед оплатой билета предложение о покупке попкорна и напитков за деньги или за бонусы и с возможностью скипнуть.

- Легкий возврат билетов с компенсацией полной их стоимости.

- Уведомления приложения (с возможностью их отключать):

  • перечислении бонуса
  • о перечислении подарка на ДР
  • об оценке фильма после просмотра
  • о ближайшим сеансе (напоминание)

Сценарии использования, структура, функционал и наполнение. Стратегия развития продукта

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

После того как появилась примерная картина числа экранов приложения и их содержимого можно перейти к прототипированию. Использовала Figma для создания Wireframes и для самого кликабельного прототипа.

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

Карта дает возможность увидеть общую картину и все связи экранов, выявить недостающие экраны, и помогает понять логику работы.

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

Результаты учеников

Проекты учеников, которые проходили обучение под менторским руководством А. Волошина

Результаты учеников

Учебные проекты учеников, которые проходили обучение по UX&Product Design под менторским руководством А. Волошина. Инфо об обучении на сайте ux-clan.org

Результаты учеников

Учебные проекты учеников, которые проходили обучение по UX&Product Design под менторским руководством А. Волошина. Инфо об обучении на сайте ux-clan.org