От нишевого магазина до e-commerce-платформы: 10 лет развития KM Cosmetics

Заказчик

KM Cosmetics — российский бренд минеральной косметики, который за 10 лет вырос от небольшого стартапа до собственного производства с широкой линейкой продуктов.

Задача

Развивать интернет-магазин вслед за ростом KM Cosmetics: масштабировать каталог и функциональность, упрощать выбор и покупку косметики, связывать контент с продажами и сохранять накопленный SEO-трафик

Бренд минеральной косметики KM Cosmetics был запущен в 2015 году. В то время спрос на такую продукцию был узким — по ключевым запросам в Яндексе было всего 500 запросов.

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

Пока KM Cosmetics развивали бренд, мы развивали сайт: за это время он прошел путь от простого решения на OpenCart до полноценного e-commerce-сайта с современной архитектурой на Bitrix, React и Next.js.

Выводим продукт на рынок

На первом этапе задача была быстро вывести продукт на рынок и получить первые заказы. Для этого мы собрали интернет-магазин с простым функционалом — каталогом, карточками товаров и журналом — на базе платформы OpenCart.

Показываем продукты со всех сторон, чтобы растить продажи

1. Создаем контент о продуктах

В 2015 году многие не знали, что такое минеральная косметика. Чтобы объяснить ее ценность, мы первым делом добавили на сайт журнал — медиа-раздел с подборками продуктов и с обзорами трендов. С 2017 года контент стал выходить регулярно. Клиент писал и редактировал тексты, а мы предоставили SEO-каркас, структуру, верстку и формулировали темы под спрос. А позже, чтобы усилить влияние контента на продажи, сделали перелинковку между статьями и страницами продуктов.

2. Показываем, как можно комбинировать продукты между собой

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

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

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

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

3. Даем слово счастливым покупателям

Бренд делает ставку на UGC-отзывы с фотографиями и свотчами: их можно листать как ленту и делиться конкретными отзывами по ссылкам. Отзывы не чистят, и это помогает усилить доверие к бренду.

Помогаем с выбором продукта

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

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

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

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

В 2022 году у KM Cosmetics появились уходовая и детская линейки. Мы не стали создавать под них отдельные сайты, а встроили в существующую платформу как самостоятельные разделы с общей корзиной и единой системой скидок.

Так бренд получил возможность расширять ассортимент, не теряя существующую аудиторию и не прерывая пользовательский путь.

Убираем лишние шаги из процесса покупки

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

В новой версии мы объединили корзину и оформление заказа в одном интерфейсе.

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

Проектируем техническую архитектуру

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

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

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

В результате API стал работать примерно на 60% быстрее. Новые сущности — наборы, лукбуки и пробники — теперь можно добавлять, не внося изменения в ядро CMS. А если в будущем у KM появится мобильное приложение, для него можно будет использовать существующий API вместо разработки нового с нуля. 

Результат

За 10 лет сайт прошел путь от нишевого магазина на OpenCart до полноценной e-commerce-платформы. Сайт масштабируется вместе с бизнесом: его не нужно переделывать с нуля, чтобы добавить новый продукт, раздел или функционал.

Перейти на сайт