Редизайн корзины
и чекаута магазина
ювелирных украшений
Состав работ
Проблема
Интернет-магазин ювелирных изделий JV Gallery пришел к нам после редизайна сайта, выполненного другим агентством. Новый дизайн решал имиджевые задачи компании, но был неудобным для пользователя, в результате чего сильно упала конверсия в покупку.
Задача
Улучшить интерфейсы корзины и страницы оформления заказа, сделав процесс покупки понятнее и удобнее. Подключить нормализацию адресов через Dadata, автоматически выгружать в Mailchimp пользователей, подписавшихся на новостную рассылку при оформлении заказа.
Решение
Навели порядок в процедуре выбора размера товара
Ювелирные изделия делятся на две категории: товары в единственном размере (например, серьги) и товары с градацией по размерам (например, кольца).
До того, как мы приступили к доработке, при добавлении товара в корзину необходимо было обязательно выбрать размер. Когда товар был в единственном размере, выводился один доступный размер «one size». Когда товар предполагал градацию по размерам, но в наличии оставался последний размер, его также нужно было выбрать перед тем, как положить товар в корзину. Если пользователь не замечал блока с размерами и нажимал кнопку «Добавить в корзину», не выбрав размер, появлялось массивное модальное окно с сообщением «Выберите размер».
Для всех товаров в единственном размере мы убрали этот параметр: блок с размерами не выводится, а товар сразу добавлялся в корзину при нажатии соответствующей кнопки.

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

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


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

Также мы полностью переработали процесс оформления заказа. Страница выполнена в упрощенном дизайне без меню и подвала, чтобы ничто не отвлекало пользователя от завершения сделки.
Для облегчения заполнения адреса мы подключили сервис нормализации данных Dadata. Он помогает заполнить поля, подсказывая возможные варианты городов и улиц при наборе части адреса, исправляет опечатки и раскладку клавиатуры.
Пользователю доступно несколько способов доставки: самовывоз или курьерская доставка в Москве, либо доставка транспортной компанией для регионов.
Стоимость доставки зависит как от общей стоимости товаров в корзине, так и от выбранного способа доставки. В случае доставки по Москве стоимость рассчитывается и отображается в блоке доставки автоматически. В случае доставки в регионы стоимость зависит от города, в котором проживает клиент, и от того, какую транспортную компанию от выберет — расчет стоимости производится менеджером магазина уже после оформления заказа.
В старом интерфейсе оформления заказа в строке стоимости доставки выводился 0₽ не только в случаях, когда доставка бесплатна, но и когда стоимость доставки должен был уточнить менеджер. Это вызывало у клиентов негатив при подтверждении заказа.
Чтобы исправить ситуацию, мы переработали схему вывода стоимости доставки. Пока пользователь не выбрал город в строке стоимости доставки, отображается сообщение «Заполните адрес». После заполнения адреса стоимость изменяется в зависимости от выбранного способа доставки. Если выбрана доставка транспортной компанией, стоимость которой пока неизвестна, в строке стоимости доставки отображается сообщение «Уточним при подтверждении».

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