Корейская косметика · D2C-магазин дистрибьютора · RU / EN

Celadon.

Интернет-магазин корейской косметики для дистрибьютора: не витрина «как у всех», а магазин, который продаёт составом. Разобрал 13 сайтов из выдачи Яндекса, нашёл шесть дыр рынка — и собрал магазин, который закрывает каждую.

Спецификация проекта
НишаКорейская косметика · D2C-магазин дистрибьютора
Что сделаноАнализ рынка, позиционирование, фирменный стиль, структура, тексты RU/EN, дизайн, товарная линейка, кликабельный прототип
ПлатформаocStore + собственная разработка модулей
Объём12 страниц · 34 SKU · 9 линий · 24 фильтра по составу
Гео · языкРоссия · русский + английский
Смотреть демо

12 экранов ниже · десктоп + мобайл

01

Задача

разбор рынка · до и после

Контекст

Было — задача звучала как «магазин корейской косметики». Прежде чем рисовать, я разобрал 13 сайтов из первой и второй страницы Яндекса. Картина оказалась мягче, чем ожидалось: из десяти магазинов выдачи реально конкурентоспособны два — hollyshop и maskshop. Остальные либо не принимают заказы, либо уводят на маркетплейсы, либо выглядят как шаблон 2015 года. Планка ниже, чем кажется.

Стало — магазин, построенный не вокруг брендов, а вокруг состава. Покупатель корейского ухода в 2026-м приходит не за названием, а за PDRN, керамидами и «без отдушки» — а фильтровать по этому на рынке негде. Отсюда двадцать четыре фасета по составу, полный INCI в каждой карточке, фасет «свободно от», которого нет ни у кого в России, и скин-квиз, который собирает рутину за восемь вопросов.

Моя роль в проекте: конкурентный анализ и позиционирование, фирменный стиль и айдентика бренда, карта сайта и структура блоков, тексты на двух языках, дизайн всех двенадцати страниц, товарная линейка из девяти линий и предметная съёмка карточек, кликабельный прототип на утверждение.

2 из 10магазинов выдачи реально работают — остальные витрины, редиректы или шаблоны 2015 года
0 из 10имеют английскую версию, скин-квиз или фасет «свободно от»
39 %отказов в e-commerce — из-за расходов, всплывших на чекауте
×2,2конверсия после скин-квиза в бьюти: 6,1 % против 2,75 % средней
02

Что заложено в структуру

8 решений
01

Фильтр по составу

Двадцать четыре фасета: PDRN, экзосомы, ниацинамид, керамиды, центелла, бакучиол. Человек ищет действующее вещество, а не бренд.

есть у 1 из 10
02

Фасет «свободно от»

Спирт, отдушка, эфирные масла, веган, cruelty-free. Главный запрос чувствительной кожи — и его нельзя отфильтровать нигде в РФ.

нет ни у кого
03

Скин-квиз за 8 вопросов

Тип кожи, реакции, текущий уход, бюджет — на выходе готовая рутина по шагам с ценой и кнопкой «добавить всю рутину».

нет ни у кого
04

SPF с рейтингом PA

PA+++/++++, тип фильтра, формат. Есть у Olive Young, нет ни у одного российского магазина.

нет ни у кого в РФ
05

Клубная цена второй строкой

3 490 ₽ и 2 967 ₽ по клубной — в плитке, в карточке, в корзине. Сильнейший приём лидера рынка, применённый последовательно.

приём maskshop
06

Доставка видна до чекаута

Один порог 5 000 ₽, одинаковый текст везде, прогресс-бар в корзине и в шапке. Мы не прячем расходы до последнего шага.

закрывает 39 % отказов
07

Собственный бренд

Девять линий, 34 SKU, единая предметная съёмка на фарфоровом фоне. Магазин продаёт свой продукт, а не чужую полку.

маржа вместо перепродажи
08

Английская версия

Полноценный RU/EN: словарь строк, русская плюрализация, выбор языка сохраняется. Ни у одного из десяти конкурентов нет.

нет ни у кого
03

Экраны

