Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.
Если хотите быть в курсе трендов в UX/UI- дизайне, подписывайтесь на наш Telegram-канал.
Как правило, мы выступаем за постепенные изменения: аккуратно дорабатываем продукт, тестируем гипотезы и опираемся на аналитику. Но иногда проекты находятся в таком состоянии, когда точечные улучшения уже не дают результата — требуется полная переработка. Именно с такой ситуацией мы столкнулись в работе над интернет-магазином японской косметики KWC.
Рассказываю, какие решения были приняты и как они повлияли на бизнес-метрики.
Клиент. KWC — бренд косметики и биологически активных добавок из Японии, представленный на рынке с 2009 года. Ключевая идея продукта — синергия: косметические средства и нутрицевтика используются совместно, усиливая общий эффект.
Проблема. Текущий сайт не справлялся с ролью инструмента продаж. Интерфейс не соответствовал современным UX-стандартам, а устаревшая структура ограничивала внедрение маркетинговых механик. В результате ресурс не поддерживал развитие бизнеса, а скорее сдерживал его. Чтобы решить проблему системно, было принято решение о полном редизайне.
Задача. Нужно было разработать новый интернет-магазин с учетом актуальных UX-практик и особенностей целевой аудитории — женщин 35–45 и 50+.
Перед нами стояли задачи: создать удобный и современный интерфейс, адаптировать решения под поведение аудитории, унифицировать визуальную подачу карточек товаров, увеличить вовлеченность пользователей и внедрить инструменты, влияющие на рост конверсии и среднего чека.
Предпроектный анализ. На старте мы определили ключевые проблемные зоны, изучили конкурентов и собрали релевантные референсы. На основе анализа сформировали собственную концепцию интерфейса, которая была согласована с клиентом.
Главная страница. Основой визуального решения стала простота и ясность. Мы использовали крупные изображения и лаконичные описания, чтобы пользователь сразу получал максимум информации. Макеты были отправлены на согласование партнерам в Японии и получили положительную оценку.
Верхнее меню. В навигации реализовано многоуровневое выпадающее меню с различной логикой для разделов.
В категории «Косметика» пользователь проходит путь от категории к подкатегории и далее к товару.
В «Биодобавках» предусмотрено два способа навигации — по алфавиту и по категориям.
При наведении раскрывается структура, позволяющая либо посмотреть все товары, либо сразу перейти в карточку. Такой подход особенно удобен для постоянных клиентов, которые точно знают, что ищут, и хотят быстро попасть к нужному продукту.
Решение актуально из-за небольшого ассортимента и реализовано для десктопа. На мобильных устройствах используется классическая логика меню.
Товарный блок. Основное внимание уделили визуалу. Крупные изображения позволяют рассмотреть продукт без дополнительных действий.
Контент выстроен так, чтобы текст и изображения дополняли друг друга, учитывая разные типы восприятия информации.
В превью отображаются: изображение товара, ключевая информация о составе и назначении, объем или количество, а также рейтинг и количество заказов как элемент социального доказательства.
Акции и популярные товары. Промо-блоки и бестселлеры оформлены в виде слайдера, чтобы не перегружать интерфейс.
Популярные позиции вынесены на второй экран, что сокращает путь пользователя к покупке.
Наборы товаров. На главной странице добавлен блок с наборами. Такие предложения стоят дешевле, чем покупка товаров по отдельности, и напрямую влияют на рост среднего чека.
С учетом того, что значительная часть аудитории — постоянные клиенты, этот блок был вынесен в приоритетную зону.
Кабина красоты. «Кабина красоты» — это офлайн-сервис бренда, позволяющий протестировать продукцию в салоне. Услуга доступна в Москве и Санкт-Петербурге.
Таким образом в пользовательском пути появился дополнительный этап, который усиливает доверие и дает реальный опыт взаимодействия с продуктом.
Для косметики это критично: многие характеристики можно оценить только при использовании. Такой опыт снижает сомнения и повышает вероятность повторных покупок.
Отзывы. Для усиления доверия мы добавили отзывы как с сайта, так и с маркетплейсов. Пользователь может открыть любой отзыв и убедиться в его достоверности.
Механика взаимодействия зависит от источника: внутренние отзывы ведут на страницы сайта, внешние — на площадки.
Статьи для покупателей. Контентный блок решает сразу несколько задач: привлекает трафик, формирует экспертность бренда и стимулирует покупки.
Внутри статей размещены товарные рекомендации, что позволяет пользователю сразу перейти к покупке.
По опыту, такая интеграция значительно увеличивает конверсию, поскольку пользователь получает и информацию, и возможность сразу воспользоваться предложением.
В аналогичных проектах подобная механика позволяла почти вдвое увеличить конверсию среди читающих пользователей.
Каталог. В каталоге нет фильтров, поскольку позиций немного — до двадцати в каждой категории и даже просмотр всех товаров занимает всего несколько экранов.
Карточка товара. Карточки разработаны с упором на максимальную информативность. Пользователь получает полный набор данных: состав, способ применения, характеристики, сертификаты.
Отдельное внимание уделено визуалу — были разработаны стандарты съемки, обеспечивающие единый стиль.
Фотографии включают разные ракурсы: упаковка, продукт, использование, текстура, обратная сторона с составом. Это снижает неопределенность и помогает принять решение о покупке.
Эффекты применения. От японских коллег наш заказчик унаследовал инфографику об эффектах применения, где указаны результаты использования биологически активных добавок. У каждого средства собственные иконки, в зависимости от влияния на организм.
Информационный блок. Добавлены блоки с научной информацией, исследованиями и сценариями использования.
Для удобства работы реализован конструктор рич-контента, позволяющий собирать страницы без участия разработчиков.
Чекаут. Скрытые селекты заменены на наглядные варианты выбора. Это решение устраняет проблему, когда пользователи не замечают доступные опции и покидают корзину.
Поиск в шапке сайта. Поиск стал важным элементом интерфейса. Он расположен в хедере и имеет расширенный функционал: подсказки, выдачу товаров и быстрые переходы.
Также поддерживается поиск по различным параметрам.
В дальнейшем планируется развитие поиска: работа с ошибками, транслитерацией, тегами и свойствами товаров.
Эффективный поиск напрямую влияет на глубину просмотра и конверсию.
Инструменты для увеличения среднего чека. Были внедрены механики, стимулирующие увеличение заказа. Пользователю показывается, сколько не хватает до бонуса, и предлагаются подходящие товары.
Подобные решения ранее демонстрировали значительный рост среднего чека.
Тот же принцип мы решили использовать на данном проекте — при сумме заказа от 10 тысяч рублей пользователям предлагалась бесплатная доставка. В результате средний чек увеличился более чем в 2 раза.
Рекомендации. В карточках размещены блоки рекомендаций, которые можно гибко настраивать. Контент и коммерческие предложения чередуются, закрывая возможные возражения пользователя.
Комплексное применение. Продукты усиливают эффект при совместном использовании, поэтому в карточках предложены дополнительные позиции.
Это логично с точки зрения продукта и эффективно с точки зрения увеличения продаж.
Апсейл в корзине. В корзине реализованы дополнительные рекомендации. Пользователь может продолжить выбор товаров или добавить сопутствующие позиции перед оформлением.
Результаты
Увеличили CR и AOV больше чем в 2 раза. +127% — рост конверсии в заказ, +108% — рост среднего чека.
Разработали дизайн всех ключевых страниц: главной, каталога, карточек товаров, корзины, чекаута и личного кабинета.
Сформировали новое визуальное направление.
Внедрили единые стандарты изображений.
Обновили интерфейс с учетом UX-требований и ожиданий аудитории.
Адаптировали решения под мобильные и десктопные устройства.
Реализовали механики, которые повышают вовлеченность, стимулируют покупки и способствуют росту повторных заказов.