Как мы раскрыли потенциал сайта для магазина косметики и увеличили коэффициент конверсии на 31%. Кейс Cosmic

О проекте и задаче

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

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

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

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

Стратегия быстрых перемен: улучшаем дизайн интернет магазина косметики COSMIC 

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

Во втором и третьем спринтах прорабатывали ошибки с более низким приоритетом и дополнительные пожелания собственника.

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

Карточка товара: акцентная СТА и скидочные предложения

Вот часть критических ошибок юзабилити, которые были выявлены на странице товара:

• Нарушение иерархии элементов на странице. 

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

 

Отсутствовал свайп при просмотре фотографий, что затрудняло знакомство пользователя с продуктом.

• Отсутствие главной СТА.

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

Код товара и отзывы терялись среди характеристик. Пользователи могли не замечать информацию.

• Недостаточно информации для принятия решения о покупке

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

Решения, которые были приняты:

В первую очередь в карточке товара акцентировали основную СТА — кнопку Купить. Подняли ее выше. Переработали структуру страницы и иерархию элементов в целом. 

Четко донесли механизм работы скидочных предложений

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

Сделали заметными прочие маркетинговые механики.

Выделили отзывы, так как по данным аналитики большинство пользователи читают отзывы, но до них доходит около 40% пользователей в десктоп и меньше 30% в мобайл. Поэтому разместили более заметную ссылку на блок с мнением покупателей. 

Социальное доказательство для ниши косметики имеет значительное влияние на принятие решения пользователем. На карте скролла Хотжар видно, что только 27 % пользователей доскролливают до блока с отзывами.

Результат:

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

Чекаут: блочная структура, минимум полей

Согласно данным аналитики, более 35% пользователей не завершали процесс оформления заказа. Таким образом, оптимизация чекаута — потенциальная точкой роста.

Вот, на что мы обратили внимание в процессе анализа страницы оформления заказа: 

• Множество точек выхода.

Полноценные шапка и футер могли уводить пользователей с чекаута.

• Нерациональное использование пространства. 

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

• Низкий уровень заботы о пользователях.

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

 На мобайле пользователям могло быть сложно выбрать мелкие элементы даты

Решения, которые были приняты:

Чекаут упростили, структурировали, сделали правильную визуальную иерархию.

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

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

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

Прозрачно описали условия доставки и оплаты для минимизации разногласий по этим вопросам.

Результат:

Оптимизация страницы чекаута позволила увеличить количество завершенных заказов на 7%.

Главная страница и страница выдачи: правильное распределение предложений и преимуществ

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

• Плохо адаптированный контент.

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

В мобайле на баннеры кликали в 2 раза меньше, чем в десктоп. Интерес к последующим баннерам падал. 

• Чрезмерно крупные плитки товара.

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

Нерациональное использование пространства -- плитка товара занимала весь экран

• Неочевидная работа фильтров.

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

Не вынесены примененные фильтры

Решения, которые были приняты:

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

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

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

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

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

Результат: 

Конверсия в сегменте пользователей, которые начали свой путь на сайте с главной страницы, увеличилась на 21%. 

ESR подход в действии на сайте для магазина косметики

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

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

Так в результате оптимизации интерфейса коэффициента конверсии увеличился на 31%.