Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

Если хотите быть в курсе трендов в UX/UI- дизайне, подписывайтесь на наш Telegram-канал.

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

Рассказываю, какие решения были приняты и как они повлияли на бизнес-метрики.

Клиент. KWC — бренд косметики и биологически активных добавок из Японии, представленный на рынке с 2009 года. Ключевая идея продукта — синергия: косметические средства и нутрицевтика используются совместно, усиливая общий эффект.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результаты

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

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

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

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

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

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

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