Дозаказ: как дать покупателю изменить заказ после оплаты

«Ашан» – один из крупнейших продуктовых ритейлеров России с интернет-магазином и мобильными приложениями. Онлайн-заказ продуктов устроен жёстко: покупатель собирает корзину, выбирает слот доставки, оплачивает, после чего заказ уходит на сборку в магазин.

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

Задача пришла от бизнеса: от продакт-менеджеров «Ашана» и руководителя направления. У неё было три источника:

Как было

Задачи

• Спроектировать новый пользовательский путь дозаказа товаров
• Показать все экраны и состояния, необходимые для понимания функции
• Адаптировать решение для сайта, мобильного веба и мобильного приложения
• Уложиться в существующие правила брендбука и UI-кита «Ашана»

Я был Senior / Lead внешней дизайн-команды студии aic. У «Ашана» была полноценная продуктовая команда, но без собственных дизайнеров, поэтому дизайн-экспертиза и ответственность за решение были на нашей стороне.

Дозаказ упирается не в интерфейс, а в операционку: склад, сборщиков, курьеров и платёжный контур. Эти ограничения мы получили от бизнеса и разработки, и они определили почти все дизайн-решения.

Главный вопрос был в том, где покупатель выбирает товары для дозаказа.

User flow

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

Дозаказ должен встретиться покупателю там, где он вспоминает о забытом товаре, а не там, где нам удобно его разместить.

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

Спасибо за заказ

Самый горячий момент: покупатель только что оплатил и ещё держит в голове список. Рядом с информацией о заказе появился блок «Забыли что-то купить?»: информер с условиями, слайдер рекомендаций на основе товаров в заказе и переход в каталог. В мобильном приложении экран короче, поэтому там остались только информер и кнопка «Перейти в каталог».

Мои заказы

Сюда покупатель возвращается позже, когда вспомнил о товаре. В карточке заказа со статусом «Ожидает сборки» появилась кнопка «Дополнить заказ». На десктопе она открывает попап с рекомендациями для быстрого добавления, на мобильных сразу ведёт в каталог.

01 / 02

Детальная страница заказа

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

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

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

Карточки товаров работают так же, как в обычном каталоге: «В корзину», затем степпер количества. Меняется только адресат: товар уходит не в корзину, а в дозаказ.

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

01 / 02

Перед подтверждением покупатель видит исходный заказ и добавленные товары на одном экране.

Страница «Дополнение заказа» собрана по логике корзины: сверху исходный заказ со слотом доставки, ниже добавленные позиции с возможностью изменить количество, удалить товар или очистить весь дозаказ, справа итог с весом и суммой дозаказа. Кнопка «Назад» возвращает на ту страницу каталога, где покупатель был, чтобы можно было докинуть ещё что-то.

Самая сложная часть – деньги. Механика зависит от способа оплаты исходного заказа.

После подтверждения покупатель возвращается в «Мои заказы» и видит тот же заказ с добавленными товарами и новой суммой.

Дозаказ живёт внутри чужого процесса и может закончиться не по воле покупателя.

Когда заказ уже начали собирать, попап объясняет причину и сразу даёт два выхода: «Перенести в корзину» для нового заказа или «Выйти из дозаказа».

01 / 02

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

По условиям задачи решение нужно было уложить в существующий брендбук и UI-кит «Ашана». Новыми стали только компоненты самого сценария: модуль дозаказа, модальное окно с рекомендациями и три попапа-исключения. Всё остальное собрано из готовых карточек, кнопок и информеров.

Как проверяли решение

До разработки сценарий прошёл внутренние UX-ревью с продактами и разработкой и проверку на кликабельном прототипе. Количественные результаты после запуска мне недоступны: измерения вела команда «Ашана» уже после передачи макетов. Ниже план проверки, который я закладывал в решение.

Чего ожидала команда

Финальные решения принимали продакт-менеджеры и руководитель направления «Ашана», а дизайн-экспертиза была на стороне студии. Это требовало аргументировать каждое решение через задачу бизнеса, а не через вкус.

• Показывал варианты с плюсами и ценой реализации, а не один «правильный» дизайн
• Каждое ограничение склада и оплаты сначала проговаривал с разработкой, потом рисовал
• Проектировал граничные случаи вместе с основным сценарием, а не после него

Процесс: бриф от продактов → сценарий и ограничения → варианты → ревью → макеты для трёх платформ → handoff → дизайн-поддержка разработки

В handoff вошли состояния модуля, тексты условий, правила для каждого статуса заказа и аннотации к веткам оплаты.