Как превратить нишевый продукт в растущий бизнес с опорой на сайт и контент. KM Cosmetics

Узкая ниша — не преграда для масштаба. Этот кейс о том, как мы помогли бренду минеральной косметики запустить (и трижды переосмыслить) интернет-магазин. С 2015 года он стабильно приносит бренду выручку.

KM Cosmetics — независимый бренд минеральной косметики из России

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

В то время спрос на продукт был невелик — в Яндексе было всего 500 запросов по ключевым словам «минеральная косметика».

За 10 лет бренд вырос в полноценное производство со своей лабораторией, расширил линейку до уходовой и детской косметики, вышел за пределы России и собрал сильное комьюнити. И, в некотором роде, сформировал спрос на качественную декоративную косметику в стране.

Три вехи продукта и что менялось

V1 — 2015: быстрый старт на OpenCart

Цель: вывести на рынок продукт, запустить первые продажи. Сформировать базовое знание о нем.

Что сделали: базовый каталог, блог/журнал, контент-страницы .

Эффект: первые заказы по всей России, узнаваемость бренда и запуск собственного производства.

V2 — 2017: усиление работы с контентом

Цель: построение собственной дизайн-системы, масштабирование ассортимента и трафика, рост требований к стабильности.

Что сделали: переработали витрины и карточки, перенесли и развили блог на Bitrix, подготовили структуру к масштабированию

Эффект: расширение поставок, заказы из СНГ, Европы и Азии; рост линейки продуктов, продаж, улучшение UX.

V3 — 2022: Bitrix + фронт на React/Next

Зачем: скорость, mobile- first, SEO-оптимизация, новые коммерческие сценарии.

Что сделали:

• Новый фронт на Next.js (SSR) для индексации и скорости.

• Наборы и лукбуки с покупкой в один клик всего макияжа.
• Вшитые в статьи миниатюры товаров с диплинками на карточки.
• Прямые ссылки на отзыв — без прокрутки и поиска.
• Квиз-помощник в подборе.

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

Стратегия роста: продаем через знание

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

С 2017 года контент стал выходить регулярно. На стороне клиента — мини-редакция, на нашей — SEO-каркас, структура, верстка, подбор тем под спрос. 

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

Перелинковка с товарами в статье

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

Рядом с упоминанием продукта появляется его миниатюра с фото и названием. Клик — и пользователь уже в карточке, где можно сразу оформить заказ.

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

Лукбуки: продаем весь образ целиком

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

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

Пользователь может выбрать нужные оттенки, а при нажатии «Купить все» сразу получить полный комплект в корзине.

Персональный набор за пару кликов

Мы знаем, что удобнее купить сразу несколько подходящих друг другу продуктов — например, тональную основу, пудру и кисть. Для этого в каталоге KM Сosmetics есть наборы. Но каждый раз подбирать отдельные оттенки в разных товарах — долго и неудобно.

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

Пробники: превращаем первое знакомство с продуктом в постоянные покупки

Выбрать сложный оттенок или текстуру на глаз сложно. Поэтому рядом с основным товаром мы добавили кнопку «Купить пробник».

Это помогает клиенту протестировать продукт без больших вложений и боязни перетратить, и уже потом решить, хочет ли он основной продукт. 

Отзывы и пользовательский контент

Бренд делает ставку на UGC-отзывы с фотографиями и свотчами. Так контент от покупателей становится полноценной частью витрины.

Принципиально важно, что отзывы не проходят чистку: рядом с пятерками есть и честные четверки. Это только усиливает доверие — если бренд не скрывает умеренные оценки, значит, и высокие оценки настоящие.

Хотя KM Cosmetics получает отзывы на других ресурсах, основная их часть находится прямо на сайте. Можно листать их, как ленту, и делиться конкретным отзывом, просто скопировав ссылку (каждый отзыв «запоминается» в URL). 

Встраиваем в каталог уход и детскую линейку

В 2022 году в KM Cosmetics появилось несколько новых продуктовых направлений. Но создавать под них новый бренд и и сайты — не вариант.   Тогда бы мы потеряли лояльную аудиторию и SEO-трафик.

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

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

Корзина и чек-аут: минус лишние шаги

Раньше оформление заказа состояло из двух стадий: сначала пользователь просматривал содержимое корзины, потом переходил на страницу оформления — вводил данные, проверял сумму, подтверждал заказ. На практике это приводило к потере части покупателей.

В новой версии сайта корзина и чек-аут объединены. Можно изменить количество, удалить или добавить товар, скорректировать адрес и сразу увидеть итоговую сумму — все в одном окне. 

Отдельное внимание уделили блоку «Стоит добавить» — инструменту апсейла. В нем появляются товары, которые пользователи часто забывают: кисти, спонжи, спреи, косметички. 

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

Квиз-подбор: как выбрать свой тон из 50 оттенков бежевого

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

Чтобы выбор, мы встроили квиз в каталог. Пользователь отвечает на вопросы и получает рекомендацию: конкретный оттенок или уход с возможностью добавить в корзину или купить пробник.

До/после: как показать эффект без слов

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

Бэкенд: гибкость, скорость и архитектура на вырост

Когда в 2021 году мы начали работать над новой версией сайта, основной технической задачей было все ускорить. Старый проект на типовом Битриксе тормозил из-за тяжелых компонентов и ограничений архитектуры. 

Мы решили оставить Битрикс как админку — с удобной панелью для контент-менеджеров и готовыми модулями для оплаты и доставки. Но построили новый фронт на React + Next.js. Чтобы связать эти два мира, понадобилось полноценное промежуточное звено — собственный API-слой на GraphQL. 

Для этого пришлось фактически переписать ядро работы корзины. В Битриксе корзина — огромный монолитный класс, заточенный под типовые шаблоны. 

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

Вся бизнес-логика вынесена в отдельный слой, который мы построили по принципам микросервисной архитектуры: Битрикс работает со своей базой, наш GraphQL-бэкенд — со своей, синхронизация происходит через ORM Prisma.

Такой подход дал нам такие преимущества:

• API стал работать примерно на 60% быстрее.
• Мы добавляем сущности вроде наборов, лукбуков и пробников без правки ядра CMS.
• Если в будущем появится мобильное приложение, переписывать API не придется — под него уже все готово.

Вместо итогов

Инфлюенсеры дают трафик. Но если у бренда нет сайта, который конвертирует, и внятного присутствия в поисковой выдаче, — воронка схлопывается. После просмотра сторис или рекламного поста пользователь идёт в Google или Яндекс, а после — в каталог. 

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

Ваш сайт может продавать не хуже маркетплейсов. И даже стабильнее

Мы умеем превращать знание о бренде в конверсии, а интерфейсы — в работающие воронки. Если вам понравился этот кейс и наши подходы — напишите нам, обсудим, как можно усилить ваш проект.