клик по экрану — открыть целиком
01

Главная

/

За пять секунд объяснить, чем этот магазин отличается от десяти других: не «широкий ассортимент», а фильтр по составу, полный INCI и рутина за восемь вопросов. Отсюда три входа — квиз, каталог, категория.

Десктоп · 1440 /↗ открыть
Главная — десктопная версия
Мобайл · 390
Главная — мобильная версия
02

Каталог с фасетами

/catalog

Двадцать четыре фильтра, включая ингредиенты, «свободно от» и SPF с рейтингом PA. У фасетов счётчики, применённые фильтры — чипсами, на мобиле панель уезжает в нижний лист.

Десктоп · 1440 /catalog↗ открыть
Каталог с фасетами — десктопная версия
Мобайл · 390
Каталог с фасетами — мобильная версия
03

Карточка товара

/product

Клубная цена второй строкой, варианты объёма плитками, полный INCI с расшифровкой активов, шаг в рутине и «что наносить до и после». Условия доставки — прямо в блоке покупки, а не на отдельной странице.

Десктоп · 1440 /product↗ открыть
Карточка товара — десктопная версия
Мобайл · 390
Карточка товара — мобильная версия
04

Быстрый просмотр

модалка поверх каталога

Товар можно оценить, не покидая выдачу: фото, состав, объёмы, цена и «в корзину». Кнопка появляется у фотографии при наведении — там, где на неё смотрят.

Десктоп · 1440 модалка поверх каталога↗ открыть
Быстрый просмотр — десктопная версия
Мобайл · 390
Быстрый просмотр — мобильная версия
05

Умный поиск

подсказки в шапке

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

Десктоп · 1440 подсказки в шапке↗ открыть
Умный поиск — десктопная версия
Мобайл · 390
Умный поиск — мобильная версия
06

Корзина

/cart

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

Десктоп · 1440 /cart↗ открыть
Корзина — десктопная версия
Мобайл · 390
Корзина — мобильная версия
07

Чекаут

/checkout

Три шага: покупатель → доставка → оплата. Гостевой заказ без регистрации. Стоимость доставки уже учтена и на этом шаге не меняется — именно это ломает 39 % корзин у конкурентов.

Десктоп · 1440 /checkout↗ открыть
Чекаут — десктопная версия
Мобайл · 390
Чекаут — мобильная версия
08

Оплата

/payment

Визуальная часть оплаты: карта, СБП с QR, рассрочка. Экран обработки ведёт на страницу «спасибо» с номером заказа — она же цель в Метрике, без которой реклама не видит заявок.

Десктоп · 1440 /payment↗ открыть
Оплата — десктопная версия
Мобайл · 390
Оплата — мобильная версия
09

Скин-квиз

/quiz

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

Десктоп · 1440 /quiz↗ открыть
Скин-квиз — десктопная версия
Мобайл · 390
Скин-квиз — мобильная версия
10

Конструктор рутины

/routine

Для тех, кто уже знает, чего хочет: пресеты на 4, 7 и 10 шагов, утро и вечер, пересчёт цены в реальном времени, скидка от четырёх шагов.

Десктоп · 1440 /routine↗ открыть
Конструктор рутины — десктопная версия
Мобайл · 390
Конструктор рутины — мобильная версия
11

Линии бренда

/brands

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

Десктоп · 1440 /brands↗ открыть
Линии бренда — десктопная версия
Мобайл · 390
Линии бренда — мобильная версия
12

Доставка, оплата, возврат

/delivery

Служебные страницы, которых у половины конкурентов просто нет или они отдают 404. Один порог бесплатной доставки и один и тот же текст везде на сайте.

Десктоп · 1440 /delivery↗ открыть
Доставка, оплата, возврат — десктопная версия
Мобайл · 390
Доставка, оплата, возврат — мобильная версия
04

Мобильная версия

390 px · отдельный сценарий, а не сжатый десктоп

Около 59 % бьюти-чекаутов проходят с телефона, а брошенных корзин на мобиле — порядка 72 %. Поэтому мобильная версия здесь не «то же самое, но уже»: у неё свои элементы навигации, свои размеры целей и свой порядок блоков.

