Как наблюдения в кофейне
привели к UX-редизайну сценария
привели к UX-редизайну сценария
UX-исследование и перепроектирование сценария оформления бонусного напитка
UX Research
•
Product Thinking
•
UI Design
Гольц Ольга
Product Designer
UX/UI • Research
UX/UI • Research
Field Research • Mobile App
Превью
Хороший бренд обещал подарок •
Плохой UX не давал его получить
Плохой UX не давал его получить
Ежедневно я наблюдала, как гости не могут оформить подарочный напиток из-за проблем интерфейса
Итог: разочарование посетителей, переадресация негатива на сотрудников и потеря клиентской базы
Отправная точка
Гостю доступен бонусный напиток
Не видит QR и прогресс акции
Теряется в оформлении
Страдает бизнес и бренд
Негатив переходит на кассира
Отказ от бонуса
Продукт
Мобильное приложение сети пекарен-кофеен для онлайн заказа и бонусных программ
Моя роль
Исследование • Анализ конкурентов • UX • UI • Прототип • Тестирование
Фокус
QR-код • Прогресс очереди подарочного напитка и сценарий его оформления
Ограничения
Сохранить существующий визуальный стиль и сделать решение реализуемым
Контекст
Исследования
3 месяца
Ежедневные наблюдения
Поток гостей
Повторяющийся сценарий
Одна проблема
~
30
гостей в день использовали приложение
~
15-17
из 30 испытывали сложности с поиском QR-кода и прогресса напитка
~
7-9
из 15-17 покидали сценарий оформления подарочного напитка
Проблема была не личной ошибкой пользователя, а устойчивым паттерном поведения
Сценарий необходимо пересмотреть
Проблема
QR скрыт в виде иконки в правом верхнем углу
Нет четкой визуализации прогресса напитка
Неочевидный вход в сценарий оформления напитка
Кастомизация напитка разбита и путает
Подтверждение заказа легко пропустить
Три точки потери пользователя
в одном сценарии
в одном сценарии
Ключевая UX-проблема
Пользователь не понимал, где находится внутри сценария:
- крестик мог означать и выход, и пропуск
- модальные окна не связывались в понятный путь
- подтверждения были недостаточно заметными
Анализ
Цель: найти устойчивые паттерны у конкурентов
Цех 85
Прямой конкурент
QR • Заказ напитка
Британские пекарни
Косвенный конкурент
QR • Заказ напитка
Коржов
Косвенный конкурент
QR • Бонусная система
Дринкит
Сильный UX ориентир
Кастомизация напитка
Логика анализа
Я анализировала конкретные элементы сценария
- где расположен QR
- как отображается прогресс акции
- как устроена кастомизация напитка
- насколько удобно этим пользоваться
Результат анализа
QR должен быть на виду и в доступе
А не спрятан в виде иконки
Прогресс бонуса нужно доносить визуально
Пользователь должен понимать, зачем ему QR-код
Кастомизацию напитка проектировать емко
Меньше переходов — меньше потерь и ошибок
04
Контроль
Все изменения напитка доступны рядом и легко проверяются
03
Скорость
Сценарий должен работать в условиях спешки
02
Прозрачность
Пользователь понимает прогресс акции и следующий шаг
01
Доступность
Ключевые действия должны быть заметны сразу после входа
Design Principles
Я отказалась от идеи
Первоначальная идея
Пошаговый сценарий с Progress-bar
- Выбор напитка
- Замена молока
- Добавление сиропа
- Выбор температуры
Итоговое решение
Один экран с настройками напитка
- Все опции рядом
- Быстрая проверка и корректировка
- Ниже риск ошибиться и возвращаться из корзины
Причина
Гости часто оформляют напиток утром или в обеденный перерыв, когда спешат
Последовательные шаги увеличивали бы время и вероятность отказа
Последовательные шаги увеличивали бы время и вероятность отказа
User Flow
Главный экран Меню
Переход через плашку с QR
Выбор напитка из списка
Настройка состава напитка
Добавление в корзину
Переход в Корзину
Проверка состава заказа
Проверка личных данных
Подтверждение заказа
Pop-up уведомление успеха
Решения
- QR и бонусный прогресс на Home Screen
- Кастомизация напитка на одном экране
QR-код перестал быть технической иконкой и стал точкой входа в бонусный сценарий
Пользователь видит, проверяет и меняет параметры без лишних переходов
Что изменилось
- QR вынесен на главный экран в понятной плашке
- Рядом отображается прогресс бонусного напитка
- При доступном подарке состояние меняется на явный CTA
- Пользователь понимает не только где QR, но и зачем он нужен
Закрывает две боли одновременно: поиск QR-кода и поиск входа в оформление бонусного напитка
Почему это работает
- Меньше последовательных шагов
- Видны выбранные параметры
- Ошибки исправляются до корзины
- Температура стала отдельной опцией, а не потерянным комментарием
Инсайт из теста:
один пользователь пытался указать температуру в комментарии в завершении сценария
Отдельная опция в кастомизации напитка оказалась понятнее, и потенциально это можно связать с рабочим кабинетом сотрудников
один пользователь пытался указать температуру в комментарии в завершении сценария
Отдельная опция в кастомизации напитка оказалась понятнее, и потенциально это можно связать с рабочим кабинетом сотрудников
- Понятные подтверждения действий
Пользователь должен видеть, что система приняла его действие
Стало
Уведомление выше, крупнее и дольше остаётся на экране
Было
Короткое зеленое уведомление внизу экрана часто опускалось гостями
Они не понимали,
почему их выбросило в начало
почему их выбросило в начало
Почему важно
Подтверждение снижает тревожность: пользователь понимает, что напиток добавлен, заказ оформлен, а действие не потерялось
Финальное UI-решение
Интерфейс сохраняет стиль бренда, но делает сценарий заметнее и управляемее
Акценты UI
- Сохранение фирменного оранжевого
- Зелёный для статусов успеха
- Крупный CTA
- Ясные состояния карточек
- Меньше визуального шума
Pop-up оформления заказа
Корзина
Кастомизация напитка
Кастомизация напитка
Карточка напитка
Выбор напитка
Вход в бонус
QR-код
Home Screen
Юзабилити-тестирование
Проверка гипотез на 7 постоянных гостях точки
Методика
- 7 постоянных гостей
- Задание: найти доступность бонуса и оформить напиток
- Проверялись: время ориентации, вход в сценарий, кастомизация напитка и подтверждение заказа
- Формат: качественное тестирование прототипа
Сценарий задачи
1
Открыть приложение
2
Понять, доступен ли бонус
3
Перейти к оформлению
4
Собрать напиток
5
Добавить в корзину
6
Проверить и подтвердить заказ
6
Убедиться, что заказ оформлен
Результаты тестирования
В ходе проверки критических препятствий в сценарии не обнаружено
5/7
обратили внимание на pop-up успеха
7/7
заметили pop-up подтверждения действия
6/7
собрали напиток с нужными изменениями
7/7
поняли, как перейти к оформлению
6/7
быстро нашли QR и поняли прогресс
7/7
успешно оформили бонусный напиток
Инсайт для следующей итерации
Финальное подтверждение заказа нужно усилить:
часть пользователей ориентировалась не на pop-up успеха, а на сам факт смены экрана после нажатия CTA
часть пользователей ориентировалась не на pop-up успеха, а на сам факт смены экрана после нажатия CTA
Заключение
Кейс демонстрирует полный продуктовый цикл
Ценность работы
- Обнаружила системную проблему через реальные наблюдения
- Связала UX-боль с клиентским опытом и работой сотрудников
- Сформировала и проверила гипотезы
- Собрала прототип и UI Kit в рамках фирменного стиля
Следующие шаги
- Усилить финальный экран / подтверждение заказа
- Проверить редактирование напитка из корзины
- Провести A/B-тест на реальной аудитории
- Адаптировать данные для интерфейса сотрудников
