NAOS: перезапуск d2c интернет‑магазина бьюти‑брендов
NAOS — французская косметическая компания с 100% производством во Франции: три бренда BIODERMA, Institut Esthederm и Etat Pur, единый научный подход и разные форматы ухода — от клинически ориентированного до премиального и персонализированного.
Клиент пришел к нам с запросом обновить свой интернет-магазин. Текущая на тот момент версия на 1С-Битрикс, выбранная пять лет назад, накопила типичные «возрастные» проблемы: устаревший UI, несоответствие современным UX-паттернам, ограничения и сложности технологического решения. Это ломало конверсию: даже при высокой посещаемости продажи не соответствовали потенциалу. Мы взяли курс на полный редизайн, с последующим реплатформингом на современный стек в headless-подходе, чтобы соответствовать современным трендам UX, сделать сайт динамичнее и конверсионнее и заложить основу для масштабирования.
Зачем брендам нужен direct-to-customer канал
У большинства компаний доля выручки d2c-проектов в объеме онлайн-продаж сильно ниже доли на маркетплейсах — там гораздо больше аудитория и почти всегда цены выгоднее, за счёт субсидированных скидок. Но это не снижает важность собственного онлайн-канала, который решает стратегические задачи, нерешаемые на внешних площадках и вот почему:
- Полная first-party аналитика. Вся статистика и веб-аналитика остаются у бренда: путь пользователя, вклад контента, конверсия по сегментам.
- Песочница для экспериментов. Быстрые A/B-тесты, пилотные коллекции и наборы, ценовые гипотезы, разные сценарии промо — с немедленной обратной связью.
- Прямой диалог и сервис. NPS, отзывы, консультации, образовательные материалы делают коммуникацию управляемой.
- Доверие — многим клиентам важна гарантия подлинности, качества и уровня сервиса (упаковка, доставка, работа с рекламациями etc).
- Контроль ассортимента, логики рекомендаций и послепродажного опыта (возвраты, сопровождение, upsell).
- Омниканальность без потерь. Типичный сценарий «изучил на сайте — купил в ритейле» (ROPO — research online, purchase offline) становится частью единой воронки: свой сайт захватывает интерес, предоставляет полную информацию и отвечает на вопросы.
- Устойчивость модели. Меньше зависимости от алгоритмов и комиссий площадок, больше контроля над маржой на ключевых SKU.
В случае с NAOS многие из перечисленных пунктов критичны: именно на сайте аккумулируется экспертный контент и строятся долгосрочные отношения с аудиторией. Но это не всё. Благодаря тесному сотрудничеству с профессиональными сообществами — специалистами здравоохранения и индустрии красоты — бренды NAOS обладают высокой медицинской экспертностью и устойчивой репутацией. Поэтому именно в данном кейсе, были важны еще несколько пунктов:
- Экспертный контент. Медицинские материалы, протоколы применения, корректные утверждения о свойствах продукта — в управляемой среде.
- Персонализация под задачи кожи. Диагностика, подбор рутины, совместимость продуктов — подход не от товара, а от проблемы.
- Ясная дифференциация трёх брендов. В единой экосистеме чётко обозначены роли BIODERMA, Institut Esthederm и Etat Pur — без разрыва между сайтами.
- Контроль терминологии и качества коммуникаций. Единый тон и медицинская точность без искажений, медикальность которую трудно подчеркнуть на площадках.
- Глубокая обратная связь. Отзывы и вопросы клиентов/экспертов → инсайты для R&D и контент-стратегии.
- Повторяемость покупок. Наборы, рекомендации, напоминания — «длинные» отношения с клиентом.
- Быстрая проверка гипотез ухода. Тест форматов, дозировок, наборов и образовательных форматов четко на своей аудитории.
Для NAOS собственный интернет-магазин важен как место встречи комьюнити и управляемая экспертная среда — здесь соединяются статьи, исследования и обмен опытом. Медицинская экспертиза превращается в дополнительную ценность для потребителя и влияет на рост его лояльности. При этом собственный интернет-магазин не противопоставляется маркетплейсам, а органично встраивается в customer journey и омниканальность: сайт захватывает интерес, помогает собрать аналитические данные и запускает CRM-сценарии.
Исследования и UX: трансформация customer journey
В начале проекта мы провели качественные исследования, собрав фокус-группу из лояльных пользователей, ярких представителей целевой аудитории. Далее организовали «под запись» сессии, состоящие из набора задач в специальной среде от Fabuza. Затем проанализировали ключевые сценарии (поиск, диагностику, изучение лояльности, добавление в корзину, оформление заказа) и получили карту «потерь» и точек трения.
Ключевым инсайтом стало то, что каталог в логике «сначала бренд» запутывал пользователей — людям удобнее идти от задачи кожи. Плюс фокус-группа отметила, что навигация перегружена, карточке товара не хватает доказательств и социального подтверждения, образовательный контент требует медицинской структуры.
По результатам качественного исследования приняли несколько важных решений:
- Каталог: из brand-first → need-first. Пользователь сначала выбирает потребность кожи и получает подборку средств от всех брендов NAOS.
- «Подобрать уход»: опросник из 4 вопросов формирует персональную рутину; её можно донастроить фильтрами.
- Карточка товара = центр информации: рейтинги, отзывы с фото, «вопросы-ответы», экспертные видео и баллы лояльности — больше доверия, UGC-контент и меньшая нагрузка на поддержку.
- Навигация по брендам: кликабельные лейблы в карточках дают быстрый переход к линейкам BIODERMA / Etat Pur / Institut Esthederm, усиливая кросс-продажи.
- Корзина: информер «осталось до подарка» мотивирует добрать заказ до нужной суммы.
- Контент: Журнал «О коже» с медицинским рубрикатором (атопический дерматит, розацеа, пигментация и др.), разделами «Новости» и «Видео с экспертами».
- Личный кабинет: гибкие настройки подписок и каналов коммуникации — чище база и релевантнее рассылки.
Визуальная концепция и дизайн
Когда мы обработали инсайты в UX, перешли к визуалу. Задача — собрать BIODERMA, Etat Pur и Institut Esthederm в единую экосистему NAOS, не потеряв характер каждого бренда и оставаясь в рамках глобальных гайдлайнов. Выбрали медицинскую экспертизу главным смысловым якорем: палитра стала чистой и строгой, минималистичной, с преобладанием белого и светлых акцентов, без визуального шума. Типографика — сдержанная и легко читаемая, создаёт ощущение надёжности. Навигацию максимально упростили: интерфейс подсказывает путь сам, не заставляя пользователя задумываться о следующем шаге.
Особое внимание уделили изображениям — по возможности отказались от стоковых фото и перешли на авторские HQ-фотографии. Такой контент выглядит честно и убедительно, поддерживает ощущение «премиум» без излишней глянцевости и помогает выстраивать доверие. Сильнее акценты на tone of voice — используется «язык науки»: доказательно, но звучит просто и доступно.
Чтобы визуальная часть была инструментом роста, разработали масштабируемую дизайн-систему: описали компоненты, цвета, шрифты и правила работы с изображениями. Благодаря этому любой новый элемент или раздел органично вписывается в существующий дизайн, а разработка ускоряется за счет готовых модулей. Проверили этот подход на практике — пока велась разработка основного интернет-магазина, разработали шесть лендингов в новой визуальной концепции, с применением дизайн-системы. Получилось стильно и консистентно.
В результате появился целостный визуальный язык, который отражает медикальность продукции NAOS, при этом сайт остается понятным и удобным.
Разработка интернет-магазина
Для реплатформинга мы предложили связку Magento + React. Бэкенд реализован в парадигме headless, общается с фронтендом через GraphQL-слой: так фронт работает быстро и отзывчиво, а серверная часть остается гибкой и легко масштабируемой. Разделение на фронтенд и бэкенд позволяет независимо развивать UX и бизнес-логику, ускоряет релизы и упрощает поддержку.
К этой связке подключили набор интеграций, закрывающих ключевые сценарии:
- 1С как ERP выступает источником мастер-данных по ценам, остаткам и данным о товаре.
- Mindbox управляет скидками, отвечает за персонализацию и триггерные рассылки.
- Поиск реализован через AnyQuery: он моментально подсказывает релевантные результаты и устойчив к опечаткам.
- Логистику и доставку покрывает «Мир лечебной косметики» (MLK) — фулфилмент и доставка.
- Платежи реализованы через Ю.Kassa, есть интеграция с BNPL Яндекс Сплит, чтобы дать пользователю привычные и удобные способы оплаты, включая рассрочку.
- Для автозаполнения и проверки корректности всех адресов на сайте используется Dadata.
Такой технологический профиль сегодня фактически «база» для современного e-commerce: меняются конкретные вендоры, но архитектура повторяется на многих проектах. Это устойчивое и расширяемое решение, на котором можно быстро вводить новые функции, делать роллауты на новые рынки, не «пересобирая» ядро и не жертвуя качеством пользовательского опыта.
Итоги и выводы
Запуск состоялся день-в-день в дату, запланированную на старте разработки. С технической стороны база готова к масштабированию: выбранная архитектура спроектирована с запасом по производительности и устойчивости, а наш опыт реальных highload-кейсов даёт уверенность, что платформа справится с возрастающими нагрузками без потери качества пользовательского опыта.
Если вам нужен надежный партнер
для разработки IT-решения с предсказуемым по срокам и бюджету результатом — давайте обсудим ваш проект