Студия Турум-бурум

Оптимизация конверсии интернет-магазина, разработанного на шаблоне: Кейс Emmelie Delage

Оптимизация конверсии интернет-магазина, разработанного на шаблоне: Кейс Emmelie Delage
627

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

С чего все начиналось: О проекте Emmelie Delage

Emmelie Delage — украинский бренд дизайнерской обуви, который создали две девушки, Яна и Даша. Они организовали собственное производство и самостоятельно разрабатывают модели и лекала своих товаров. Первые продажи начались через Instagram, открыли оффлайн точки в Харькове и Киеве, после чего было принято решение запустить полноценный сайт. Сайт был создан на основе шаблона Битрикс Аспро: Next, который должен был покрывать все базовые потребности бизнеса.

Но Яна и Даша столкнулись с тем, что оффлайн точки показывали хорошую эффективность, а в онлайн хорошо работал только Instagram, сайт не приносил желаемых результатов.

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

photo_2021-01-06_12-32-52.jpg

Денис Студенников, руководитель отдела UX/UI, знакомится с особенностями работы оффлайн магазина и бренда в целом

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

Особенность проекта:

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

Таким образом, перед нами стояли следующие задачи:

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

Работа над сайтом 

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

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


 начала работу в формате: берем проблему - создаем макет решения - делаем верстку и разработку - реализовываем все на сайте.
Этапы работ на каждом из спринтов

Всего было выделено 4 спринта, средняя продолжительность каждого спринта составила 2 недели.  

Т.е. к шаблонному проекту применили эволюционный подход (ESR подход), так как в целом шаблон покрывал все задачи и бизнес процессы, но в нем не были учтены особенности ЦА, что значительно снижало конверсии.

Как мы прорабатывали гипотезы с высокой степенью критичности

Главная страница

Начали работу с главной страницы, так как по данным аналитики 70% пользователей при переходе на сайт попадают на main page и важно сформировать у них положительное первое впечатление.

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

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

Главная страница интернет-магазина Emmelie Delage до внесения правок
Главная страница интернет-магазина Emmelie Delage до внесения правок

Решение:

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

Блок с конкурентными преимуществами на главной странице интернет-магазина Emmelie Delage
Блок с конкурентными преимуществами на главной странице интернет-магазина Emmelie Delage

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

Отсутствие приоритезации блоков меню в старом дизайне главной страницы 
Отсутствие приоритезации блоков меню в старом дизайне главной страницы

Решение:

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


Визуальный акцент в меню сместили на каталог
Визуальный акцент в меню сместили на каталог 

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

  • В мобайле блоки меню были приоритезированы не эффективно. Мы увидели, что по данным аналитики, лишь 19% пользователей являются постоянными. Поэтому отдавать разделу «Войти/Регистрация» высший приоритет было нецелесообразно.
Так располагались блоки меню в мобильной версии сайта до внесения правок
Так располагались блоки меню в мобильной версии сайта до внесения правок

Решение:

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

Приоритезировали блоки меню в соответствии с данными Google Analytics, сделали акцент на каталоге 
Приоритезировали блоки меню в соответствии с данными Google Analytics, сделали акцент на каталоге

В результате с главной страницы на страницу выдачи в mobile стало переходить на 71% больше пользователей, в desktop  на 14%.


Выдача товара

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

  • Пользователи на первом экране не видели, что фильтры применены. Было незаметно, что выдача не полная и пользователи могли не найти товар.

Работа фильтров в старой версии сайта
Работа фильтров в старой версии сайта

Решение:

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

В верхней части панели фильтров отображаем, какие фильтры применены к выдаче
В верхней части панели фильтров отображаем, какие фильтры применены к выдаче

  • В мобайле при применении фильтров, панель фильтров не скрывалась. Пользователи не понимали, применились ли фильтры. 

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

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

Кнопка сброса фильтров была расположена в нижней части панели
Кнопка сброса фильтров была расположена в нижней части панели

Решение:

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

Панель фильтров автоматически сворачивается при нажатии на кнопку «Показать»
Панель фильтров автоматически сворачивается при нажатии на кнопку «Показать»

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

Карточка товара в мобильной версии не помещалась на один экран
Карточка товара в мобильной версии не помещалась на один экран

Решение:

Сократили длину карточки товара и разместили по две в строку. Теперь пользователи могут просмотреть в 4 раза больше товаров.

Сократили длину карточки товара и разместили по две в строку
Сократили длину карточки товара и разместили по две в строку

Согласно данным аналитики, с выдачи на карточку товара в mobile стало переходить на 30% пользователей, в desktop — на 6%.


Карточка товара

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

  • В мобайле кнопка добавления товара в корзину находилась слишком низко, что приводило к тому, что пользователи просто не доскролливали до нее.

Кнопка добавления товара в корзину была расположена в самом низу страницы
Кнопка добавления товара в корзину была расположена в самом низу страницы

Решение:

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

Сделали прилипающую кнопку добавления товара в корзину
Сделали прилипающую кнопку добавления товара в корзину

  • Кнопка покупки в 1 клик уводила пользователя с карточки товара. Если пользователь передумывал заказывать в один клик, он не мог быстро  вернуться на карточку товара и продолжить покупки.

Функция «Купить в 1 клик» уводила пользователя со страницы товара
Функция «Купить в 1 клик» уводила пользователя со страницы товара

Решение:

Сделали покупку в 1 клик в виде поп-ап окна. Таким образом, передумав совершать покупку пользователь остается на странице товара и может продолжить знакомиться с продукцией.

При нажатии кнопки «Купить в 1 клик», пользователю выводится соответствующий поп-ап
При нажатии кнопки «Купить в 1 клик», пользователю выводится соответствующий поп-ап

  • Система по умолчанию выбирала размер обуви, которого не было в наличии. Открывая карточку товара, пользователь видел кнопку «Подписаться» вместо «Купить». 

Кнопка «Подписаться» вводила пользователей в заблуждение
Кнопка «Подписаться»  вводила пользователей в заблуждение

Решение:

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

В результате оптимизации карточки товара на 28% больше пользователей стали просматривать корзину (соответственно, добавлять товары в корзину).

Корзина и чекаут

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

Ключевые ошибки, которые были исправлены:

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

Кнопка Офрмить заказ была не доступна на первом экране при большом количестве товаров в корзине
Кнопка «Оформить заказ» была не доступна на первом экране при большом количестве товаров в корзине

Решение:

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

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

Перенесли основные кнопки на первый экран

Этот спринт еще в рабочей стадии, больше результатов покажем в ближайшем будущем.

Увеличение конверсии интернет-магазина: от шаблона к уникальному дизайну

Таким образом, благодаря постепенным изменениям интерфейса, интернет-магазин Emmelie Delage из рядового шаблонного проекта стал маленькими шагами превращаться в кастомный, клиентоориентированный, рабочий канал продаж. 

После оптимизация ключевых страниц сайта карточки товаров стали просматривать на 40% больше пользователей.

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

Поэтому если шаблон на 70-80% покрывает бизнес процессы проекта, тогда его использование оправдано. Он позволит быстро запустить бизнес и начать продавать, а уже в дальнейшем приступить к увеличению конверсии интернет-магазина и инвестировать деньги в развитие сайта.

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




Оставьте номер и мы перезвоним
Спасибо!
Мы скоро свяжемся с Вами.
Напишите нам
Выберите направление:
    Спасибо!
    Мы скоро свяжемся с Вами.