NAOS 2.0

NAOS — французская косметическая компания. Производит уходовую косметику с 1977 года. Сначала появился бренд Bioderma, затем — Institut Esthederm и Etat Pur, а в 2017 году деятельность трех направлений была объединена в единую компанию — NAOS. Сегодня концерн включает более 50 филиалов в разных странах мира, а продукция представлена в 130 странах.

Мы работаем с клиентом с самого начала, с 2019 года — разрабатывали текущий интернет-магазин для российского представительства. В рамках проекта реализовали концепцию shop-in-shop для продажи продукции трёх брендов концерна на базе единой платформы. Для этого разработали интерфейсы, внедрили и настроили интеграционный слой с внешними системами.

Подробнее в кейсе→

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

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

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

Рассказываем о технической поддержке и коммерческом развитии проекта.

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

С запуска проекта выручка интернет-магазина выросла на 347%, а средний чек на 77%.

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

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

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

Что внедрили

1. Убрали «хлебные крошки» на этапах оформления заказа и в корзине

По данным аналитики, пользователи часто отвлекались на «хлебные крошки». Например, на мобильных устройствах так поступало около 25% пользователей.

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

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

2. Убрали в корзине кнопку «Продолжить покупки»

На странице корзины убрали кнопку «Продолжить покупки», поскольку ссылка вела на главную страницу.

Среди тех, кто посетил корзину, на кнопку нажимают около 5%, а из этого числа только 38% возвращались и завершали оформление заказа.

3. В корзине реализовали возможность добавить товары в избранное

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

4. Вынесли кнопку «Оформить заказ» в правый сайдбар и закрепили при прокрутке

Кнопка «Оформить заказ» располагалась внизу страницы, из-за чего приходилось лишний раз прокручивать страницу, особенно при наличии в корзине большого количества товаров.

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

Кроме того, зафиксировали на месте всю область с кнопкой «Оформить заказ», теперь прокручивается только список с товарами. Так пользователи получили быстрый доступ к кнопке CTA при прокрутке.

5. Убрали выбор пробников из отдельного этапа и расположили блок в корзине

Этап выбора пробников располагался на отдельной странице, следующей после корзины. Как показали результаты аналитики, на стадии выбора пробников завершалось до 20% пользовательских сеансов.

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

На скриншоте ниже представлен исходный вариант. В следующем — после доработок.

6. Доработали блок выбора пробников

Старая реализация блока выбора подарков имела ряд явных неудобств.
Какие доработки внесли:

• Сделали акцент на том, что подарков можно выбрать только три.
• Заменили чекер с галочкой на кнопку с надписью «Выбрать», при выборе кнопка меняется.
• Вынесли описание пробников на иконку.
• Как только пользователь выберет третий пробник, все остальные варианты становятся неактивными, раньше же была возможность выбрать больше пробников, но выводилось предупреждение.
• При переходе в чекаут и обратно в корзину выбранные пробники сохраняются.

7. Объединили выбор способа доставки и оплаты на одной странице

Оформление заказа через сайт включало в себя три основных этапа:

1. Выбор пробников.
2. Заполнение контактной информации и выбор способа доставки.
3. Выбор способа оплаты и подтверждение заказа.

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

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

На скриншоте ниже представлен исходный вариант. В следующем — после доработок.

8. На мобильных устройствах закрепили кнопку «Оформить заказ» внизу экрана и спрятали шапку при прокрутке

В корзине и на странице чекаута закрепили внизу экрана кнопку «Оформить заказ».

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

9. Добавили информацию о составе заказа на страницу чекаута

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

Что внедрили

Произвели редизайн карточки товара.

1. Добавили возможность увеличить изображение

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

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

2. Убрали увеличение изображения при наведении

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

3. В слайдере превью добавили стрелки вверх/вниз

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

4. Акцентировали внимание на названии товара

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

5. Рейтинг товара вынесли в привычное место

Рейтинг товара (звездочки) вынесли в привычное место под названием товара, а информацию о наличии — рядом с ценой и кнопкой CTA.

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

6. Добавили ссылку на рейтинг товара

При клике на рейтинг (звездочки) настроили автопрокрутку до блока «Отзывы». По данным тепловых карт, пользователи часто кликают на рейтинг товара, ожидая прокрутки страницы.

7. Заменили текст ссылки «Оставить отзывы»

По данным аналитики, по ссылке «Оставить отзыв» в карточке товара, кликали в среднем 10–15 раз в день, и только 2% оставляли отзыв после клика на ссылку.

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

На скриншоте ниже представлен исходный вариант. В следующем — после доработок.

8. Добавили прокрутку в выпадающей корзине

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

Приняли решение добавить прокрутку, а кнопки «Очистить корзину» и «Перейти в корзину» зафиксировать.

На скриншоте ниже представлен исходный вариант. В следующем — после доработок.

9. Добавили автоматическое определение местоположения в карточке

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

10. На отдельные товары добавили информацию о бесплатной доставке

Несмотря на то, что при заказе от 4 000 рублей товар доставка будет бесплатной, на товарах свыше этой цены выводилась общая информация о платной доставке. Это противоречило условиям самого магазина.

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

На скриншоте ниже представлен исходный вариант. В следующем — после доработок.

11. В карточке товара добавили информацию о подарке

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

Сайт использовал стандартный поиск от «Битрикса», который, к сожалению, имел несколько ограничений в своем функционале. В частности, он не мог распознавать синонимы и опечатки, и не всегда точно соответствовал запросам пользователей.

Внедрили улучшенный поиск на новом движке Sphinx

Основная цель, которая стояла перед нами, — добиться релевантности поиска. Для этого внесли ряд улучшений:

• внедрили поисковый движок Sphinx;
• при активности строки поиска реализовали показ попапа, с быстрыми ссылками;
• при вводе запроса — вывод релевантных товаров с распознаванием ошибок, опечаток и т. д.

С блогом было несколько проблем:

1. Сложная структура, статьи на 3–4 уровнях вложенностях.
2. Выбор категории через выпадающий список.
3. Поиск работал только с перезагрузкой страницы, следствием чего были низкие поведенческие показатели.
4. Низкие показатели по электронной торговле: просмотры, клики и добавления товаров в корзину со страниц блога.

Что внедрили

1. Редизайн блога и оптимизация структуры

Провели полный редизайн блога:
– отрисовали разводящую страницу блога;
– отрисовали статейные страницы;
– оптимизировали и упростили структуру медиараздела.

Результаты

Для отслеживания поведенческих показателей используем отчет «Контент» в «Яндекс.Метрике».

Для отслеживания показателей электронной коммерции используем отчет «Списки товаров» в «Яндекс.Метрике» из отчета по электронной торговле.

1. Поведенческие показатели

Статистика после редизайна.

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

2. Электронная коммерция

Получили рост всех основных показателей электронной коммерции.