Редизайн интернет-магазина премиальной косметики: как мы увеличили конверсию на 127%

Текущий сайт не справлялся с ролью инструмента продаж. Интерфейс не соответствовал современным UX-стандартам, а устаревшая структура ограничивала внедрение маркетинговых механик. В результате ресурс не поддерживал развитие бизнеса, а скорее сдерживал его. Чтобы решить проблему системно, было принято решение о полном редизайне.

Нужно было разработать новый интернет-магазин с учетом актуальных UX-практик и особенностей целевой аудитории — женщин 35–45 и 50+.

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

Предпроектный анализ

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

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

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

В категории «Косметика» пользователь проходит путь от категории к подкатегории и далее к товару.

В «Биодобавках» предусмотрено два способа навигации — по алфавиту и по категориям.

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

Решение актуально из-за небольшого ассортимента и реализовано для десктопа. На мобильных устройствах используется классическая логика меню.

Основное внимание уделили визуалу. Крупные изображения позволяют рассмотреть продукт без дополнительных действий.

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

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

1) Рекомендации

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

2) Акции и популярные товары

Промо-блоки и бестселлеры оформлены в виде слайдера, чтобы не перегружать интерфейс.

Популярные позиции вынесены на второй экран, что сокращает путь пользователя к покупке.

3) Наборы товаров

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

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

4) Кабина красоты

«Кабина красоты» — это офлайн-сервис бренда, позволяющий протестировать продукцию в салоне. Услуга доступна в Москве и Санкт-Петербурге.

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

Для косметики это критично: многие характеристики можно оценить только при использовании. Такой опыт снижает сомнения и повышает вероятность повторных покупок.

5) Отзывы

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

Механика взаимодействия зависит от источника: внутренние отзывы ведут на страницы сайта, внешние — на площадки.

6) Статьи для покупателей

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

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

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

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

7) Каталог

В каталоге нет фильтров, поскольку позиций немного — до двадцати в каждой категории и даже просмотр всех товаров занимает всего несколько экранов.

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

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

Отдельное внимание уделено визуалу — были разработаны стандарты съемки, обеспечивающие единый стиль.

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

9) Эффекты применения

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

10) Информационный блок

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

Для удобства работы реализован конструктор рич-контента, позволяющий собирать страницы без участия разработчиков.

11) Чекаут

Скрытые селекты заменены на наглядные варианты выбора.

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

12) Поиск в шапке сайта

Поиск стал важным элементом интерфейса. Он расположен в хедере и имеет расширенный функционал: подсказки, выдачу товаров и быстрые переходы.

Также поддерживается поиск по различным параметрам.

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

Эффективный поиск напрямую влияет на глубину просмотра и конверсию.

13) Инструменты для увеличения среднего чека

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

Подобные решения ранее демонстрировали значительный рост среднего чека.

Тот же принцип мы решили использовать на данном проекте — при сумме заказа от 10 тысяч рублей пользователям предлагалась бесплатная доставка. В результате средний чек увеличился более чем в 2 раза.

14) Комплексное применение

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

Это логично с точки зрения продукта и эффективно с точки зрения увеличения продаж.

15) Апсейл в корзине

В корзине реализованы дополнительные рекомендации. Пользователь может продолжить выбор товаров или добавить сопутствующие позиции перед оформлением.

Увеличили CR и AOV больше чем в 2 раза.  +127% — рост конверсии в заказ, +108% — рост среднего чека.

— Разработали дизайн всех ключевых страниц: главной, каталога, карточек товаров, корзины, чекаута и личного кабинета.

— Сформировали новое визуальное направление.

— Внедрили единые стандарты изображений.

— Обновили интерфейс с учетом UX-требований и ожиданий аудитории.

— Адаптировали решения под мобильные и десктопные устройства.

— Реализовали механики, которые повышают вовлеченность, стимулируют покупки и способствуют росту повторных заказов.