![](https://cdn.cases.media/image/wide/142a6eaf-ab7e-4847-8928-f431fb8b5ddc.png)
Как коэффициент транзакций увеличился на 32% после создания нового сайта для Perfumer
О компании Perfumer и задачах бизнеса
Компания Perfumer — официальный дилер парфюмерной продукции ТМ Reni и крупнейший поставщик флаконов в Украине. Бренд создает оригинальные запахи, аналогичные известным брендам.
Компания на рынке с 2000 года, относится к B2B сегменту, т.е. ориентирована на оптовые продажи.
Собственники были обеспокоены низкими показателями эффективности текущего сайта и обратились к нам, как к экспертам по вопросам дизайна и улучшения юзабилити сайта.
Перед нами стояла задача создать интернет-магазин, в котором:
- будет удобно оформить большой оптовый заказ;
- пользователь сможет быстро отследить свой заказ;
- будет возможность повторить ранее сделанный заказ;
- каждая страница будет вовлекать пользователя в онлайн покупку на сайте, а не по телефону, что позволит разгрузить колл центр;
- сайт будет отвечать позиционированию бренда, как известный, проверенный, надежный партнер по бизнесу с качественной оригинальной продукцией.
Поиск вектора движения
Ниша парфюмерии — это был новый опыт для нас. Хоть ранее мы много работали со смежными тематиками — косметической нишей и нишей fashion, но нам было важно узнать более тонкие нюансы бизнеса. Поэтому изучение и погружение в особенности проекта состояло из нескольких этапов:
- интервьюирование представителей бизнеса
В результате анализа данных аналитики, записей Hotjar, карт кликов, выявили множество нюансов, проблемных мест с версткой. Прежний сайт компании устарел, огромное количество плохо структурированного контента приводило к тому, что пользователи часто не находили нужную информацию: не доскролливали до ключевых моментов, не понимали как оформить заказ, не могли разобраться в особенностях товаров.
Мы составили список критических ошибок интерфейса, которые отрицательно влияли на ключевые метрики. Больше всего проблем было выявлено в адаптивной версии. Поэтому было решено провести редизайн сайта, руководствуясь при этом принципом mobile-first.
Создание концепции проекта
Так как проект относится к B2B сегменту, сайт необходимо было создать простым и минималистичным. Кроме функции продажи, он должен выполнять роль каталога, чтобы пользователь мог максимально оперативно получить информации о товаре. Т.е. главное на сайте — это контент.
![](https://cdn.cases.media/image/wide/3d4985e9-f059-43dd-908a-f70d4a171b22.png)
![](https://cdn.cases.media/image/wide/75fd6d5a-2693-430c-8737-4631bf4d56c5.png)
Чтобы подчеркнуть выбранный вектор минималистичности, мы использовали в интерфейсе множество кастомных графических элементов.
![](https://cdn.cases.media/image/wide/4b6ce006-fce0-4101-b5b8-bea169926123.png)
Со стороны компании Perfumer была максимальная вовлеченность, активное участие в принятии решений и согласовании концепции принимали менеджеры и собственник компании Алексей. Поэтому мы быстро перешли к этапу реализации.
Мы создали дизайн макеты всех страниц, а компания WebHome успешно реализовала их в разработке.
Решения, которые были приняты в интерфейсе
Пройдемся по ключевым страницам интернет-магазина Perfumer и еще раз убедимся в том, как исправление, казалось бы мелких ошибок интерфейса влияет на качество взаимодействия пользователей с интерфейсом, а значит и на ключевые показатели сайта.
Главная страница: вовлекающие точки входа и структурирование при помощи кастомных элементов
Наиболее критическими ошибками, над которыми мы начали работу в первую очередь, были следующие:
Шапка очень большая, занимает 1/3 экрана.
- В бургере находятся только информационные блоки, нет входа в личный кабинет. Категории, которые должны быть доступны из любой части страницы, доступны только на первом экране.
- Разные подкатегории в каталоге и на странице выдачи
- Непривычное расположение элементов на странице: каталога, фильтров и сортировки, поиска
- Отсутствие просмотренных и сохраненных товаров
![](https://cdn.cases.media/image/wide/fdeb4259-8723-42d3-921b-a8f3ce901fee.png)
Решения:
Переработали структуру главной страницы, усилили точки входа, дали возможность бизнесу коммуницировать с пользователями в надшапочном баннере: с первых секунд взаимодействия сообщать о различных акциях, чтобы мотивировать их пойти дальше.
![](https://cdn.cases.media/image/wide/2db1f394-af06-407c-834c-d6e077182041.png)
Оптимизировали размеры шапки, расположили в ней все необходимые ключевые элементы: иконки «Просмотренное» и «Избранное», доступ к личному кабинету, возможность быстро отследить заказ, акцентную корзину.
Центрировали лого, так как ниша приближена к fashion тематике. Таким образом, мы обращаем внимание пользователей на значимость и историю бренда — на рынке более 20-ти лет.
Навигацию оформили в виде горизонтального меню на десктопе и в фиде бургера в адаптиве. Пересмотрели приоритизацию блоков, визуально выделили раздел с акциями. C помощью кастомных иконок подчеркнули внешний вид флаконов для разливной продукции, так как их дизайн разрабатывался специально для компании Perfumer студией Arriba.
![](https://cdn.cases.media/image/wide/ac9678c2-e3e6-42d3-ae66-0980962020fb.png)
Мы задали стилистику баннеров и создали специальный гайд для их правильного ведения. Теперь команда маркетологов интернет-магазина может самостоятельно обновлять содержание баннеров, не нарушая общую стилистику сайта.
![](https://cdn.cases.media/image/wide/2c36a9ac-b8d0-418d-bd51-8824863474ba.png)
Вовлекаем пользователя точками входа с яркими, эмоциональными фотографиями и показываем товар “лицом”, чтобы люди видели реальную информацию.
![](https://cdn.cases.media/image/wide/07af0ae0-82ce-43e8-ad5b-569c6d9793d6.png)
![](https://cdn.cases.media/image/wide/89fe29f9-d7d4-47a9-9da7-7f726f3c73e6.png)
Также Perfumer предлагает специальные пакетные предложения со стартовыми наборами для тех, кто хочет начать сотрудничество с брендом. Мы изучили особенности каждого из пакетов и, по аналогии с предыдущими пунктами меню, подали информацию структурировано, с использованием иллюстраций, для лучшего восприятия.
![](https://cdn.cases.media/image/wide/4cb79ce7-705c-46f7-8e8c-408da94b1e1d.png)
Особое внимание уделили работе поиска. Продумали удобный полнотекстовый поиск, позволяющий искать товары по частичному совпадению наименования товаров и артикулу.
![](https://cdn.cases.media/image/wide/af2807f8-0d5f-484a-a823-21a128837194.png)
Гибкая система поиска облегчает и ускоряет процесс выбора покупки.
Страница выдачи: приоритизация фильтров и рациональное использование пространства
После главной страницы стали дальше двигаться по воронке. На странице выдачи мы обнаружили такие основные проблемы:
некорректная работа инструмента сортировки;
- нерационально использовано пространство в мобайл, демонстрация по одной плитке товара в строке, хотя есть свободное место;
- фильтры находятся на втором экране, что ограничивает доступ к ним.
![](https://cdn.cases.media/image/wide/629f2373-d8f9-4a17-afc0-63d66be45135.png)
![](https://cdn.cases.media/image/wide/0a619af1-3a2f-4077-9930-3fc45f213e82.png)
Решения:
Так как мы имели дело с большим количеством фильтров, мы оставили их в боковой левой панели. Согласно данным аналитики и наблюдениям бизнеса в приоритет поставили опции отфильтровать «Новинки» и «Хиты продаж». А уже далее вывели наименование коллекций, характеристики ароматов и аналоги брендов.
![](https://cdn.cases.media/image/wide/5fedb926-9859-4467-9b09-58f68ef6e5aa.png)
В блок с фильтрами добавили вверху слот, в котором пользователь сразу видит, какие фильтры применены и может быстро их очистить.
![](https://cdn.cases.media/image/wide/48647961-0648-4388-9ced-b9d7fbf5dad0.png)
Таким образом мы подталкиваем пользователя не останавливать свой сеанс, а продолжать двигаться по навигации.
В адаптиве разместили карточки товара по две в строку. Акцентировали внимание на кнопке фильтров. Панель с фильтрами открывается в отдельном окне. Окно сворачивается после нажатия на кнопку «Применить». Также дали пользователям возможность положить товар в корзину непосредственно с выдачи.
![](https://cdn.cases.media/image/wide/88514a79-9d8f-4b08-8927-948e77d20522.png)
Карточка товара: блочная структура с доступной исчерпывающей информацией
Следующим шагом воронки является карточка товара. Вот основные ошибки, которые требовали исправления с целью оптимизации конверсий:
в мобайле кнопка добавления товара в корзину находилась слишком низко, что приводило к тому, что пользователи просто не доскролливали до нее;
- информация о товаре, которую чаще всего смотрят пользователи, находилась очень низко;
- оплата и доставка не выглядели как кликабельные ссылки с доп. информацией;
- выбор цвета флакона далеко от картинки, пользователям приходилось скролить, чтобы просмотреть возможные опции;
- пользователи не понимали, как оформить заказ, и часто перезванивали в колл-центр.
![](https://cdn.cases.media/image/wide/e02b8a26-9676-41e1-bf6b-d7ce46736fc1.png)
Решения:
В новой карточке товара вывели крупную фотографию товара и изображение альтернативы. Структурировали ключевую информацию, визуально ее разбили на блоки для лучшего восприятия. Акцентировали call-to-action.
![](https://cdn.cases.media/image/wide/b2e3313c-6e0c-42a9-a484-e45d955c18cc.png)
Теперь любой пользователь, в том числе и посредник, который реализует эту продукцию, может воспользоваться сайтом как каталогом и получить информацию о каждом аромате. Также добавили стрелочки, которые позволяют перелистывать страницы каталога и быстро просматривать все ароматы коллекции.
Так как многие не находили информацию о товаре, с первого экрана дали пользователю ссылку на описание продукта: добавили пункт «Описание» со ссылкой «Читать», которая переводит пользователя на ту часть страницы, где размещены полные характеристики.
![](https://cdn.cases.media/image/wide/b027a8b4-4201-4511-9fa7-3901b450e1f2.png)
Таким образом, помогаем пользователю двигаться дальше по воронке, увеличивать глубину просмотра страницы и продолжительность сеанса.
Дополнили карточку товара инструментами cross-sale и upsell: «Похожие ароматы», «Ароматы в других коллекциях», «С этим товаром покупают».
![](https://cdn.cases.media/image/wide/46120116-d16b-4018-9d39-1df6916783ee.png)
Для страницы с флаконами внедрили функционал покупки не штуками, а ящиками. Пользователь может одним кликом положить в корзину сразу ящик емкостей.
![](https://cdn.cases.media/image/wide/be375817-23fd-4ce8-baee-9e18cf28589c.png)
Всячески ведем пользователя за руку для совершения заказа.
Чекаут
Заключительный этап пути пользователя, где важно сделать процесс максимально простым и удобным, чтобы ничего не помешало пользователю завершить заказ.
Ключевые ошибки, которые были исправлены:
Полноценная шапка и категории на чекауте.
- При самовывозе не указаны адреса магазинов.
- На шагах чекаута не указана стоимость заказа, особенно, где указана минимальная стоимость для бесплатной доставки.
![](https://cdn.cases.media/image/wide/b56c6f00-32c7-4a46-9440-e3ae8fc242f3.png)
Решения:
Создали простой и понятный чекаут, разбили его на смысловые блоки и реализовали в 3 шага:
ввод персональных данных;
- доставка и оплата;
- подтверждение заказа.
![](https://cdn.cases.media/image/wide/3e213773-0106-46ed-a3d3-edb6008fc57d.png)
На первом шаге оформления заказа постоянные покупатели авторизуются по номеру телефона и паролю, а новым клиентам необходимо указать имя, телефон и e-mail.
На втором шаге пользователю необходимо выбрать способ доставки и оплаты.
![](https://cdn.cases.media/image/wide/b94ab37c-197c-4893-982e-ae09775e1005.png)
На каждом из шагов информируем пользователя, что будет после нажатия той или иной кнопки. Так на первом шаге вместо кнопки «Далее» реализовали кнопку «К доставке и оплате», на втором шаге — «К подтверждению заказа».
В результате завершения заказа выводим пользователю thank you page, где информируем клиента, что будет происходить далее. Даем ссылку на личный кабинет и напоминаем, что там можно отследить статус выполнения заказа.
![](https://cdn.cases.media/image/wide/d76a6300-8e26-4a4d-ac17-badf3291ea38.png)
Оформление заказа — это финальный этап пользовательского пути и важно, чтобы ничего не помешало покупателю завершить сделку. Поэтому мы максимально убрали из шапки возможные точки выхода.
Результаты работы над интерфейсом на сайте Perfumer
В дизайне интернет-магазина Perfumer мы внедрили множество проверенных практикой решений:
Сконцентрировали на главной странице максимальное количество точек входа на другие разделы сайта.
- Структурировали информацию в целом на сайте.
- Наладили корректную работу поиска и инструментов фильтрации и сортировки.
- Внедрили cross-sell и upsell инструменты.
В результате совместных усилий команд дизайнеров «Турум-бурум», разработчиков WebHome и бизнеса Perfumer, мы не только сделали интерфейс удобным для пользователей, но и повлияли на ключевые показатели сайта:
Коэффициент транзакций вырос в десктоп версии на 23,97%, в мобайл — на 43,42%.
Это еще раз подтверждает тот факт, что интерфейс — важная составляющая бизнеса, над которой нужно постоянно работать. Качественная работа сайта обеспечит эффективную конвертацию трафика в доход компании.