Maklive — это не просто бренд авторской косметики, а полноценная экосистема, включающая собственное производство и учебный центр для косметологов. Продукция компании относится к сегменту профессиональной космецевтики, что накладывает особые требования к позиционированию в digital-среде.
Пять лет назад представители бренда обратились в агентство MEDIA WORKS с классической «болезнью роста». У бренда уже был сайт, но он перестал соответствовать масштабу компании. Это была простая площадка, которая не транслировала уникальность продукта и ценности бренда.
Что нужно было изменить:
- Для развития бренда: сайт должен продавать «эмоцию», важную для beauty-сферы.
- Для покупателей: Стильный UI, понятный выбор средств, помощь в подборе (так как продукт сложный).
- Для бизнеса: Подготовка архитектуры под внедрение Личного кабинета (ЛК) для дистрибьюторов с разными уровнями доступа, программами лояльности и оптовыми прайсами.
Глобальная задача: Разработать имиджевый интернет-магазин с нуля, который станет ключевым инструментом для отстройки от конкурентов, обеспечит масштабируемость продаж и объединит розничных покупателей и профессиональных партнеров (косметологов) в едином цифровом пространстве.
Разработка сайта для косметической компании
Команда агентства сознательно отказалась от использования простых CMS в пользу кастомной разработки на 1C-Bitrix. Почему Bitrix? Заказчику требовался полноценный интернет-магазин с высоким уровнем безопасности (персональные данные, онлайн-оплаты) и возможностью бесконечной кастомизации.
Стек технологий: 1C-Bitrix, PHP 7.4+, HTML5, CSS3 (SCSS), Vanilla JS + jQuery (для легаси-модулей), MySQL.
Аналитика и проектирование User Experience
Работа началась не с рисования макетов, а с глубокого погружения в бизнес-процессы клиента. Специалисты ориентировались на потребности и поведение двух ключевых сегментов целевой аудитории:
- B2C (Розничные покупатели): им важна визуальная подача, подробное описание состава, отзывы и простота оформления заказа.
- B2B (Косметологи и дилеры): им необходим доступ к оптовым ценам, закрытым обучающим материалам и возможность быстрых оптовых закупок.
На основе этих данных была спроектирована разветвленная структура каталога и навигации, которая интуитивно понятна обеим группам пользователей.
UI/UX Дизайн: «Чистота» как философия
В beauty-индустрии сайт — это виртуальная витрина. Если она выглядит неопрятно, бренду будет сложнее отстоять свое позиционирование. Дизайнеры агентства разработали визуальный язык, который полностью отражает премиальность бренда Maklive.
- Цветовая гамма: использованы чистые, «медицинские» цвета в сочетании с теплыми оттенками, создающими ощущение заботы.
- Воздух в верстке: интерфейс не перегружен лишними элементами. Большие отступы и акцентная типографика позволяют пользователю сфокусироваться на главном — на продукте.
- Визуальный контент: были разработаны гайдлайны для фотоконтента, чтобы карточки товаров выглядели единообразно и дорого.
Поиск и каталог
UX/UI: Навигация и Работа с каталогом
Космецевтика — сложный продукт. Пользователи ищут средства не только по типу (крем/тоник), но и по проблеме (акне, сухость). MEDIA WORKS реализовали нестандартную структуру каталога:
- Внедрили перекрестную навигацию: Раздел — Категории — Фильтрация по назначению.
- Карточка товара: сделали её компактной, но функциональной. Выбор объема реализован в один клик без перезагрузки страницы.
Smart-поиск: Понимаем сленг и опечатки
Агентство и заказчик проанализировали, как люди реально ищут косметику, и поняли, что стандартный поиск не справится. Пользователи пишут «спф» вместо «SPF», «умывашка» вместо «гель для умывания».
Решение:
Внедрили «умный» морфологический поиск с ручной настройкой словарей.
- Синонимы. Система распознает разговорные слова (например, «защита от солнца») и выдает релевантные товары, даже если этих слов нет в официальном названии или описании товара.
- Опечатки. Поиск исправляет ошибки раскладки и опечатки.
Это кратно снизило процент отказов на этапе поиска — клиент находит продукт, даже если не помнит его точное название.
Контент-маркетинг и Доверие
В нише профессиональной косметики важна экспертность и социальные доказательства, поэтому на сайте реализовали отдельные блоки.
- Библиотека ингредиентов: интерактивный справочник, где расписан каждый компонент состава и его свойства. Это снимает возражения о «химии» и показывает экспертность бренда.
- Честные отзывы: счетчик отзывов выведен прямо в превью товара. Внутри — возможность прикрепить фото «До/После», что критически важно для beauty-сферы.
Mobile First: Битва за «зону большого пальца»
Аналитика показала, что более 70% трафика в нише косметики приходится на смартфоны. Десктопная версия стала вторичной, а приоритет был отдан мобильной адаптации.
Ключевые решения для мобильной версии:
- UX-оптимизация: все ключевые элементы управления (кнопка «В корзину», меню, фильтры) вынесены в нижнюю часть экрана — в так называемую «зону большого пальца». Это позволяет комфортно пользоваться магазином одной рукой на ходу.
- Адаптивная верстка: элементы каталога динамически перестраиваются под любое разрешение экрана.
Интеграции и экосистема
Современный E-commerce не живет в вакууме. Команда агентства интегрировала сайт в бизнес-инфраструктуру Maklive, создав единое информационное пространство.
- Двусторонняя связка с CRM Bitrix24: настроена бесшовная передача заказов. Как только клиент нажимает кнопку «Оформить», заявка мгновенно попадает в CRM. Менеджеры видят полную историю коммуникации, состав корзины и статус оплаты. Это исключило потерю лидов.
- Сквозная аналитика Roistat: маркетинг без цифр — это гадание. Интеграция Roistat позволила клиенту видеть реальную эффективность рекламных каналов. Теперь бюджет расходуется только на те источники, которые приносят реальную прибыль, а не просто клики.
- Образовательная платформа Pruffme: так как Maklive активно обучает косметологов, возникла задача интеграции вебинаров. Чтобы не перегружать сервер «тяжелым» видео-контентом, разработчики изящно интегрировали платформу Pruffme. Пользователи могут регистрироваться на обучение прямо через сайт, при этом визуально оставаясь в экосистеме бренда.
- Интеграция с Edost: настроена сложная интеграция с агрегатором Edost. Калькулятор автоматически считает стоимость и сроки доставки разными службами в реальном времени.
- Оплата: подключена возможность оплаты частями через сервис «Долями» и стандартный эквайринг.
Результаты: 5 лет непрерывного роста
Проект не был сдан по принципу «сделал и забыл». Агентство работает с брендом Maklive уже более пяти лет в формате постоянной технической поддержки.
Развитие сайта:
- подарки в корзине;
- возможность размещать наборы продукции, а не по отдельности;
- доработки в разных акциях;
- оплата частями (долями).
Итог: Клиент получил не просто красивую картинку, а надежный цифровой актив, который стал фундаментом для роста продаж и масштабирования бизнеса. Эволюция проекта продолжается, доказывая, что качественный E-commerce — это марафон, а не спринт.
