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

Какие особенности проектирования интернет-магазина влияют на ключевые показатели сайта? В колонке для AIN.UA руководитель UX/UI отдела компании «Турум-бурум» Денис Студенников рассказал детали изменения интерфейса парфюмерной В2В компании Perfumer.

О компании Perfumer и задачах бизнеса

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

Решения:

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

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

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

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

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

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


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

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

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

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

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

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


Решения:

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

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

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

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

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

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

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

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

Решения:

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

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

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

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

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

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

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

Чекаут

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

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

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

Решения:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Денис Студенников, руководитель UX/UI отдела компании Турум-бурум

Источник: ain.ua

Читайте также

Вверх