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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

screenshot-at-aug-27-12-04-52.png?x53044Визуальное представление концепции будущего сайтаscreenshot-at-aug-27-12-05-39.png?x53044

В качестве основных цветов были выбраны приглушенные оттенки зеленого, синего и оранжевого.

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

screenshot-at-aug-27-12-06-17.png?x53044

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

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

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

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

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

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

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

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

screenshot-at-aug-27-12-07-04.png?x53044

Так выглядела старая версия главной страницы сайта

Решения:

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

screenshot-at-aug-27-12-08-20.png?x53044

Главная страница интернет-магазина Perfumer после редизайна

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

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

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

screenshot-at-aug-27-12-09-07.png?x53044

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

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

screenshot-at-aug-27-12-09-52.png?x53044Этот мелкий, но важный нюанс, позволяет поддерживать сайт свежим и стильным. А также положительно влияет на вовлеченность и лояльность к бренду. 

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

screenshot-at-aug-27-12-11-01.png?x53044screenshot-at-aug-27-12-11-13.png?x53044

При наведении на иконку, показываем вариант альтернативы аромата

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

screenshot-at-aug-27-12-12-16.png?x53044

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

screenshot-at-aug-27-12-13-03.png?x53044

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

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

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

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

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

screenshot-at-aug-27-12-13-59.png?x53044screenshot-at-aug-27-12-14-12.png?x53044Так выглядела старая версия страницы выдачи сайта

Решения:

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

screenshot-at-aug-27-12-16-08.png?x53044Для простой навигации внутри категорий в парфюмерии добавили вверху специальный переключатель, чтобы быстро переходить между сериями. 

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

screenshot-at-aug-27-12-16-19.png?x53044В нижней части страницы также предусмотрели переходы на другие категории, чтобы человек не уходил со страницы, если ему ничего не понравилось.

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

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

screenshot-at-aug-27-12-17-27.png?x53044

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

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

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

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

screenshot-at-aug-27-12-18-26.png?x53044Так выглядела старая версия карточки товара

Решения:

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

screenshot-at-aug-27-12-19-10.png?x53044Выводим ключевую информацию: пол, объем, количество в ящике, цену, характеристики аромата.

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

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

screenshot-at-aug-27-12-19-47.png?x53044Также в виде ссылки даем информацию, как сделать заказ.

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

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

screenshot-at-aug-27-12-20-25.png?x53044

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

screenshot-at-aug-27-12-20-54.png?x53044

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

Чекаут

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

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

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

screenshot-at-aug-27-12-21-32.png?x53044Так выглядела старая версия страницы оформления заказа

Решения:

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

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

screenshot-at-aug-27-12-22-13.png?x53044В правой части закрепили »Корзину» с возможностью в любой момент отредактировать заказ и добавить стикеры для ароматов. На каждом этапе оформления заказа пользователь видит актуальную сумму заказа и стоимость доставки.

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

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

screenshot-at-aug-27-12-23-12.png?x53044

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

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

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

screenshot-at-aug-27-12-22-35.png?x53044Акцентируем внимание на кнопке На главную, чтобы пользователь продолжил изучение сайте, а не покинул его сразу после завершения заказа

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

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

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

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

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

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

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

Источник 

Перейти на сайт

Полный текст статьи читайте на CMS Magazine

Опубликовано: 21 сентября 2021
↓