Чекаут (или оформление заказа) — это финальный шаг успешной продажи на маркетплейсе. И дизайн обретает здесь максимальное значение. Даже если не подключать механики «дополнительные услуги» и «сопутствующие товары», в чекауте остаётся масса сложного функционала. Значит крайне важно, где, что и как разместит дизайнер.
Логика компоновки
Сразу скажу, что этот шаг реализуется по-разному у разных маркетплейсов. В этом проекте я покажу один из вариантов: когда мы дробим корзину на отдельные доставки с индивидуальным для каждой доставки способом доставки. На иностранных маркетплейсах корзину часто делят по Продавцам, а иногда и по складам. На отечественных маркетплейсах чаще всего достаточно указать способ доставки и адрес. А уж когда доставят — тогда и доставят.
Доставки
Я реализовал гибридный вариант. Сначала покупатель выбирает один из его адресов доставки (или добавляет новый адрес). Дальше в строку выводим список товаров. Тут тоже есть нюанс.
По-хорошему, в чекауте не стоит давать пользователю возможность менять количество товаров и состав заказа. Это лишний повод задуматься перед оплатой, да и при каждом изменении нужно снова опрашивать сервер и запускать проверки адреса и доступности товара. Однако, техническая база здесь позволяла реализовать такую механику, поэтому решили оставить.
Ещё одна возможная сложность в чекауте — если один из товаров нельзя доставить на указанный покупателем адрес. В этом случае не забываем дать отметку с ошибкой.
Ниже для каждой группы товаров в доставке выводим список доступных способов доставки. Здесь и транспортные компании, и самовывоз, и пункты самовывоза (так называемые, pick-up points).
Отдельно стоит упомянуть, что у некоторых транспортных компаний могут быть разные тарифы доставки. Поэтому, важно заложить место для вывода поля выбора тарифа. При этом, не у всех способов доставки есть возможность подсчитать скорость доставки. Поэтому «Завтра после 16:00 будет у вас» может работать не для всех. При разработке ui ux дизайна маркетплейса важно учитывать оба варианта.
Зато у каждого способа доставки можно вывести стартовую стоимость. Эта информация есть практически у всех вариантов.
Пункты выдачи заказов
Для выбора ПВЗ покупателю нужно отобразить специальный попап с картой, списком и поиском.
У ПВЗ как раз можно отображать ориентировочную дату доставки. А тариф доставки там обычно один единственный.
Выбор способа оплаты
Следующим шагом выводим варианты способы оплаты заказа. Их может быть два-три, а может быть и значительно больше.
Помимо традиционных способов «наличными» и «банковской картой» может быть «оплата по счёту», «оплата по QR-коду» и другие варианты, разные для разных стран.
Также для B2B-маркетплейсов здесь будет выбор "оплаты с отсрочкой" и "факторинг".
Но это отдельная обширная тема для изучения.
Успешное оформление заказа
Итогом всех манипуляций с компоновкой и дизайном чекаута станет успешное оформление заказа.
Тут всё уже достаточно просто: отображаем номер заказа, ещё раз напоминаем о дате оформления, выбранных способах доставки и оплаты.
Ниже выводим список товаров в заказе и подбиваем все итоговые суммы. Под каждую доставку я делаю отдельную таблицу, а в конце вывожу финальные суммы по всему заказу.
Итоги
Успешным оформлением заказа оканчивается базовый флоу (маршрут) покупателя на маркетплейсе.
Однако, дальше появляется множество маршрутов покупателя внутри своего личного кабинета. Управление профилем, работа с заказами, возвраты товаров, центр коммуникаций, избранное, сравнение и много что ещё.
Отдельно нужно понимать, что для каждого экрана требуется грамотная проработка адаптивных версий. Планшеты и смартфоны имеют свои технические ограничения. Всё это надо учитывать при ui ux дизайне маркетплейса.
И уж совсем большая тема — это порталы продавца и оператора. Административное управление маркетплейсом также требует грамотного ui ux дизайна.
Послесловие
Я надеюсь, эта небольшая книга стала полезной для вас и вашей команды. Благодарю за внимание.
Желаю вам успеха в нелёгком деле развития дизайна!
