Редизайн процесса оформления заказа на сайте Faberlic

• О клиенте

• О проекте

• Предпроектная аналитика

• Бизнес-интервью

• Веб-аналитика

• Сценарии и информационная архитектура

• Интерфейсные решения

• Результаты

В 2022 году импортозамещение стало главным вектором работы компании. После ухода с российского рынка платформы, к которой ранее был привязан интернет-магазин, возникла необходимость пересобрать сайт заново на другом стеке. В процессе работы было решено улучшить UX сценариев, с которыми у пользователей возникали трудности.

Нам предстояло провести работы по редизайну части чек-аута на сайте faberlic.com и предложить изменения в существующую дизайн-систему. Команда заказчика собрала обратную связь у фокус-группы и передала требования нам.

Перед нами стояло две задачи.

#1

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

#2

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

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

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

У этого было несколько причин:

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

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

3. Поиск, добавление или удаление товара по акции включали несколько лишних шагов.

Сложность задачи состояла ещё и в том, что подобные разделы внутри корзины совсем не типичная история для сферы e-commerce. Анализ бест-практис и лидеров отрасли не показал подходящих примеров реализации подобного флоу. Поэтому опирались в основном на фидбэк пользователей и данные этапа аналитики.

Целевая аудитория проекта — консультанты компании «Фаберлик» с разным опытом работы с сайтом (от новичка до опытного пользователя). Поэтому приходилось сохранять баланс. С одной стороны, сайт должен способствовать адаптации новых пользователей, постепенно погружать их в контекст. А с другой — функциональность должна быть достаточно широкой, чтобы не тормозить работу опытных консультантов.

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

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

Во-первых, сайтом пользуются не только розничные покупатели, которые покупают товары для себя и своей семьи. «Фаберлик» работает по концепции MLM (multilevel marketing) — многоуровневый маркетинг. Это система, при которой компания привлекает независимых консультантов для поиска потребителей. Поэтому наша основная целевая аудитория — это консультанты компании, которые закупают товар и занимаются его распространением среди других консультантов или покупателей.

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

Параллельно проанализировали текущее решение и техническую документацию от системных аналитиков: инструкции по типам акций и другую важную информацию. Кроме этого, составили внутренний словарь проекта, в котором задокументировали более 50 специфичных терминов, используемых в компании.

Провели два интервью с командой заказчика. На первой встрече познакомились, синхронизировались в понимании бизнес-задач. На второй собрали информацию об аудитории и требования для будущего интерфейса.

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

Из данных Яндекс Метрики собрали информацию о пользователях (географию, пол, возраст), их интересах, распределение по устройствам и разрешениям экранов. Выявили проблемные места адаптивной версии по сравнению с десктопной. По записям веб-визора оценили, как пользователи перемещаются между разделами и выбирают товары.

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

Полученный юзер-флоу разделили на несколько этапов и зафиксировали в виде новых схем.

До перехода к этапу проектирования продумали иерархию страниц в виде детализированной информационной архитектуры той части сайта, которую затрагивал редизайн.

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

Информация с итогами частично дублировалась в трёх блоках:

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

Убрать какую-либо информацию нельзя, так как для консультантов каждая из этих цифр важна, чтобы:

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

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

Что изменили:

#1

Отказались от разворачивающегося блока внизу экрана, зафиксировали в нём только итоговые показатели и кнопки.

#2

Всю детальную информацию перенесли на страницу корзины, под итоговые значения. Пользователям, особенно новичкам, было сложно ориентироваться в показателях по выполнению плана, когда в корзине были указаны только баллы за заказ, а основная информация находилась в личном кабинете. Из-за этого консультанты вели подсчёты вручную. Они высчитывали:

#3

Отдельно в итогах вынесли информацию о размере скидки за заказ и индикатор достижения максимальной скидки.

#4

Расшифровали, из чего складывается сумма, которая будет оплачена бонусными баллами.

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

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

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

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

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

Ранее выбор категории акции, самой акции и товара внутри неё располагался в рамках одного экрана. Пользователю может быть доступно до 16 категорий, в каждой из которой содержится более 6 акций. А в них в свою очередь может содержаться до 2500 товаров. Наслаивание уровней друг на друга приводило к тому, что на экране оставалось мало места для карточек товаров.

Этот процесс разделили на три шага: выбор категории, акции и товара. Благодаря этому на экране стало помещаться больше карточек, появилась возможность добавить изображения товаров, расширить возможности сортировки.

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

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

Плюс добавили количество товаров в каждой категории и число непросмотренных акций.

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

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

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

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

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

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

Была и другая проблема: некоторые акции становятся доступными, когда пользователь наберёт в корзину товаров на определённую сумму. Пользователи, которые почти добрали корзину до нужной суммы, никак не могли узнать, что скоро акция станет доступна. Для такого кейса предусмотрели отдельное состояние. Теперь пользователь может увидеть акцию, посмотреть товары, но без возможности добавить в корзину.

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

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

На следующем шаге пользователям было сложно работать со списком товаров по нескольким причинам:

#1

Товаров может быть очень много. Список было сложно фильтровать по каким-то признакам (например, цене), так как в него попадают товары разных категорий (например, пальто и крем).

Решили это, добавив фильтр по категории товара и сортировки.

#2

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

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

При добавлении товара в корзине кнопка меняется на счётчик товаров. Он не занимает много места и выполняет сразу две функции: отображение товаров, которые уже добавлены в корзину, и управление количеством товаров / удаление товара из корзины.

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

В разделе «Корзина»:

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

В разделе «Персональные акции»:

Все макеты передали клиенту для дальнейшей реализации решений на его стороне. На текущий период продолжаем сотрудничать по улучшению UX публичной части сайта и личного кабинета клиента.