EasyCinema — сайт для покупки билетов в кино (учебный проект)
Продукт: EasyCinema — веб- и мобильное приложение для покупки билетов в кинотеатр в Грузии. Цель EasyCinema — дать зрителям простой способ найти фильм и забронировать билеты. Продукт рассчитан на тех, кто не хочет тратить время в очереди, и особенно на тех, кто ищет сеансы в определённых форматах.
Проблема
Занятым студентам и работающим взрослым не хватает времени, чтобы стоять в очереди в кассу кинотеатра.
Некоторым из них сложно объясниться на кассе, потому что они не знают местного языка. При этом у местных приложений и сайтов слабый перевод.
Цель
Спроектировать простую и дружелюбную кроссплатформенную систему продажи билетов для кинотеатра, которая помогает находить доступные фильмы и бронировать билеты.
Моя роль
UX‑дизайнер, отвечающая за решение для веб- и мобильного приложения кинотеатра
Обязанности
Пользовательские исследования, интервью, бумажные и цифровые вайрфреймы, прототипирование низкой и высокой детализации, юзабилити-тестирование, учёт доступности и итерации дизайна.
Пользовательские исследования: итоги
Я провела интервью и составила карты эмпатии, чтобы лучше понять пользователей будущего веб- и мобильного приложения.
Основная группа пользователей подтвердила гипотезу: это взрослые, которые хотят сэкономить время и купить билет заранее, не стоя в очереди.
Исследование показало, что помимо нехватки времени пользователи сталкиваются и с другими проблемами при бронировании билетов. На пользовательский опыт влияют ограниченный выбор языков перевода, нехватка информации, языковой барьер и т. д.
Пользовательские исследования: болевые точки
Персона: Амир
Формулировка проблемы:
Амир — работающий экспат, которому нужно приложение, чтобы найти в ближайшем кинотеатре фильм на английском с открытыми субтитрами и забронировать билет: ему трудно понимать местный язык и слишком быструю английскую речь, а тратить время в очереди он не хочет
CJM
CJM отражает точку зрения одной из персон: работающего экспата, который хочет посмотреть премьеру фильма, но сталкивается с языковым барьером и проблемами со слухом.
Карта сайта
Сложная навигация по сайту была одной из главных болевых точек пользователей, поэтому я опиралась на это знание при создании карты сайта.
Моей задачей было принять продуманные решения по информационной архитектуре, которые улучшат навигацию по сайту в целом. Выбранная структура должна была сделать всё простым и понятным.
Бумажные вайрфреймы
Несколько итераций каждого экрана на бумаге помогли убедиться, что элементы, попавшие в цифровые вайрфреймы, действительно решают проблемы пользователей. На главном экране я сделала приоритетом быстрое и простое оформление заказа, чтобы пользователи экономили время.
Цифровые вайрфреймы для разных размеров экрана
На протяжении начального этапа дизайна я строила экраны на основе обратной связи и выводов пользовательского исследования.
Ключевой потребностью пользователей, которую нужно было закрыть в дизайне, стала удобная фильтрация фильмов, а также поддержка вспомогательных технологий.
Прототип низкой детализации
На основе готового набора цифровых вайрфреймов я собрала прототип низкой детализации. Основной user flow, который я связала, — поиск фильма на английском с субтитрами на завтрашнюю дату и бронирование билета. Ссылка на прототип
Юзабилити-тестирование: выводы
- Тип исследования
- Немодерируемое юзабилити-тестирование
- Место
- Грузия, удалённо
- Участники
- 5 участников
- Длительность
- 20 минут
Я провела два раунда юзабилити-тестирования. Выводы первого помогли перейти от вайрфреймов к макетам. Во втором раунде использовался прототип высокой детализации, и он показал, какие аспекты макетов требуют доработки.
-
Выводы первого раунда
-
Пользователям нужен шаг подтверждения
-
Пользователи не замечали неприметный фильтр
-
Пользователи хотят видеть цены
-
-
Выводы второго раунда
-
Отображение списком понравилось больше, чем плиткой
-
Пользователи хотели видеть 2D как формат
-
Пользователям нужен гостевой режим
-
Макеты
В ранних версиях дизайна можно было увидеть время сеансов, но после юзабилити-тестирования я добавила возможность видеть цену билета. Также я переработала кнопку фильтра, чтобы сделать её заметнее
Юзабилити-тестирование показало, что пользователи хотят видеть больше сводной информации. Чтобы снять их раздражение от процесса оформления заказа, я добавила экран «Подтверждение заказа». Кроме того, на экран выбора мест добавилось напоминание для подтверждения сделанного ранее выбора.
Чтобы сделать оформление заказа ещё проще, я добавила возможность продолжить в гостевом режиме
Исследование показало, что пользователи хотят искать фильмы определённых жанров или форматов и выбирать ближайшие кинотеатры, поэтому я предусмотрела быстрый способ это сделать
Макеты: разные размеры экрана
Макеты: исходный размер экрана
Прототип высокой детализации
Финальный прототип высокой детализации предлагает более чистые user flow для поиска фильма, бронирования билета и оформления заказа. Он также закрывает потребность пользователей в удобной фильтрации и отображении цен.
Ссылка на прототип приложения Веб‑прототип
Доступность
Обеспечила доступ для пользователей с нарушениями зрения: добавила к изображениям альтернативный текст для скринридеров.
Использовала иконки, чтобы упростить навигацию. Применила контрастные шрифты.
Отказалась от неактивных (disabled) элементов в пользу системной обратной связи
Выводы
Результат:
Приложение даёт пользователям ощущение, что EasyCinema действительно заботится об их потребностях.
Цитата из отзывов коллег:
« Мне нужен этот продукт. Как экспату, мне сложно найти подходящие для меня фильмы»
Чему я научилась:
Работая над приложением EasyCinema, я поняла, что первые идеи — это только начало процесса. Юзабилити-тестирование и отзывы коллег влияли на каждую итерацию дизайна. Инсайты от пользователей превратили работу в настоящее совместное творчество.
Следующие шаги
Провести ещё один раунд юзабилити-тестирования, чтобы проверить, действительно ли решены болевые точки пользователей.
Провести дополнительные пользовательские исследования, чтобы выявить новые потребности.
Оценить дополнительную функциональность, которая отвечает потребностям пользователей, и создать киллер-фичи для приложения.