Aesthetiks

аналитика
ux/ui
дизайн
разработка
Клиент
Интернет-магазин премиальной косметики и парфюмерии Aesthetiks.ru — один из брендов Keep Looking Group, куда также входит сеть салонов Keep Looking.

Aesthetiks.ru — партнер для магазинов косметики, салонов и студий красоты, СПА-салонов. Партнерская сеть охватывает более 100 городов России, Беларуси и Казахстана. С брендом работают более 155 точек продаж и 150 салонов красоты.

Официальный дистрибьютор Rated Green, La Sultane de Saba, Rare Paris, CIRCLE, VALQUER и других эксклюзивных брендов.
Кейс Loomknits - KISLOROD
Цели
Необходимо было провести редизайн сайта, чтобы улучшить пользовательский опыт: устранить барьеры на пути к конверсиям, повысить ключевые показатели эффективности отдельных этапов Customer Journey.

Особый упор необходимо было сделать на мобильную версию сайта: UX, юзабилити и функциональные возможности.

В техническом плане необходимо было провести ряд интеграций с сервисами электронной коммерции: «1С», фулфилментом, программой лояльности и рассылки СМС.
Задачи
1
Разработка пользовательского интерфейса с учетом паттернов целевой аудитории
2
Проработка адаптивной версии для мобильных устройств
3
Разработка навигации по сайту, которая облегчит путь пользователя и повысит юзабилити
4
Доработка UX для пользователей мобильных устройств
5
Интеграция с программой лояльности MAXMA
6
Настройка интеграции с фулфилментом «Кактус»
7
Интеграция с «1С», сервисами СМС-рассылок и проверки данных DaData
8
Улучшение ключевых показателей: коэффициента конверсии, снижение процентов отказа на этапе чекаута
Предпроектный
анализ
Провели брифование клиента, что позволило максимально конкретизировать цели и задачи.

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

96% посетителей сайта просматривают его на мобильных устройствах, поэтому решили делать упор на качественную проработку мобильной версии и UX адаптивного дизайна.
Мудборды
На первом этапе собрали лучшие функциональные и визуальные решения конкурентов. На их основе создали мудборды для всех типов страниц, которые нам нужно было разработать: главная, каталог, карточка товара, корзина, чекаут и прочие.
Разработка на готовом решении Loomknits - KISLOROD
Главная страница
На основе визуальных решений была разработана дизайн-концепция главной страницы.

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

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

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

Концепт не перегружен элементами, имеет приятный чистый дизайн с достаточным количеством пространства.
Внедрение SEO-модуля Loomknits - KISLOROD
Поиск по сайту
Поиск по сайту — один из важнейших элементов, потому что большинство пользователей начинает путь именно с него. Поэтому внедрили модуль «умного» поиска, который позволяет формировать базу синонимов, работать с опечатками и ошибками. Это значительно улучшает качество и удобство поиска.
Функциональные доработки Loomknits - KISLOROD
Авторизация и регистрация
Авторизация и регистрация происходят стандартно — через e-mail или телефон. Причем это происходит сразу в связке с программой лояльности. Акцент сделан на удобстве регистрации с мобильных телефонов, поскольку подавляющая часть посетителей использует именно этот тип устройств.
Редизайн Loomknits - KISLOROD
Меню и навигация
Типичный барьер для пользователей в косметической индустрии — поиск подходящего средства без консультанта. Потому в структуре меню реализована логика перехода от общего к частному — сначала пользователь выбирает участок применения: для волос, лица или всего тела.

Затем раздел разбивается еще на несколько категорий, например: уход для рук, глаз или антивозрастной уход.
Дизайн-концепция Loomknits - KISLOROD
Опытные покупатели могут выбирать товар сразу по брендам — для этого в верхнем меню есть отдельный раздел.
Листинг и фильтрация в каталоге Loomknits - KISLOROD
При клике на плашку пользователь попадает в категорию с товарами конкретного бренда.
Листинг и фильтрация в каталоге Loomknits - KISLOROD
Каталог и витрина
В косметической индустрии упаковка всегда была отличительным признаком, особенно в секторе роскоши, поэтому мы расширили виртуальную полку и увеличили изображения в превью за счёт того, что фильтр перенесли из сайдбара наверх.
Карточка товара Loomknits - KISLOROD
Отдельно в каталоге выделены разделы «Новинки» — куда автоматически попадают новые товары и «Бестселлеры» — где представлены самые популярные товарные позиции.
Карточка товара Loomknits - KISLOROD
Фильтрация в каталоге
Для разных типов устройств предусмотрено собственное отображение фильтра, в зависимости от размера экрана, но структура и логика везде остается одинаковой.

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

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

