EasyCinema — сайт для покупки билетов в кино (учебный проект)

---

Проблема

Цель

Моя роль

UX‑дизайнер, отвечающая за решение для веб- и мобильного приложения кинотеатра

Обязанности

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

---

Пользовательские исследования: итоги

Пользовательские исследования: болевые точки

Персона: Амир

Формулировка проблемы:

Амир — работающий экспат, которому нужно приложение, чтобы найти в ближайшем кинотеатре фильм на английском с открытыми субтитрами и забронировать билет: ему трудно понимать местный язык и слишком быструю английскую речь, а тратить время в очереди он не хочет

CJM

---

Карта сайта

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

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

Бумажные вайрфреймы

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

Цифровые вайрфреймы для разных размеров экрана

На протяжении начального этапа дизайна я строила экраны на основе обратной связи и выводов пользовательского исследования.

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

Прототип низкой детализации

На основе готового набора цифровых вайрфреймов я собрала прототип низкой детализации. Основной user flow, который я связала, — поиск фильма на английском с субтитрами на завтрашнюю дату и бронирование билета. Ссылка на прототип

Юзабилити-тестирование: выводы

Тип исследования

Немодерируемое юзабилити-тестирование

Место

Грузия, удалённо

Участники

5 участников

Длительность

20 минут

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

1. Выводы первого раунда

   1. Пользователям нужен шаг подтверждения

   2. Пользователи не замечали неприметный фильтр

   3. Пользователи хотят видеть цены

2. Выводы второго раунда

   1. Отображение списком понравилось больше, чем плиткой

   2. Пользователи хотели видеть 2D как формат

   3. Пользователям нужен гостевой режим

---

Макеты

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

Юзабилити-тестирование показало, что пользователи хотят видеть больше сводной информации. Чтобы снять их раздражение от процесса оформления заказа, я добавила экран «Подтверждение заказа». Кроме того, на экран выбора мест добавилось напоминание для подтверждения сделанного ранее выбора.

Чтобы сделать оформление заказа ещё проще, я добавила возможность продолжить в гостевом режиме

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

Макеты: разные размеры экрана

Макеты: исходный размер экрана

Прототип высокой детализации

Финальный прототип высокой детализации предлагает более чистые user flow для поиска фильма, бронирования билета и оформления заказа. Он также закрывает потребность пользователей в удобной фильтрации и отображении цен.

Ссылка на прототип приложения Веб‑прототип

Доступность

1. Обеспечила доступ для пользователей с нарушениями зрения: добавила к изображениям альтернативный текст для скринридеров.

2. Использовала иконки, чтобы упростить навигацию. Применила контрастные шрифты.

3. Отказалась от неактивных (disabled) элементов в пользу системной обратной связи

---

Выводы

Следующие шаги

1. Провести ещё один раунд юзабилити-тестирования, чтобы проверить, действительно ли решены болевые точки пользователей.

2. Провести дополнительные пользовательские исследования, чтобы выявить новые потребности.

3. Оценить дополнительную функциональность, которая отвечает потребностям пользователей, и создать киллер-фичи для приложения.