b2c

web & mobile

foodtech

Как мы обновили корзину и чекаут, увеличив конверсию на 1.4 п.п

Продукт

Сайт

Роль

Продуктовый
дизайнер

Команда

1 Тестировщик

1 Разработчик

1 Продакт-менеджер / Тим-лид

1 Дизайнер (я!)

Время

2 месяца

Вводные

«Фудзияма» — сервис по заказу и доставке еды с MAU 250K. Имеет более 50 ресторанов по всей России и свои внутренние сервисы

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

Редизайн позволит не только обновить визуальный стиль, но и оптимизировать процесс оформления, сделав его более удобным и быстрым, что повысит удовлетворённость пользователей и конкурентоспособность продукта

Цель

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

Критерии успеха

Цель максимум — увеличить конверсию в покупку. Повлиять на дополнительные метрики: средний чек и кросс-продажи

Цель минимум — обновить дизайн и сохранить текущие метрики, не уронив их

Миссия

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

Аудитория

Согласно аналитике — это женщины, количество которых в 2 раза больше мужчин. А возраст посетителей разный: от 18 лет и до 44 лет

Discovery

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

Анализ текущего решения

Сначала я разобрал процесс оформления заказа и выделил следующие этапы пути пользователя:

Текущий путь пользователя в корзине и чекауте

Добавление в корзину

Переход в корзину

Выбор способа получения

Авторизация

Выбор адреса и времени

Проверка заказа

Оплата заказа

Проблемы текущего интерфейса

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

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

Анализ конкурентов

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

Наличие триггера на бесплатную доставку.
Сохранение адреса доставки по умолчанию.
Подборки товаров к корзине

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

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

Проблема

Пользователи часто вспоминают о напитках и закусках, находясь в корзине, и вынуждены возвращаться в каталог, что усложняет процесс заказа

Проблема

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

Проблема

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

Проблема

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

Гипотезы

После дискавери было разработано 5 гипотез для решения выявленных проблем

01Способ полученияГипотеза № 1 — Способ получения

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

Если после A/B-тестирования процент конверсии из оформления заказа в покупку у этого варианта будет выше, то гипотезу можно считать успешной

02Авторизация перед покупкойГипотеза № 2 — Авторизация перед покупкой

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

Если после A/B-тестирования процент конверсии в авторизацию из корзины у этого варианта будет выше, то гипотезу можно считать успешной

03Замена товараГипотеза № 3 — Замена товара

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

Если после A/B-тестирования процент конверсии из корзины в оформление заказа у этого варианта будет выше, то гипотезу можно считать успешной

04Данные о доставкеГипотеза № 4 — Данные о доставке

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

05Данные и состав заказаГипотеза № 5 — Данные и состав заказа

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

Если количество обращений в поддержку по вопросам состава заказа снизится, то гипотезу можно считать успешной

Дизайн интерфейса

Отрисовано более 20 экранов, подобрана новая палитра цветов и заложен фундамент для UI-kit

Мобильная корзина — Мобильная и десктоп версии

Десктопная корзина — Мобильная и десктоп версии

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

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

Задание

Заказать сет «Соул Амма-Амма» и добавить соевый соус. Оформить доставку к ближайшему времени

Критерии успеха

Нашел товар (через каталог или поиск), выбрал способ получения через таб и ввел адрес через инпут;
Не возникло вопросов, где добавить соевый соус;
Понятны моменты в корзине и оформлении заказа;
Авторизовался удобным способом нажав на кнопку в корзине;
Выбрал таб «Скорее» во времени доставки;
Не заполнял инпут с промокодом;
Нажал на кнопку «Оформить заказ»;
Не возникло вопросов по дальнейшим действиям Если пользователь выполнит основное задание, не свернув никуда на своем пути, то задание будет считаться выполненым

Выводы по результатам тестирования: 5 из 5 респондентов справились с задачей, но с некоторыми замечаниями, которые я исправил в дизайне.

Метрики, результаты и саморефлексия

За 2 месяца работы нам удалось обновить процесс оформления заказа и добиться следующих результатов

+1.4 п.п

Увеличилась конверсия в покупку по отношению к предыдущему месяцу

+4,8%

Увеличилась конверсия перехода из корзины в оформление заказа

Процент конверсии в авторизацию у варианта с плашкой оказался статистически значимо выше на 3,2%
Процент конверсии перехода из корзины в оформление заказа у варианта с предложением замен отсутствующим товарам оказался выше на 7,2%
Количество обращений в поддержку по составу и данным заказа снизилось на 14%

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

Предыдущий кейс

Следующий кейс