ЗаказчикКомпания Perfumer — официальный дилер парфюмерной продукции ТМ Reni и крупнейший поставщик флаконов в Украине. Бренд создает оригинальные запахи, аналогичные известным брендамЗадачаРедизайн интернет-магазина с целью увеличить прибыль
Какие особенности проектирования интернет-магазина влияют на ключевые показатели сайта? Руководитель UX/UI отдела компании «Турум-бурум» Денис Студенников рассказал детали изменения интерфейса парфюмерной В2В компании Perfumer.
О компании Perfumer и задачах бизнеса
Компания Perfumer — официальный дилер парфюмерной продукции ТМ Reni и крупнейший поставщик флаконов в Украине. Бренд создает оригинальные запахи, аналогичные известным брендам.
Компания на рынке с 2000 года, относится к B2B сегменту, т.е. ориентирована на оптовые продажи.
Собственники были обеспокоены низкими показателями эффективности текущего сайта и обратились к нам, как к экспертам по вопросам дизайна и улучшения юзабилити сайта.
Перед нами стояла задача создать интернет-магазин, в котором:
- будет удобно оформить большой оптовый заказ;
- пользователь сможет быстро отследить свой заказ;
- будет возможность повторить ранее сделанный заказ;
- каждая страница будет вовлекать пользователя в онлайн покупку на сайте, а не по телефону, что позволит разгрузить колл центр;
- сайт будет отвечать позиционированию бренда, как известный, проверенный, надежный партнер по бизнесу с качественной оригинальной продукцией.
Поиск вектора движения
Ниша парфюмерии — это был новый опыт для нас. Хоть ранее мы много работали со смежными тематиками — косметической нишей и нишей fashion, но нам было важно узнать более тонкие нюансы бизнеса. Поэтому изучение и погружение в особенности проекта состояло из нескольких этапов:
В результате анализа данных аналитики, записей Hotjar, карт кликов, выявили множество нюансов, проблемных мест с версткой. Прежний сайт компании устарел, огромное количество плохо структурированного контента приводило к тому, что пользователи часто не находили нужную информацию: не доскролливали до ключевых моментов, не понимали как оформить заказ, не могли разобраться в особенностях товаров.
Мы составили список критических ошибок интерфейса, которые отрицательно влияли на ключевые метрики. Больше всего проблем было выявлено в адаптивной версии. Поэтому было решено провести редизайн сайта, руководствуясь при этом принципом mobile-first.
Создание концепции проекта
Так как проект относится к B2B сегменту, сайт необходимо было создать простым и минималистичным. Кроме функции продажи, он должен выполнять роль каталога, чтобы пользователь мог максимально оперативно получить информации о товаре. Т.е. главное на сайте — это контент.
Визуальное представление концепции будущего сайта
В качестве основных цветов были выбраны приглушенные оттенки зеленого, синего и оранжевого.
Чтобы подчеркнуть выбранный вектор минималистичности, мы использовали в интерфейсе множество кастомных графических элементов.
Мы подготовили макеты главной страницы и после согласования продолжили работу
Со стороны компании Perfumer была максимальная вовлеченность, активное участие в принятии решений и согласовании концепции принимали менеджеры и собственник компании Алексей. Поэтому мы быстро перешли к этапу реализации.
Мы создали дизайн макеты всех страниц, а компания WebHome успешно реализовала их в разработке.
Решения, которые были приняты в интерфейсе
Пройдемся по ключевым страницам интернет-магазина Perfumer и еще раз убедимся в том, как исправление, казалось бы мелких ошибок интерфейса влияет на качество взаимодействия пользователей с интерфейсом, а значит и на ключевые показатели сайта.
Главная страница: вовлекающие точки входа и структурирование при помощи кастомных элементов
Наиболее критическими ошибками, над которыми мы начали работу в первую очередь, были следующие:
- Шапка очень большая, занимает ⅓ экрана.
- В бургере находятся только информационные блоки, нет входа в личный кабинет. Категории, которые должны быть доступны из любой части страницы, доступны только на первом экране.
- Разные подкатегории в каталоге и на странице выдачи
- Непривычное расположение элементов на странице: каталога, фильтров и сортировки, поиска
- Отсутствие просмотренных и сохраненных товаров
Так выглядела старая версия главной страницы сайта
Решения:
Переработали структуру главной страницы, усилили точки входа, дали возможность бизнесу коммуницировать с пользователями в надшапочном баннере: с первых секунд взаимодействия сообщать о различных акциях, чтобы мотивировать их пойти дальше.
Главная страница интернет-магазина Perfumer после редизайна
Оптимизировали размеры шапки, расположили в ней все необходимые ключевые элементы: иконки «Просмотренное» и «Избранное», доступ к личному кабинету, возможность быстро отследить заказ, акцентную корзину.
Центрировали лого, так как ниша приближена к 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%.
Это еще раз подтверждает тот факт, что интерфейс — важная составляющая бизнеса, над которой нужно постоянно работать. Качественная работа сайта обеспечит эффективную конвертацию трафика в доход компании.
Источник
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
