За несколько дней до 2024 года мне пришлось покупать новую стиральную машину на сайте магазина «Эльдорадо». Кто оказался виноват — плохой UX или саппорт магазина — точно нельзя сказать, но машинки в оговоренный день дома не стояло. Вместо скандала мы решили починить онлайн-магазину процедуру оформления заказа, пока что хотя бы просто на макетах.
Накануне
Какой подарок я куплю себе на Новый год, за пять дней до его наступления подсказал мне господин Случай: в четвёртый раз за 2,5 года сломалась стиральная машина. Чинить её было бессмысленно, поэтому я начал оформлять заказ новой машинки на сайте магазина «Эльдорадо». Кроме покупки самой техники, магазин предложил её доставить, подключить к воде и увезти почивший агрегат. Всё это было включено в конечный заказ. Увы, доставка была возможна только в день, следующий за днём заказа. Ну, да ладно, подождём.
В день ожидаемой доставки я забеспокоился — номер заказа в виде смс мне не пришёл, уточняющего/предупредительного звонка из магазина тоже не было. Обратившись за вопросом о статусе заказа в чат, я понял, что моя новогодняя сказка начинается сейчас.
Путать начинают прямо с порога:
Я страшно извиняюсь, но посмотрите на скрин ниже — так выглядит конечный заказ на сайте «Эльдорадо». Стоимость доставки идёт отдельной строкой. Итого три товара в корзине: сама стиральная машинка, изъятие старой для утилизации и та самая злополучная установка новой.
Далее мне навязывают мысль в том, что я сам не подстелил себе солому. В офисе пахнет горелым, а я срываюсь в верхний регистр:
Ведь действительно, на странице с подтверждением заказа написано именно это, красным по-белому. Можно и покапсить.
Взываю к разуму саппорта в последний раз:
Впрочем, именно это я и сделал безо всяких советов: написал для уточнения по заказу, когда почуял, что плохи мои дела. По логике саппорта выходит, что я выбрал для этого неудачное время. И, как следствие, стирал свои вещички руками до 3 января.
Повторно я оформил покупку уже в каменном магазине при участии вежливого и душевного персонала. Откуда такая разница в сервисе офлайн и онлайн — вопрос риторический. А себе я как пользователь сайтов, потребитель и маркетолог в IT-компании задал конкретный вопрос: как можно улучшить пользовательский опыт, чтобы избежать подобных недоразумений, исправить репутацию магазина и повысить онлайн-продажи?
Я поставил себе, нашему дизайнеру и разработчику три задачи:
- доработать карточку товара,
- внедрить дополнительную процедуру валидации заказа,
- придумать техническую реализацию этой процедуры.
Как выглядит процесс оформления заказа сейчас
Для этого мы с вами пройдём по всему пути пользователя и походя будем выявлять то, что мешает нормальной покупке.
Вот карточка товара. Вернее, её первый экран.
Начать суетиться и подвисать можно прямо здесь: выбрать между опциями «Забрать в магазине» и «Доставка» нельзя, но очень хочется — по клику на них можно только посмотреть информацию, в каких магазинах города есть этот товар и в какое время и за какую цену можно заказать доставку.
Панель с дополнительной информацией о товаре находится ниже основной. Их можно и не заметить, в том числе вкладку «Услуги», но, тем не менее, установка новой машинки и вывоз старой заказывается здесь.
Для сравнения: чекбоксы с этими услугами у карточки товара на сайте магазина DNS включены в группу основного функционала для покупки. Информация действительно полезная и должна быть на виду.
И так же более толково это сделано на сайте магазина «Ситилинк»: при нажатии на «Все услуги» пользователя автоматически проматывает до панели с этой вкладкой.
Окей, возвращаемся в «Эльдорадо». Добавляем товар в корзину и переходим к оформлению заказа. На первом шаге нам таки предлагают выбрать способ доставки и помещают в поле зрения кнопку «Услуги и сервис». Накликиваем всё, что нужно, жмём «Продолжить» и идём дальше.
И вот, мы дошли до места, которое требует себя улучшить.
Нажимая кнопку «Подтвердить заказ», покупатель должен быть уверен, что система учла все его пожелания. Сейчас у него нет другого выбора, кроме как просто поверить в это, в том числе и в то, что ему позвонит специалист. Как выяснилось, такая вера оборачивается паранормальными диалогами с саппортом.
Как может выглядеть процесс оформления заказа
Доработка карточки товара
Что мы решили привнести в карточку товара:
- услуги по установке и демонтажу и их стоимость добавили на первый экран, поближе к пользователю. По клику на «Все услуги» пользователя переносит во вкладку панели «Услуги», откуда он добавляет допсервисы себе в корзину.
- добавили больше подробностей по способу доставки товара: из каких магазинов можно лично забрать его сегодня, из каких — позднее, и от скольки стоит доставка;
- вывели блок с аксессуарами на видное место.
Доработка подтверждения заказа
На последнем этапе пользователь ждёт, когда ему позвонит менеджер, чтобы:
- убедиться, что вы — это вы и покупаете то, что покупаете;
- озвучить вам все пожелания по заказу и попросить их подтвердить, добавить что-то ещё или что-то убрать.
Как это реализовать?
Для начала поменяем на финальном шаге подпись у кнопки завершения заказа: с «Подтвердить заказ» на «Отправить заказ» — так мы даём понять, что обработка заказа ещё не окончена. После нажатия на кнопку детали по заказу отправляются покупателю на почту и по sms, а интерфейс информирует об основном нашем нововведении: сейчас менеджер магазина сделает звонок для уточнения деталей. Это и станет гарантом обработанной и завершённой покупки.
В конце менеджер резюмирует звонок словами вроде «Заказ подтверждён. Ваша заявка будет ждать вас на почте и в личном кабинете, спасибо и всего доброго», тем самым заканчивая процедуру покупки. Полирнём всё валидацией через эсэмэски.
Теперь о делах подкапотных. Онлайн-сервисы, предполагающие отправку и приём данных — в том числе заявок на звонок, как в нашем случае,— состоят из множества компонентов системы, которые надо связывать. Если мы хотим воплотить наш план, то у нас с одной стороны должен быть сервис с сервером, куда падает заявка, а с другой — сервис для менеджеров техподдержки со своим сервером, из которого заявку нужно забрать. Связать оба сервиса друг с другом поможет message broker (брокер сообщений) — посредник в асинхронном обмене данными между частями распределённой системы.
Сценарий работы брокера следующий:
- на стороне сайта «Эльдорадо» создаётся сообщение для сервера брокера: «Заявка номер такой-то»;
- заявка отправляется в очередь из заявок, составляемую брокером;
- из стека её достаёт программа для менеджеров, подписанная на очередь. Если сообщение из стека достать не получилось, то его можно пересоздать и положить в самый низ стека, ожидая, пока оно дойдёт до очереди.
На этом работа брокера заканчивается, и подключается менеджер.
Выбор брокера сообщений завязан на том, какие технологии работают на бэкенде сайта, но одними из часто встречающихся брокеров являются Apache Kafka и RabbitMQ.
Заключение
В конце декабря 2020 года сеть «Эльдорадо» выпустила мобильное приложение для iOS и Android. Вместе с этим руководство подчёркивало: онлайн-аудитория растёт, трафик сайта увеличился в 1,5 раза относительно 2019 года. С тех пор каждый год компания продаёт онлайн на сотни миллиардов рублей. Польза этого канала взаимодействия очевидна.
И тем обиднее может быть за описанные выше кейсы, особенно когда идеально выстроенный флоу нарушается человеческим фактором. Но мы не могли не помочь компании советом — и как покупатели, и как студия веб-разработки.
Впервые статья была опубликована на сайте vc.ru
