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

Sunuva — это мировой бренд детской одежды, основанный в 2007 году. Сегодня их продукция представлена в известных магазинах класса люкс, таких как Bloomingdale’s, Harrods, Barneys, Harvey Nichols и других сетях роскошных универмагов. Это отличный пример того, как мы с командой Turum-burum провели UX аудит. А затем на основе данных аналитики внесли корректировки в UX дизайн, которые дали хорошие результаты.

UX аудит и поддержка по внедрению улучшений

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

Компания наняла Turum-burum для выполнения следующих задач:

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

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

Процесс реализации проекта состоял из трех основных этапов:

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

После завершения аудита мы сделали следующее:

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

Ключевые проблемы и рекомендации

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

Тем не менее, мы обнаружили несколько проблем, которые требовали решения. Среди них были ошибки интерфейса, которые отрицательно сказывались на ключевых бизнес-показателях и препятствовали конверсии. К основным точкам роста относятся:

• Повышение конверсии мобильной версии сайта.
• Увеличение количества просмотров страниц с описанием товара.
• Увеличение скорости добавления товара в корзину в десктопной версии.
• Сведение к минимуму количества брошенных корзин.
• Увеличение процента оформленных заказов.

Наиболее критическими точками, которые мы обнаружили, были следующие:

• Структура каталога.
• Отсутствие предотвращения ошибок пользователей.
• Подводные камни на странице оформления заказа.
• Отсутствие акцентов в элементах хедера.
• Отсутствие раздела «Недавно просмотренные».
• Неразборчивые названия категорий.

Все эти проблемы изложены и подробно описаны ниже. Давайте приступим к их анализу!

Структура каталога

Проблема

В каталоге было представлено много совершенно разных товаров. Таким образом пользователям было сложно находить то, что им нужно. На основе данных тепловых карт стало понятно, что люди часто прибегали к фильтрации — выбирали размер (возраст) и пол. Те, кто никогда не пользовался фильтром, с трудом находили нужные товары в каталоге. По данным аналитики только 37% покупателей нашли в каталоге товар, который искали, заинтересовались им и решили перейти на страницу с описанием товара.

‍

Рекомендации

Для того, чтобы упростить поиск товаров, необходимо добавить быстрые теги с группами (например, Мальчики, Девочки, Малыши, Дети, Подростки; Шорты, Костюмы, Жилеты). Также рекомендуется по умолчанию показывать расширенный фильтр с указанием размеров одежды и пола, чтобы пользователи могли его быстро найти и воспользоваться им. Это должно сократить время, необходимое для поиска. В мобильном телефоне кнопка фильтра всегда должна оставаться в фиксированном положении по мере прокрутки пользователем страницы вниз.

‍

Ошибки пользователей

Проблема

Если пользователи нажимали кнопку «Добавить в корзину» без предварительного выбора размера, то уведомление об ошибке не появлялось. Это вынуждало их вернуться, выбрать размер и повторно нажать кнопку «Добавить в корзину».

Рекомендация

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

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

Решение: внедрение этой функции в мобильную версию сайта.

Подводные камни на странице оформления заказа

Проблема

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

Рекомендация

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

‍

Отсутствие акцентов в элементах хедера

Проблема

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

Рекомендации

• Следует визуально разделить такие элементы, как «Валюта», «Избранное», «Поиск», «Личный кабинет» и «Корзина».
• Необходимо в первую очередь выделить категории каталога.
• Пункты «Валюта» и «Избранное» следует расположить с одной стороны от логотипа, а  «Поиск», «Личный кабинет» и «Корзину» — с другой. Это поможет пользователям сразу увидеть наиболее важные части сайта и сократит время на поиск необходимых товаров.

Проблема

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

Рекомендация

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

Отсутствие раздела «Недавно просмотренные»

Проблема

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

Рекомендация

Следует добавить карточки с недавно просмотренными товарами. В составе каждой из них должна быть кнопка «Добавить в корзину». Этот раздел следует разместить в десктопной версии и закрепить в мобильной. Это поможет пользователям быстрее находить интересующие их товары.

Неразборчивые названия категорий

Проблема

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

Рекомендация

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

Результаты работы, проделанной на сайте Sunuva

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

«Работа  Turum-burum привела к увеличению конверсии и посещаемости сайта. Проактивные и внимательные к деталям, они нашли время, чтобы изучить все доступные данные, предоставить объяснение всех проблем и оптимальные решения. Они оказывали всестороннюю поддержку и были прозрачными во всех своих действиях».

— Дженнифер Талли, менеджер интернет-магазина, Sunuva

Какие изменения необходимо внести в UX/UI, чтобы увеличить коэффициент конверсии?

Мы покажем вам семь простых шагов, которые вы можете выполнить, чтобы самостоятельно провести UX аудит. Он поможет найти и устранить некоторые ошибки интерфейса:

1. Исследуйте пути пользователей. Совершайте покупки, как будто вы посетитель сайта.
2. Анализируйте микро- и макроконверсии. Используйте Google Analytics и Google Tag Manager.
3. Проводите исследование потенциальных покупателей. Каков портрет вашей целевой аудитории?
4. Проводите технический аудит. Все ли работает на сайте?
5. Проверяйте тепловые карты и карты кликов. Для этих целей могут быть полезны Hotjar и Plerdy.
6. Отсматривайте записи сеансов пользователей.
7. Анализируйте отзывы (Hotjar, Survio).

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

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