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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Решение:

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

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

Решение:

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

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

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

Решение:

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

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

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

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

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

Решение:

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

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

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

Решение:

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

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

Решение:

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

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

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

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

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

Решение:

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

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

Решение:

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

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

Решение:

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

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

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

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

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

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

Решение:

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

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

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

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

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

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

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

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

‍