NAOS — французская косметическая компания с 100% производством во Франции и единым научным подходом к уходу за кожей. В портфель NAOS входят три бренда: BIODERMA, Institut Esthederm и Etat Pur — от клинически ориентированного ухода до премиального и персонализированного.
Задача
Обновить интернет-магазин NAOS: существующее решение имело устаревший UI, не соответствовало современным UX-паттернам и накладывало технологические ограничения на развитие продукта.
Перед командой стояли задачи:
- повысить удобство и конверсионность пользовательских сценариев;
- устранить точки трения в ключевых шагах покупки;
- переосмыслить навигацию и каталог с точки зрения реальных пользовательских задач;
- объединить три бренда в единую цифровую экосистему, сохранив их индивидуальность;
- заложить технологическую основу для масштабирования.
Решение
Исследования и ключевые инсайты
Проект начался с глубокой исследовательской фазы. Команда провела качественные UX-исследования, собрав фокус-группу из лояльных пользователей — представителей ключевой целевой аудитории.
Сессии пользовательского тестирования «под запись» проходили в специализированной среде Fabuza и охватывали основные сценарии: поиск, диагностику, изучение лояльности, добавление в корзину и оформление заказа.
Ключевым инсайтом стало то, что каталог, построенный по логике «сначала бренд», запутывал пользователей — людям удобнее начинать путь с задачи кожи.
Дополнительно фокус-группа отметила:
- перегруженную навигацию;
- недостаток доказательной базы в карточках товаров;
- нехватку социального подтверждения и UGC-контента;
- необходимость структурировать образовательный контент по медицинским принципам.
Продуктовые и UX-решения
На основе инсайтов команда приняла ряд принципиальных решений:
- Каталог: от brand-first к need-first. Пользователь начинает путь с выбора потребности кожи и получает подборку средств от всех брендов NAOS.
- «Подобрать уход». Короткий опросник из четырёх вопросов формирует персональную рутину ухода с возможностью дальнейшей донастройки через фильтры.
- Карточка товара как центр информации. В карточках появились рейтинги, отзывы с фото, блок «вопрос–ответ», экспертные видео и отображение баллов лояльности. Это повысило доверие, усилило UGC и снизило нагрузку на поддержку.
- Навигация по брендам. Кликабельные лейблы в карточках товаров позволяют быстро переходить к линейкам BIODERMA, Etat Pur и Institut Esthederm, усиливая кросс-продажи.
- Корзина. Информер «осталось до подарка» мотивирует пользователей добирать заказ до нужной суммы.
- Контент. Запущен журнал «О коже» с медицинским рубрикатором (атопический дерматит, розацеа, пигментация и др.), разделами «Новости» и «Видео с экспертами».
- Личный кабинет. Реализованы гибкие настройки подписок и каналов коммуникации, что позволило очистить базу и повысить релевантность рассылок.
UX и визуальная концепция
После проработки пользовательских сценариев команда перешла к визуалу. Ключевой задачей стало объединение BIODERMA, Etat Pur и Institut Esthederm в единую экосистему NAOS без потери характера каждого бренда и с соблюдением глобальных бренд-гайдлайнов.
Смысловым якорем стала медицинская экспертиза:
- чистая, строгая и минималистичная палитра;
- преобладание белого и светлых акцентов;
- отсутствие визуального шума;
- сдержанная, легко читаемая типографика;
- упрощённая навигация, в которой интерфейс сам ведёт пользователя к следующему шагу.
Дополнительно была разработана масштабируемая дизайн-система, ускоряющая развитие продукта и обеспечивающая консистентность интерфейсов.
Технологии
В рамках реплатформинга реализован headless-подход на связке Magento + React.
Бэкенд взаимодействует с фронтендом через GraphQL-слой, что обеспечивает гибкость, высокую производительность и независимость развития клиентской части.
Интеграции:
- 1С — ERP и источник мастер-данных по ценам, остаткам и товарам;
- Mindbox — персонализация, скидки и триггерные коммуникации;
- AnyQuery — быстрый поиск с устойчивостью к опечаткам;
- Мир лечебной косметики (MLK) — фулфилмент и доставка;
- Ю.Kassa и Яндекс Сплит — платежи и рассрочка;
- DaData — автозаполнение и валидация адресов.
Архитектура спроектирована с запасом по производительности и готова к масштабированию.
Результат
- Интернет-магазин получил современный UX, основанный на реальных пользовательских инсайтах.
- Каталог и навигация стали ориентированы на задачи кожи, а не на внутреннюю логику брендов.
- Карточка товара превратилась в ключевую точку доверия и принятия решения.
- Усилены кросс-продажи и вовлечённость за счёт персонализации и контента.
- Заложена масштабируемая технологическая и дизайн-основа для дальнейшего развития e-commerce NAOS.
Выставлено в номинациях:
— Лучший сайт косметического бренда