Разработка и развитие интернет-магазина для косметического концерна NAOS

Главное о кейсе

Мы работаем с клиентом с 2019 года — разрабатывали текущий интернет-магазин для российского представительства. В рамках проекта реализовали концепцию shop-in-shop для продажи продукции двух брендов концерна на базе единой платформы. Для этого разработали интерфейсы, внедрили и настроили интеграционный слой с внешними системами. С тех пор проект находится на нашей техподдержке, мы обслуживаем и развиваем его.

В данном проекте мы применяем data-driven подход, в рамках которого постоянно улучшаем коммерческие KPI.

Показатели:
С запуска проекта коммерческая прибыль интернет-магазина выросла на 347%, а средний чек на 77%.

В разделах «Корзина» и «Оформление заказа» сделали интерфейс более простым и наглядным для покупателей:
— на 16% выросла конверсия в заказы (*относительно всех посетителей сайта),
— на 17% уменьшился показатель отказов с этапа оформления заказа.

По «Карточке товара» провели редизайн, внедрили рекомендации и доработали стилистику:
— рост конверсии добавления в корзину на 118% (х2,19),
— рост конверсии в переходы в корзину на 109% (х2,09).

Улучшили коммерческие показатели внутреннего медиа за счёт редизайна блога, оптимизации структуры, работы с микроконверсиями:
— на 118% увеличили время на материал,
— на 68% долю просмотров и доскролливших,
— на 98% увеличили количество товаров, добавленных в корзину с нативных товарных блоков в статьях.

Как проект изменил жизнь пользователей

Мы предоставили клиентам брендов: Bioderma, Institut Esthederm, Etat Pur не только площадку для покупок, но и полезный сервис, где представлена информация об уходе за собой и своим здоровьем.

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

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

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

Бизнес-задача и ее решение

Задача:
1. Разработать интернет-магазин для российского представительства NAOS.
2. Реализовать концепцию shop-in-shop для продажи продукции трех брендов концерна: Bioderma, Institut Esthederm, Etat Pur в рамках единой платформы.
3. Разработать интерфейсы с учетом паттернов поведения целевой аудитории.
4. Создать интеграционный слой с ERP, фулфилмент-оператором и CRM-системой клиента.
5. Настроить интеграцию с сервисом товарных рекомендаций и триггерных рассылок.
6. Развитие интерфейса и функционала сайта на основе data-driven подхода.

Решение:

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

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

Сама концепция shop-in-shop подразумевает под собой два независимых интернет-магазина в рамках одной платформы. У каждого из них своя уникальная главная страница и онлайн-витрина. При этом каждый из брендов имеют свою айдентику. Поэтому вписать её в общую стилистку площадки было бы поистине нетривиальной задачей – интерфейс, выполненный в разной цветовой гамме, противоречит стандартам юзабилити сайта.

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

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

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

Что сделали?

Спроектировали удобную структуру каталога, добавив для бренда Bioderma, персонализацию по типам кожи и поиск от проблематики, а для Institut Esthederm — поиск от назначения для разных зон.

Предусмотрели в карточке товара: визуальную и текстовую информацию (подробные характеристики товара и состав).

При создании интерфейса карточки товара мы ориентировались на топовые западные интернет-магазины продажи лечебной косметики.

Развитие и техподдержка проекта в настоящее время:

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

Поскольку бизнес клиента постоянно рос, то неизбежно появлялись новые задачи:
1) Проанализировать качественные и количественные данные.
2) Найти и устранить барьеры на пути пользователя.
3) Повысить коммерческие показатели сайта.

Результаты работы
1. Переработали этапы корзины и чекаута, за счет чего повысили CR на этих этапах.
2. Внедрили доработки в карточке товара в рамках гипотез, за счет чего увеличили CR добавления в корзину.
3. Переработали поиск по сайту: проанализировали, нашли ошибки и барьеры, исправили их, за счет чего повысили конверсию и ARPU из поиска.
4. Произвели редизайн блога и оптимизировали структуру, за счет чего повысили все коммерческие показатели.
5. Нашли и устранили барьеры на пути пользователя, за счет чего достигли повышения коммерческих KPI.

Крафт (мастерство), реализация, технические детали

Стандартная интеграция с 1С, с MOLCOM Fulfilment, с сервисом товарных рекомендаций Retail Rocket, с логистическими службами PickPoint, с платежным сервисом ChronoPay, с RetailCRM.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Одной из основных гипотез, которую мы проверяли в рамках проекта, были проблемы с внутренним медиа:

1) Сложная структура, статьи на 3–4 уровнях вложенностях.
2) Выбор категории через выпадающий список.
3) Поиск работал только с перезагрузкой страницы, следствием чего были низкие поведенческие показатели.
4) Низкие показатели по электронной торговле: просмотры, клики и добавления товаров в корзину со страниц блога.

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

Результаты: улучшили коммерческие показатели внутреннего медиа за счёт редизайна блога, оптимизации структуры, работы с микроконверсиями:
— на 118% увеличили время на материал,
— на 68% долю просмотров и доскролливших,
— на 98% увеличили количество товаров, добавленных в корзину с нативных товарных блоков в статьях.

Скриншоты

Комментарий заказчика

Решающим моментом при выборе агентства KISLOROD в качестве подрядчика для нашей компании стало понимание поставленных задач и максимально детализированное предложение согласно ТЗ с самого начала открытия тендера. В процессе работы были выполнены все требования, поставленные перед исполнителем. Дизайн сайта получился легким, user-friendly, в полном соответствии с концепцией бренда. Также в интерфейсе учтены все паттерны поведения клиентов, что положительно отразилось на качестве предоставляемых услуг в сфере e-commerce. Сотрудничеством довольны, впереди еще много идей для новых совместных проектов.