Aurora Cosmetics
▍Премиальный e-com с AR-примеркой оттенков прямо в браузере.
Контекст
Aurora — независимый российский бренд натуральной косметики с десятью SKU и продажами через Wildberries и Ozon. К 2025 году маркетплейсы съедали 38% маржи, а возвраты по причине «не подошёл оттенок» составляли почти каждую пятую покупку.
Задача — построить собственную витрину, где покупатель видит, как помада или тональная основа реально лежит на его лице, и решает за минуту, а не за две недели и возврат.
Бизнес-цель сформулировали честно: повысить долю D2C-каналов до 45% выручки, снизить возвраты вдвое и собрать первую базу лояльности в 25 тысяч человек.
Задача
- 01Собственный e-com на Shopify Hydrogen с кастомным фронтом
- 02Веб-AR примерка оттенков через MediaPipe + WebGL
- 03Подписка на пополнение и кошелёк лояльности
- 04Интеграция со СДЭК-доставкой и Tinkoff Pay
- 05Запуск за 11 недель к сезону осенних коллекций
Решение
AR-примерка в браузере
Используем MediaPipe Face Mesh + кастомный WebGL-шейдер для оттенков. Никаких приложений — открыли карточку, разрешили камеру, видим как ляжет цвет. Среднее время взаимодействия — 47 секунд.
Карточка товара с подбором
Помимо AR — алгоритм подбора оттенка по 4 вопросам и цветовой шкале. Уверенность 89% по тесту на 600 покупателях.
Подписка и кошелёк лояльности
Подписка на пополнение со скидкой 15% и автопаузой. Кошелёк копит баллы за отзывы, рефералов и стримы — конвертируются в SKU, а не в скидку.
Чек-аут в одно нажатие
Tinkoff Pay + Apple/Google Pay по умолчанию. Поля адреса предзаполняются по DaData. Среднее время чек-аута — 22 секунды.
Аналитика и эксперименты
Каждый блок карточки — отдельный A/B-эксперимент. За первый квартал прокатили 18 гипотез, 11 победили.
Архитектура
Фронт — Next.js 15 поверх Shopify Storefront API. Сервер-компоненты для каталога, клиентская гидратация только в AR-модуле и чек-ауте. CDN — Cloudflare с edge-кешем по локали.
AR работает локально на устройстве: ничего не уходит на сервер, кадры не сохраняются. Контент-модель — Sanity, аналитика — PostHog + собственный сборщик событий на edge-функциях.
Результаты
- конверсия в покупку
- возвраты
- выручки за квартал
- LCP мобайл
Что не получилось с первого раза
- ✕Демо на iPhone летало — а потом кто-то открыл его на своём Android, и экран остался чёрным. Те же чёрные экраны ждали 40% Android-смартфонов: первая версия AR стояла на ARKit Web. Две недели работы — в корзину, переписали с нуля на MediaPipe Face Mesh.
- ✕Калибровали подбор оттенка по студийным фото, всё сходилось. Первое же реальное селфи при жёлтом домашнем свете — промах на два тона. Добавили баланс белого по кадру.
“Возвраты ушли с 19% до 11%, а D2C-канал занял половину выручки уже к декабрю. И мы наконец перестали зависеть от чужих маркетплейсов.
Команда
Что дальше
- →Расширение AR на палетки теней и контуринг
- →Live-стримы с примеркой в формате shoppable video
- →Запуск B2B-кабинета для салонов-партнёров
