KWC

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

Сделать редизайн с учетом современных требований к UX и потребностей целевой аудитории — женщины 30–40 лет.

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

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

Проанализировали нишу, изучили референсы, выделили лучшие решения и предложили собственное видение, которое клиент одобрил.

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

Клиент отправлял макеты на согласование партнёрам в Японии и получил от них одобрение.

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

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

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

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

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

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

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

Изображения работают вместе с текстом — так у пользователей формируются четкие ассоциации. Это важно, потому что часть пользователей лучше воспринимает визуальную информацию, а часть текстовую.

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

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

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

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

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

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

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

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

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

В блоке представлены два типа отзывов:

• отзывы на сайте бренда;
• агрегированные отзывы с маркетплейсов.

Для каждого типа отзывов работает своя механика: если он оставлен на сайте, то кликнув, можно перейти на страницу продукта или отзыва. А если отзыв спарсен с маркетплейса, то перейти на страницу товара.

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

• привлекают новых посетителей из поиска;
• демонстрируют экспертность бренда и заботу о пользователе;
• нативно рекомендуют подходящие товары в специальном блоке.

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

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

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

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

Большое внимание уделено визуальной составляющей.

Мы подготовили хедлайн для создания изображений к товарам, то есть составили список требований, по которым снимались фотографии для каждого товара.

Основные ракурсы:

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

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

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

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

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

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

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

В конце расположен блок с рекомендациями — товарами, которые компания рекомендует к покупке.

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

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

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

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

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

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

Около 80% источников трафика — мобильные устройства, поэтому регистрация и авторизация по номеру телефона удобнее всего. А в списке заказов вывели изображения из заказа, чтобы не пришлось проваливаться глубже.

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

Поиск на сайте — это важная функция, которая помогает пользователю найти нужные товары. Исследования Baymard Institute показали, что 60% пользователей начинают взаимодействие из поиска по сайту.

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

На данном проекте поиск имеет расширенный функционал, при наборе фразы он предлагает:

• поисковые подсказки и возможные варианты;
• подходящие товары с переходом на карточку товара;
• просмотр всех товаров в нужной категории.