SicPama Diner QR Ordering
SicPama разрабатывает сервисы, помогающие ресторанам Кореи и Юго-Восточной Азии повышать эффективность. Групповая QR-система заказов это один из сервисов SicPama, которая нуждалась в улучшении опыта перехода от корзины к оплате. Главная цель редизайна заключалась в снижении когнитивной нагрузки и повышения удобства использования.
Моя роль:
Компания:
Сроки:
Ключевые результаты:
25%
снижение времени до перехода к оплате
40%
снижение взаимодействий (interaction cost)
Более понятная навигация группового заказа и сниженная когнитивная нагрузка
Контекст проблемы
Что было не так раньше?
Несмотря на относительно простой флоу оформления заказа, пользователи постоянно испытывали трудности на этапе перехода корзина → оплата (checkout).
В ходе юзабилити-тестировании и анализов session replay, я обнаружила повторяющиеся проблемы:
Пользователи пытались перейти к оплате, не выбрав как разделить чек
Прокручивали экран вверх и вниз, совершали слишком много нажатий, пытаясь понять, что не так
После неудачных действий, закрывали приложение или просили помощи
Исследование
Наблюдения
Юзабилити-тестирование
Анализ конкурентов
Синтез
Анализ поведения пользователей
User Journey Map
Гипотезы
Идеация
Дизайн-стратегия
User Flow
Wireframes
Дизайн
Итерации дизайна
Обновление дизайн-системы
Финальный UI
Заключение
Тестирование
Передача на разраотку
Рефлексия
Результаты исследования
Проблемы старого дизайна
Изначальный флоу был спроектирован для максимально быстрого оформления и оплаты заказов в ресторанах группой пользователей за одним столом.
Однако количественный анализ выявил серьезные проблемы:
~24
макс. количество касаний
13с
сред. время до перехода к оплате
4-5с
необходимая пауза
Анализ session replay показал четкие проблемные точки в пользовательском пути:
Синтез
Причины проблемы
Ложные affordance-элементы
Пользователи многократно нажимали на аватары (часто повторно или агрессивно), ожидая реакции.
Скрытое обязательное действие
Выбор способа оплаты был необходим, но:
Групповая оплата - новый опыт, пользователи не ожидают его на экране корзины
Блок выбора оплаты находился в самом низу экрана
Пользователи прокручивали экран вверх и вниз, испытывая замешательство и пытаясь понять, как продолжить.
С увеличением количества пользователей и позиций в заказе стоимость взаимодействий росла экспоненциально.
Две ключевые задачи на одном экране
Просмотр позиций, заказанных всей группой
Решение, кто платит и каким способом
«Время, необходимое для принятия решения, увеличивается с ростом количества задач и вариантов»
UX-закон: Закон Хика
Дополнительные наблюдения
Даже после выбора способа разделения счета некоторые пользователи покидали процесс оплаты.
Неочевидный выбор способа разделения счета на этапе корзины вызывал путаницу и отказы.
Сравнительное наблюдение:
50% меньше времени на флоу без выбора способа разделения счета
Это подтвердило, что именно структура корзины и checkout были основным источником проблемы.
На основе UX-исследований и анализа стало очевидно:
Ключевой инсайт:
Несоответствие между структурой корзины и ожиданиями пользователей было основной причиной путаницы, лишних нажатий и задержек
Идеация
Дизайн-стратегия
Моя стратегия была сосредоточена на разделении когнитивно разных задач на последовательные шаги, соответствующие ожиданиям пользователей. Флоу был перестроен так, чтобы на каждом экране присутствовала только одна основная когнитивная задача.
Идеация
Low-fidelity wireframes
Дизайн
Финальное дизайн решение
Функциональные вкладки пользователей
Аватары пользователей были преобразованы в функциональные вкладки. Пользователи могут нажимать на аватары, чтобы просматривать заказы отдельных участников группы.
Вкладки-аватары соответствуют ожиданиям пользователей
Четкое визуальное разделение заказов участников
Снижение стоимости взаимодействий: одно нажатие для просмотра заказов другого пользователя
Новый экран Checkout
Корзина теперь используется только для просмотра заказа
Checkout сфокусирован на принятии решения о способе разделения счета группового заказа.
Снижение когнитивной нагрузки в точках принятия решения
Меньше циклов свайпов и исследовательских нажатий
Пользователь понимает как переходить от корзины до способа оплаты
Сводка заказа на Checkout
В нижней части экрана Сheckout отображается сводка заказа для поддержки принятия решения о разделении счета и оплате.
Проще принять решение
Пользователь быстрее понимает ситуацию
Четкие детали оплаты
Выбранный способ оплаты явно показывает, кто платит и какую сумму.
Неинтерактивные элементы были визуально упрощены, а к раскрывающимся компонентам добавлены стрелки.
Повышение процента завершения (completion rate)
Снижение отказов на этапе checkout (drop-off)
Валидация
Пользовательская проверка
Я протестировала прототип с 7 пользователями. Все они прошли одинаковый 5-минутный тест, в ходе которого им нужно было перейти от заполненной корзины до оплаты.
Результаты тестирования:
25%
снижение среднего времени для выполнения задачи
40%
снижение максимальной стоимости взаимодействий (interaction cost)
2→1
основных решения на одном шаге и упрощенный опыт
Хотя обновленный флоу добавил один дополнительный шаг, он значительно снизил худший сценарий стоимости взаимодействий (interaction cost). Максимальное количество взаимодействия сократилось на 40%, что означает меньше путаницы и исследовательского поведения.
На данный момент проект находится на стадии QA тестирования. Далее было запланировано:
Метрики после запуска:
Процент завершенных заказов (completion rates)
Процент отказов (drop-off rates)
Заключение
Рефлексия
Разделив просмотра заказа и выбор разделения счета на разные шаги, обновленный флоу улучшил опыт пользователей, снизил когнитивную нагрузку и создал более предсказуемый и масштабируемый checkout-опыт для групповых заказов.
Что я поняла:
