Сократили путь от корзины до оплаты в интернет-магазине продуктов

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

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

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

Интернет-магазин «Мой Мясной» — наш давний клиент. Мы уже рассказывали, как автоматизировали подбор склада и настроили удобный выбор интервалов доставки.

В прошлый раз задача касалась внутренней логики обработки заказов, а теперь клиент пришел с запросом на изменение пользовательского пути. Требовалось сократить расстояние между решением о покупке и оформленным заказом. На сайте между этими точками была лишняя страница Корзины, которая добавляла еще один клик для пользователя.

Bitrix

Главная задача — сократить путь к покупке на мобильной версии сайта. Требовалось объединить Корзину и страницу оформления заказа в рамках одного экрана, чтобы пользователь попадал сразу к финальному шагу.

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

На первый взгляд задача клиента тривиальной: сделать из двух страниц «Корзина» и «Оформление заказа одну». 

Однако мы поняли, что пользователю будет неудобно ориентироваться с такой огромной «простынке», которую на мобильном экране придется долго листать. Нужно было сначала упростить интерфейс.

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

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

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

Расскажем на примере. Мария — постоянный покупатель «Моего Мясного». В понедельник она открыла сайт, авторизовалась и набрала корзину продуктов. Но тут ее отвлекли — она закрыла вкладку, так и не оформив заказ.

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

Так произошло потому, что система «узнала» ее по номеру и самостоятельно подтянула вчерашнюю корзину к сегодняшнему заказу. Мария видит вверху страницы изменившуюся сумму заказа и справедливо возмущается: «Откуда такая сумма?». В растерянности и раздражении она просто закрывает сайт. Так магазин может навсегда потерять клиента.

Чтобы решить эту проблему, мы реализовали логику, которая игнорирует «прошлую» корзину при оформлении нового заказа. Система не подмешивает старые товары в текущий заказ — пользователь видит только то, что добавил сейчас.

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

В ТЗ клиент прислал прототип, где после кнопки «Оформить заказ» появлялось поле для ввода кода из СМС, и этим форма заканчивалась. Казалось бы, все логично. Но мы увидели проблему: если пользователь случайно введет неверный код, система потребует обновить страницу и запросить код заново. Это лишнее ожидание и высокий риск, что заказ бросят на полпути.

Мы предложили другое решение: добавить кнопку «Оформить заказ» уже после поля ввода кода. Теперь при ошибке система просит проверить и ввести код заново. Пользователь может сразу исправить опечатку, не запрашивая новую СМС.

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

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

Сайт — это живой организм. Он меняется вместе с бизнесом и привычками пользователей. И наша задача — регулярно находить узкие места, тестировать гипотезы и улучшать пользовательский опыт. В тесном сотрудничестве с клиентом рождаются решения, которые реально влияют на продажи.