дизайн онлайн магазина эльдорадо

Дизайн карточки товара и UX интернет-магазина

Промывка сайта «Эльдорадо»: как улучшить процесс оформления покупки

За несколько дней до 2024 года мне пришлось покупать новую стиральную машину на сайте магазина «Эльдорадо». Кто оказался виноват — плохой UX или саппорт магазина — точно нельзя сказать, но машинки в оговоренный день дома не стояло. Вместо скандала мы решили починить онлайн-магазину процедуру оформления заказа, пока что хотя бы просто на макетах.

Накануне

Какой подарок я куплю себе на Новый год, за пять дней до его наступления подсказал мне господин Случай: в четвёртый раз за 2,5 года сломалась стиральная машина. Чинить её было бессмысленно, поэтому я начал оформлять заказ новой машинки на сайте магазина «Эльдорадо». Кроме покупки самой техники, магазин предложил её доставить, подключить к воде и увезти почивший агрегат. Всё это было включено в конечный заказ. Увы, доставка была возможна только в день, следующий за днём заказа. Ну, да ладно, подождём.

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

Путать начинают прямо с порога:

техподдержка эльдорадо

Я страшно извиняюсь, но посмотрите на скрин ниже — так выглядит конечный заказ на сайте «Эльдорадо». Стоимость доставки идёт отдельной строкой. Итого три товара в корзине: сама стиральная машинка, изъятие старой для утилизации и та самая злополучная установка новой.

эльдорадо подтвердить заказ

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

техподдержка эльдорадо

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

оформление заявки эльдорадо

Взываю к разуму саппорта в последний раз:

техподдержка эльдорадо

Впрочем, именно это я и сделал безо всяких советов: написал для уточнения по заказу, когда почуял, что плохи мои дела. По логике саппорта выходит, что я выбрал для этого неудачное время. И, как следствие, стирал свои вещички руками до 3 января.

Повторно я оформил покупку уже в каменном магазине при участии вежливого и душевного персонала. Откуда такая разница в сервисе офлайн и онлайн — вопрос риторический. А себе я как пользователь сайтов, потребитель и маркетолог в IT-компании задал конкретный вопрос: как можно улучшить пользовательский опыт, чтобы избежать подобных недоразумений, исправить репутацию магазина и повысить онлайн-продажи?

Я поставил себе, нашему дизайнеру и разработчику три задачи:

  • доработать карточку товара,
  • внедрить дополнительную процедуру валидации заказа,
  • придумать техническую реализацию этой процедуры.

Как выглядит процесс оформления заказа сейчас

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

Вот карточка товара. Вернее, её первый экран.

карточка товара эльдорадо
 

Начать суетиться и подвисать можно прямо здесь: выбрать между опциями «Забрать в магазине» и «Доставка» нельзя, но очень хочется — по клику на них можно только посмотреть информацию, в каких магазинах города есть этот товар и в какое время и за какую цену можно заказать доставку.

время доставки товара по городуналичие товара в магазинах

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

услуги и сервис эльдорадо

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

карточка товара dns

И так же более толково это сделано на сайте магазина «Ситилинк»: при нажатии на «Все услуги» пользователя автоматически проматывает до панели с этой вкладкой.

карточка товара ситилинк

Окей, возвращаемся в «Эльдорадо». Добавляем товар в корзину и переходим к оформлению заказа. На первом шаге нам таки предлагают выбрать способ доставки и помещают в поле зрения кнопку «Услуги и сервис». Накликиваем всё, что нужно, жмём «Продолжить» и идём дальше.

оформление заявки эльдорадооформление заявки эльдорадооформление заявки эльдорадо

И вот, мы дошли до места, которое требует себя улучшить.

эльдорадо подтвердить заказ

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

Как может выглядеть процесс оформления заказа

Доработка карточки товара

Что мы решили привнести в карточку товара:

  • услуги по установке и демонтажу и их стоимость добавили на первый экран, поближе к пользователю. По клику на «Все услуги» пользователя переносит во вкладку панели «Услуги», откуда он добавляет допсервисы себе в корзину.
  • добавили больше подробностей по способу доставки товара: из каких магазинов можно лично забрать его сегодня, из каких — позднее, и от скольки стоит доставка;
  • вывели блок с аксессуарами на видное место.

 карточка товара эльдорадо новая
 

Доработка подтверждения заказа

На последнем этапе пользователь ждёт, когда ему позвонит менеджер, чтобы:

  • убедиться, что вы — это вы и покупаете то, что покупаете;
  • озвучить вам все пожелания по заказу и попросить их подтвердить, добавить что-то ещё или что-то убрать.

Как это реализовать?

Для начала поменяем на финальном шаге подпись у кнопки завершения заказа: с «Подтвердить заказ» на «Отправить заказ» — так мы даём понять, что обработка заказа ещё не окончена. После нажатия на кнопку детали по заказу отправляются покупателю на почту и по sms, а интерфейс информирует об основном нашем нововведении: сейчас менеджер магазина сделает звонок для уточнения деталей. Это и станет гарантом обработанной и завершённой покупки.

эльдорадо отправить заказоформление заявки эльдорадо завершено

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

эльдорадо SMS

Теперь о делах подкапотных. Онлайн-сервисы, предполагающие отправку и приём данных — в том числе заявок на звонок, как в нашем случае,— состоят из множества компонентов системы, которые надо связывать. Если мы хотим воплотить наш план, то у нас с одной стороны должен быть сервис с сервером, куда падает заявка, а с другой — сервис для менеджеров техподдержки со своим сервером, из которого заявку нужно забрать. Связать оба сервиса друг с другом поможет message broker (брокер сообщений) — посредник в асинхронном обмене данными между частями распределённой системы.

Сценарий работы брокера следующий:

  1. на стороне сайта «Эльдорадо» создаётся сообщение для сервера брокера: «Заявка номер такой-то»;
  2. заявка отправляется в очередь из заявок, составляемую брокером;
  3. из стека её достаёт программа для менеджеров, подписанная на очередь. Если сообщение из стека достать не получилось, то его можно пересоздать и положить в самый низ стека, ожидая, пока оно дойдёт до очереди.

На этом работа брокера заканчивается, и подключается менеджер.

Выбор брокера сообщений завязан на том, какие технологии работают на бэкенде сайта, но одними из часто встречающихся брокеров являются Apache Kafka и RabbitMQ.

Заключение

В конце декабря 2020 года сеть «Эльдорадо» выпустила мобильное приложение для iOS и Android. Вместе с этим руководство подчёркивало: онлайн-аудитория растёт, трафик сайта увеличился в 1,5 раза относительно 2019 года. С тех пор каждый год компания продаёт онлайн на сотни миллиардов рублей. Польза этого канала взаимодействия очевидна.

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

Впервые статья была опубликована на сайте vc.ru

Андрей Руденко
Андрей Руденко, маркетолог

Автор, редактор, куратор конкурса Russian Drupal Awards

Напишите нам!

Мы регулярно просматриваем не только почту, но и спам. Ваша заявка от нас не ускользнёт.

Напишите нам!

Но сначала правильно заполните обязательные поля.