Отдельно выведен параметр «Есть в наличии», чтобы пользователь мог видеть только те товары, что есть в магазине.

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

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

Набор товаров идет как отдельная позиция — SKU, и продается как есть, без возможности замены отдельных компонентов. В карточке товара указывается, что входит в состав набора.
Карточка товара Loomknits - KISLOROD
Карточка товара
Предусмотрели визуальную и текстовую подачу информации, подробные характеристики и состав товара. При разработке интерфейса ориентировались на топовые западные интернет-магазины премиальной косметики и парфюмерии.

Изображения товара можно перелистывать свайпом — это особенно удобно на мобильных устройствах.
Карточка товара Loomknits - KISLOROD
Корзина и чекаут
Корзина имеет стандартный набор функций, но также ряд особенностей: есть возможность восстановить случайно удаленный товар — в корзине сохраняется история товаров.

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

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

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

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

Карточка товара Loomknits - KISLOROD
Личный кабинет
Личный кабинет может использоваться как обычными пользователями, так и оптовыми покупателями.

Розничный клиент найдет здесь историю заказов и избранные товары. А для юридических лиц и предпринимателей есть возможность подать заявку на сотрудничество.

Заполненная заявка отправляется менеджеру, который обрабатывает ее и составляет договор. Партнеру присваивается определенный тип, в зависимости от которого ему назначаются цены. Учет ведется в «1С».
Карточка товара Loomknits - KISLOROD
Особенности мобильной версии
Поскольку больше 90% трафика приходит с мобильных устройств, то мы особенно тщательно проработали мобильную версию, которая отличается от десктопной версии логикой и иногда элементами.

Например, мы внедрили на сайте таб-бар — блок внизу страницы с быстрым доступом к навигационным элементам: избранному, корзине и личному кабинету.

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

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

Такой же механизм предусмотрен для шапки сайта в мобильной версии — она пропадает при скроллинге, освобождая пространство для коммерческих элементов.
Карточка товара Loomknits - KISLOROD
Интеграции
Был создан интеграционный слой с рядом сервисов, которые обеспечивают работу площадки электронной коммерции:
  1. Программой «1С».
  2. Фулфилментом «Кактус».
  3. Платформой лояльности MAXMA.

В проекте была реализована связка «Кактус» + «1С» + сайт. Обмен происходит через обычный модуль — после заказа заполненные поля уходят в «1С».

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

Также были интегрированы:
  1. DaData — вспомогательный сервис, который исправляет ошибки в адресах и контактах, чтобы в «1С» приходили корректные данные.
  2. SMS Aero — сервис рассылки коротких сообщений, который присылает коды авторизации и маркетинговые сообщения.

При заполнении адреса подключается DaData — она исправляет некорректные данные, после чего они уходят в «1С», а затем в «Кактус».

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

Программа лояльности была доработана, чтобы различать B2B и B2C аудиторию, поэтому в сервисе добавили дополнительные поля, в которых указываются свойства клиента, в зависимости от чего рассчитывается размер скидки.

Результаты работы
1
Разработан простой и лаконичный дизайн интернет-магазина с использованием фирменной айдентики
2
Проработана мобильная версия сайта с адаптивным дизайном с учетом паттернов целевой аудитории
3
Интегрированы: программа лояльности, фулфилмент, сервис рассылки СМС, «1С», сервис поиска и исправления ошибок
4
Доработана навигация по сайту для повышения удобства пользователей
5
Разработан полный набор всех типов функциональных страниц с учетом UX
6
Проработаны элементы UI, которые улучшают опыт пользователей и снимают барьеры на пути к покупке
Другие кейсы
Оставьте заявку, чтобы обсудить проект и задачи
Кирилл Мяконькин
NEW BIZ менеджер, проконсультирует
и подготовит предложение
*
*
*