NAOS: перезапуск d2c интернет‑магазина бьюти‑брендов

Клиент пришел к нам с запросом обновить свой интернет-магазин. Текущая на тот момент версия на 1С-Битрикс, выбранная пять лет назад, накопила типичные «возрастные» проблемы: устаревший UI, несоответствие современным UX-паттернам, ограничения и сложности технологического решения. Это ломало конверсию: даже при высокой посещаемости продажи не соответствовали потенциалу. Мы взяли курс на полный редизайн, с последующим реплатформингом на современный стек в headless-подходе, чтобы соответствовать современным трендам UX, сделать сайт динамичнее и конверсионнее и заложить основу для масштабирования.

Зачем брендам нужен direct-to-customer канал

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

В случае с NAOS многие из перечисленных пунктов критичны: именно на сайте аккумулируется экспертный контент и строятся долгосрочные отношения с аудиторией. Но это не всё. Благодаря тесному сотрудничеству с профессиональными сообществами — специалистами здравоохранения и индустрии красоты — бренды NAOS обладают высокой медицинской экспертностью и устойчивой репутацией. Поэтому именно в данном кейсе, были важны еще несколько пунктов:

Для NAOS собственный интернет-магазин важен как место встречи комьюнити и управляемая экспертная среда — здесь соединяются статьи, исследования и обмен опытом. Медицинская экспертиза превращается в дополнительную ценность для потребителя и влияет на рост его лояльности. При этом собственный интернет-магазин не противопоставляется маркетплейсам, а органично встраивается в customer journey и омниканальность: сайт захватывает интерес, помогает собрать аналитические данные и запускает CRM-сценарии.

Исследования и UX: трансформация customer journey

В начале проекта мы провели качественные исследования, собрав фокус-группу из лояльных пользователей, ярких представителей целевой аудитории. Далее организовали «под запись» сессии, состоящие из набора задач в специальной среде от Fabuza. Затем проанализировали ключевые сценарии (поиск, диагностику, изучение лояльности, добавление в корзину, оформление заказа) и получили карту «потерь» и точек трения.

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

По результатам качественного исследования приняли несколько важных решений:

Визуальная концепция и дизайн

Когда мы обработали инсайты в UX, перешли к визуалу. Задача — собрать BIODERMA, Etat Pur и Institut Esthederm в единую экосистему NAOS, не потеряв характер каждого бренда и оставаясь в рамках глобальных гайдлайнов. Выбрали медицинскую экспертизу главным смысловым якорем: палитра стала чистой и строгой, минималистичной, с преобладанием белого и светлых акцентов, без визуального шума. Типографика — сдержанная и легко читаемая, создаёт ощущение надёжности. Навигацию максимально упростили: интерфейс подсказывает путь сам, не заставляя пользователя задумываться о следующем шаге.

Особое внимание уделили изображениям — по возможности отказались от стоковых фото и перешли на авторские HQ-фотографии. Такой контент выглядит честно и убедительно, поддерживает ощущение «премиум» без излишней глянцевости и помогает выстраивать доверие. Сильнее акценты на tone of voice — используется «язык науки»: доказательно, но звучит просто и доступно.

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

В результате появился целостный визуальный язык, который отражает медикальность продукции NAOS, при этом сайт остается понятным и удобным.

Разработка интернет-магазина

Для реплатформинга мы предложили связку Magento + React. Бэкенд реализован в парадигме headless, общается с фронтендом через GraphQL-слой: так фронт работает быстро и отзывчиво, а серверная часть остается гибкой и легко масштабируемой. Разделение на фронтенд и бэкенд позволяет независимо развивать UX и бизнес-логику, ускоряет релизы и упрощает поддержку.

К этой связке подключили набор интеграций, закрывающих ключевые сценарии:

Такой технологический профиль сегодня фактически «база» для современного e-commerce: меняются конкретные вендоры, но архитектура повторяется на многих проектах. Это устойчивое и расширяемое решение, на котором можно быстро вводить новые функции, делать роллауты на новые рынки, не «пересобирая» ядро и не жертвуя качеством пользовательского опыта.

Итоги и выводы

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