Сами Сушами

UX-аудит и выявление ошибок

Мы начали свою работу с UX-аудита — комплексного анализа интерфейса на предмет ошибок.

Такая проверка юзабилити состояла из следующих этапов:

• Погружение в бизнес-процессы.
• Анализ рынка и конкурентов.
• Изучение аналитики.
• Анализ путей пользователей.
• Изучение обратной связи колл-центра.
• Анализ тепловых карт и записей вебвизора.
• Выявление проблемных зон сайта.

В результате мы составили список основных проблем и сформировали гипотезы:

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

Нативная навигация iOS в меню

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

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

Корзина как сквозной элемент

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

Мотивационная система для допродаж

В старой версии сайта не использовались инструменты cross-sell. Мы поработали это направление и сделали процесс добавления дополнительных товаров на новом сайте простым, понятным и вовлекающим.

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

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