Редизайн корзины
и чекаута магазина
ювелирных украшений

Проблема

Интернет-магазин ювелирных изделий JV Gallery пришел к нам после редизайна сайта, выполненного другим агентством. Новый дизайн решал имиджевые задачи компании, но был неудобным для пользователя, в результате чего сильно упала конверсия в покупку.

Решение

Навели порядок в процедуре выбора размера товара

Ювелирные изделия делятся на две категории: товары в единственном размере (например, серьги) и товары с градацией по размерам (например, кольца).

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

Для всех товаров в единственном размере мы убрали этот параметр: блок с размерами не выводится, а товар сразу добавлялся в корзину при нажатии соответствующей кнопки.

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

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

Сделали процесс покупки простым и естественным

Раньше добавление товара в корзину работало не очевидно для пользователя. После нажатия на кнопку «Добавить в корзину» текст на ней менялся на «Добавлено в корзину», и рядом с иконкой корзины в шапке сайта появлялось количество товаров. Отличия двух состояний были незначительны и незаметны, поэтому пользователь не понимал, что товар уже в корзине, и не знал, что делать дальше.

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

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

При нажатии на кнопку «Добавить в корзину» панель с содержимым корзины появляется автоматически, чтобы у пользователя не было сомнений, добавился ли товар в корзину. Самый заметный элемент корзины — кнопка «Оформить заказ», которая подсказывает пользователю следующее действие. Клик на свободную область позволяет вернуться к исходной странице и продолжить покупки.

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

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

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

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

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

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

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

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

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