Шапка на телефоне перестроена: бургер, логотип, поиск и корзина в одну строку, под ними — горизонтальная лента категорий, чтобы вход в каталог был в один тап с любой страницы. Фильтры каталога уезжают в нижний лист, а не в боковую колонку. Все цели нажатия — не меньше 44 px.

ШапкаКомпактная строка + лента категорий. Поиск разворачивается поверх, не уводя со страницы.
КаталогФильтры в нижнем листе, плитка в две колонки, счётчики у фасетов сохранены.
КарточкаГалерея на всю ширину, аккордеоны вместо табов — 27 % пользователей табы просто не замечают.
КорзинаПрогресс до бесплатной доставки, выбор пробников, промокод — всё в одной колонке без горизонтальной прокрутки.
ЧекаутТри шага, гостевой заказ, крупные поля, клавиатура под тип поля. Стоимость доставки не меняется на последнем шаге.
СкоростьНоль зависимостей, WebP с JPEG-фолбэком, ноль сдвигов макета при загрузке.
Главная — мобильная версия

Главная

Каталог — мобильная версия

Каталог

Карточка — мобильная версия

Карточка

Быстрый просмотр — мобильная версия

Быстрый просмотр

Корзина — мобильная версия

Корзина

Чекаут — мобильная версия

Чекаут

05

Фирменный стиль

селадон · фарфор · бронза

Ниша забита пастельно-розовым и мультяшной корейской графикой. Я пошёл в противоположную сторону: селадон — это цвет корейского фарфора XII века, самого узнаваемого артефакта корейской материальной культуры. Отсюда и название бренда, и палитра, и знак 청자 в логотипе. Получается корейская идентичность без единого клише — на уровне Gold Apple и Sulwhasoo, а не масс-маркета.

Фарфор#F2F4F1 · фон
Чернила#141B18 · текст, кнопки
Селадон#7E9E90 · акцент 1
Селадон тёмный#546F63 · ссылки
Бронза#9E7C46 · цена, клуб
Селадон-вош#DFE9E3 · подложки
CELADON청자
CELADON청자

Заголовки · Forum

Уход, который выбирают по составу

Антиква с высоким контрастом — даёт нужную «дорогую» интонацию. Полная кириллица, что для антиквы редкость.

Текст · Onest

Фильтр по двадцати четырём действующим веществам и полный INCI в каждой карточке.

Гротеск, спроектированный под кириллицу. Читается в 12 px на телефоне без потери в характере.

Принципы вёрстки

Волосяные линии вместо теней и скруглений. Много воздуха. Ни одного градиента на UI. Фотография товара всегда на белом и всегда квадратная — за счёт этого каталог выглядит как один бренд, а не как сборная полка.

06

Что получил клиент

итог работы

Продукт

Двенадцать страниц полного пути: главная, каталог с фасетами, карточка товара, быстрый просмотр, умный поиск, корзина, чекаут, оплата, «спасибо», квиз, конструктор рутины, линии и служебные страницы.

Каталог собственного бренда: девять линий, 34 SKU, единая предметная съёмка.

Отличия от рынка

Шесть механик, которых нет у конкурентов из выдачи: фильтр по составу, «свободно от», SPF с рейтингом PA, скин-квиз, конструктор рутины и английская версия.

Плюс приёмы лидеров, применённые последовательно: клубная цена, прогресс бесплатной доставки, выбор пробников.

Техника

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

Всё, чего в коробке нет, — собственные модули: фасеты по составу и «свободно от», скин-квиз, конструктор рутины, быстрый просмотр, умный поиск и RU/EN.

Ноль ошибок JavaScript и ноль замечаний по доступности на всех двенадцати страницах — проверено автоматически на каждой сборке.

Хотите так же для своего бизнеса?

Обсудим ваш проект

За один рабочий день бесплатно пришлю прототип вашего сайта и точную смету — увидите результат ещё до оплаты.

Обсудить проект Бесплатно · без обязательств