Доработка и редизайн интернет-магазина для бренда мужской косметики Beardman

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

Технологии:WordPress, WooCommerce, PHP, HTML5, CSS3 (SCSS), JavaScript (jQuery, Vue.js для интерактивных элементов), REST API (доставка, UniSender).

Картинка 1
Цели и Задачи

Основные бизнес-задачи заказчика были четко сформулированы:

  1. Повышение конверсии: Увеличить процент посетителей, которые становятся покупателями, особенно в мобильной версии.
  2. Увеличение среднего чека: Внедрить инструменты, стимулирующие к покупке большего количества товаров.
  3. Улучшение клиентского опыта (CX): Упростить процесс оформления заказа, сделать его прозрачным и понятным, что особенно важно для повышения доверия к онлайн-покупкам.
  4. Автоматизация маркетинга: Настроить систему автоматических коммуникаций для удержания клиентов и стимулирования повторных покупок.
  5. Повышение вовлеченности: Добавить интерактивные элементы для увеличения времени на сайте и роста базы контактов.
Целевая Аудитория
  • Мужчины 25-45 лет, следящие за внешностью, ценящие качество и удобство.
  • Подарочная аудитория: Женщины, выбирающие подарки для мужчин.
  • Новички и эксперты в мире ухода за бородой, от ищущих первый набор до ценителей профессиональных средств.
Картинка 2
Проектирование и Дизайн

Подход к UX/UI:

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

Концепция визуального стиля:

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

  • Цвет: Усилили акцент на фирменном цвете бренда, используя его для кнопок и ключевых элементов, что повысило их заметность. Общая палитра стала более контрастной и чистой.
  • Типографика: Выбрали четкие, легкочитаемые шрифты без засечек, что улучшило восприятие текста с экрана.
  • Композиция: Использовали больше «воздуха», крупные качественные фотографии продуктов, что подчеркнуло их премиальность.

Ключевые внедренные элементы:

  • Новая корзина с возможностью применения купонов: Была разработана интуитивно понятная корзина, где промокод можно применить в один клик, а итоговая сумма с учетом скидки отображается сразу.
  • «Колесо фортуны» (лотерея): Интерактивный виджет, запускаемый при посещении сайта или после оформления заказа. Пользователь может выиграть скидку или подарок, что решает задачу повышения вовлеченности и роста email-базы.
  • Оптимизированный процесс оформления заказа: Форма была максимально упрощена, добавлен выбор способа доставки с автоматическим расчетом стоимости и сроков прямо на этапе checkout.
  • Улучшенная система рекомендаций: На страницах товаров и в корзине были добавлены блоки «С этим товаром покупают» для увеличения среднего чека.
Картинка 3
Техническая Реализация

Проект был реализован на WordPress с использованием WooCommerce.

  • Интеграция со службами доставки: Через API были подключены сервисы СДЭК и «Почта России», что позволило реализовать автоматический расчет стоимости и сроков доставки в зависимости от адреса и веса заказа.
  • Интеграция с UniSender: Настроена синхронизация данных о заказах и клиентах. Реализованы триггерные цепочки писем (подтверждение заказа, статус доставки, пост-продажное обслуживание). Автоматически собирается база подписчиков с «Колеса фортуны».
  • Кастомная разработка: Были кастомно разработаны модули «Колеса фортуны» и доработана логика работы корзины и купонов для максимальной гибкости.
Результаты и Эффект

Обратная связь от заказчика:

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

  • Ключевые метрики после запуска (за первые 3 месяца):
  • Конверсия сайта в покупку увеличилась на 25%.
  • Средний чек вырос на 15% благодаря перекрестным продажам и удобному применению купонов.
  • Снижение процента брошенных корзин на этапе оформления заказа на 30%.
  • Запуск «Колеса фортуны» принес более 2000 новых подписчиков в базу для email-рассылок за первый месяц.

Основные вызовы и их преодоление:

  1. Вызов: Интеграция расчета доставки в реальном времени без перегрузки сайта.
    Решение: Мы реализовали асинхронную (AJAX) отправку запросов к API служб доставки после ввода пользователем адреса. Кэширование тарифов для популярных направлений помогло снизить нагрузку.
  2. Вызов: Разработка «Колеса фортуны», которое должно было быть максимально вовлекающим, но при этом защищенным от накруток и корректно работать на мобильных устройствах.
    Решение: Создан кастомный плагин с админ-панелью для гибкой настройки вероятностей выигрыша, ограничений по времени и количеству вращений. Анимация была оптимизирована с помощью CSS3 и JS для плавной работы на всех устройствах.
  3. Вызов: Перенос данных и настройки сложных маркетинговых правил для купонов (накопительные, для определенных категорий товаров, комбинированные) без потери истории.
    Решение: Проведена тщательная инвентаризация старых промо-механик. Функционал WooCommerce был расширен с помощью дополнительных плагинов и кастомного кода для реализации всех бизнес-требований заказчика.

Этот кейс — пример того, как можно решить конкретную задачу и получить измеримый результат.

Разберитесь в подходе, деталях реализации и ключевых выводах.
Есть похожая задача? Опишите её — предложим решение с учётом вашего контекста.

Наши клиенты

Логотип компании Федеральная служба по контролю за алкогольным и табачным рынками Логотип компании РИТ групп Логотип компании Sopytka Логотип компании Аксиоматика Логотип компании NETSOFT Логотип компании UNIVEF Логотип компании ГИЛС Логотип компании МГЮА Логотип компании ФССП России Логотип компании Центринформ Логотип компании Азбука вкуса Логотип компании АИС «Выпускник» Логотип компании Ай-Теко Логотип компании Inline Логотип компании АЮРО Логотип компании ВентЭйт Логотип компании ТехникаПРО Логотип компании Млесна
Логотип компании Млесна Логотип компании ТехникаПРО Логотип компании ВентЭйт Логотип компании АЮРО Логотип компании Inline Логотип компании Ай-Теко Логотип компании АИС «Выпускник» Логотип компании Азбука вкуса Логотип компании Центринформ Логотип компании ФССП России Логотип компании МГЮА Логотип компании ГИЛС Логотип компании UNIVEF Логотип компании NETSOFT Логотип компании Аксиоматика Логотип компании Sopytka Логотип компании РИТ групп Логотип компании Федеральная служба по контролю за алкогольным и табачным рынками

Отзывы о нас

Наша команда

G-lab - Павел

Павел

Генеральный директор, архитектор

G-lab - Владимир

Владимир

Заместитель генерального директора по тех. вопросам, руководитель отдела Back-end разработки

G-lab - Александр

Александр

Руководитель отдела фронтенд разработки

G-lab - Анна

Анна

Руководитель отдела разработки CRM и веб систем

G-lab - Катерина

Катерина

Ведущий специалист по внедрению СЭД

G-lab - Валерий

Валерий

Ведущий Java разработчик, DevOps

G-lab - Павел

Павел

Ведущий разработчик веб систем

G-lab - Елена

Елена

Ведущий Front-end разработчик

G-lab - Наталья

Наталья

Ведущий эксперт по пользовательским интерфейсам и дизайну

G-lab - Максим

Максим

Старший аналитик

G-lab - Татьяна

Татьяна

Главный бухгалтер

G-lab - Валентина

Валентина

Специалист по сопровождению контрактов


Свяжитесь с нами — обсудим вашу задачу

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