Как коэффициент транзакций увеличился на 32% после создания нового сайта для Perfumer

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

Компания на рынке с 2000 года, относится к B2B сегменту, т.е. ориентирована на оптовые продажи.

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

Перед нами стояла задача создать интернет-магазин, в котором:

1. будет удобно оформить большой оптовый заказ;
2. пользователь сможет быстро отследить свой заказ;
3. будет возможность повторить ранее сделанный заказ;
4. каждая страница будет вовлекать пользователя в онлайн покупку на сайте, а не по телефону, что позволит разгрузить колл центр;
5. сайт будет отвечать позиционированию бренда, как известный, проверенный, надежный партнер по бизнесу с качественной оригинальной продукцией.

Поиск вектора движения

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

1. юзабилити аудит сайта
2. интервьюирование представителей бизнеса

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

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

Создание концепции проекта

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

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

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

Мы создали дизайн макеты всех страниц, а компания WebHome успешно реализовала их в разработке.

Решения, которые были приняты в интерфейсе

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

Главная страница: вовлекающие точки входа и структурирование при помощи кастомных элементов

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

1. Шапка очень большая, занимает 1/3 экрана.
2. В бургере находятся только информационные блоки, нет входа в личный кабинет. Категории, которые должны быть доступны из любой части страницы, доступны только на первом экране.
3. Разные подкатегории в каталоге и на странице выдачи
4. Непривычное расположение элементов на странице: каталога, фильтров и сортировки, поиска
5. Отсутствие просмотренных и сохраненных товаров

Решения:

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

Оптимизировали размеры шапки, расположили в ней все необходимые ключевые элементы: иконки «Просмотренное» и «Избранное», доступ к личному кабинету, возможность быстро отследить заказ, акцентную корзину.

Центрировали лого, так как ниша приближена к fashion тематике. Таким образом, мы обращаем внимание пользователей на значимость и историю бренда — на рынке более 20-ти лет.

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

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

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

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

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

Гибкая система поиска облегчает и ускоряет процесс выбора покупки.

Страница выдачи: приоритизация фильтров и рациональное использование пространства

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

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

Решения:

Так как мы имели дело с большим количеством фильтров, мы оставили их в боковой левой панели. Согласно данным аналитики и наблюдениям бизнеса в приоритет поставили опции отфильтровать «Новинки» и «Хиты продаж». А уже далее вывели наименование коллекций, характеристики ароматов и аналоги брендов.

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

Таким образом мы подталкиваем пользователя не останавливать свой сеанс, а продолжать двигаться по навигации.

В адаптиве разместили карточки товара по две в строку. Акцентировали внимание на кнопке фильтров. Панель с фильтрами открывается в отдельном окне. Окно сворачивается после нажатия на кнопку «Применить». Также дали пользователям возможность положить товар в корзину непосредственно с выдачи.

Карточка товара: блочная структура с доступной исчерпывающей информацией

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

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

Решения:

В новой карточке товара вывели крупную фотографию товара и изображение альтернативы. Структурировали ключевую информацию, визуально ее разбили на блоки для лучшего восприятия. Акцентировали call-to-action.

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

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

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

Дополнили карточку товара инструментами cross-sale и upsell: «Похожие ароматы», «Ароматы в других коллекциях», «С этим товаром покупают».

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

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

Чекаут

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

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

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

Решения:

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

1. ввод персональных данных;
2. доставка и оплата;
3. подтверждение заказа.

На первом шаге оформления заказа постоянные покупатели авторизуются по номеру телефона и паролю, а новым клиентам необходимо указать имя, телефон и e-mail.

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

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

В результате завершения заказа выводим пользователю thank you page, где информируем клиента, что будет происходить далее. Даем ссылку на личный кабинет и напоминаем, что там можно отследить статус выполнения заказа.

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

Результаты работы над интерфейсом на сайте Perfumer

В дизайне интернет-магазина Perfumer мы внедрили множество проверенных практикой решений:

1. Сконцентрировали на главной странице максимальное количество точек входа на другие разделы сайта.
2. Структурировали информацию в целом на сайте.
3. Наладили корректную работу поиска и инструментов фильтрации и сортировки.
4. Внедрили cross-sell и upsell инструменты.

В результате совместных усилий команд дизайнеров «Турум-бурум», разработчиков WebHome и бизнеса Perfumer, мы не только сделали интерфейс удобным для пользователей, но и повлияли на ключевые показатели сайта:

Коэффициент транзакций вырос в десктоп версии на 23,97%, в мобайл —на 43,42%.

Источник статьи