Изображение предоставлено агентством «Четвертый Рим» с сайта https://4rome.ru/

 

Как сделать редизайн на работающем сайте и получить +700 заказов в месяц: метод поэтапных улучшений для интернет-магазина косметики

 

Кейс агентства “Четвертый Рим” о том, как улучшить сайт интернет-магазина, не прекращая его работы и получить +700 заказов в месяц.

Заказчик проекта: Интернет-магазин профессиональной косметики kosmetika-proff.ru

Задачи проекта: увеличить конверсию на сайт путем редизайна.

 

Решение задач

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

У агентства «Четвертый Рим» было удобное решение – сделать редизайн имеющегося сайта без его остановки. Сначала нужно было предпринять экстренные меры для прекращения потери трафика, у клиента начинался предновогодний сезон в октябре 2020 года. Агентством были сделаны нужные технические доработки и выбран метод поэтапных улучшений (МПУ). 

Агентство полностью перестроило сайт интернет–магазина, внося изменения без остановки работы. 

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

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

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

 

Проведение редизайна сайта за 10 шагов

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

  1. Обновление шапки сайта.

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

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

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

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

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

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

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/
  1. Упорядочивание информации в карточке товара.

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

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

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

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/
  1. Внедрение умного поиска.

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

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

Для улучшения было предложено внедрить умный поиск с подключением внешнего интерфейса multisearch.io. Теперь умный поиск показывает категории, релевантные разделы, топовые разделы появляются в выпадающем поле на той странице, где находится пользователь. Спустя несколько месяцев были отработаны алгоритмы поиска и агентством создан собственный умный поиск на базе модуля в Битрикс.

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

  1. Улучшение брендовых страниц.

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

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/
  1. Переработка каталога.

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

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

Дальше усовершенствован список товаров в выдаче каталога. До редизайна товары имели 2 вида кнопок: для одного типа товара кнопка «купить», для другого кнопка «подробнее», позволяющая подбирать параметры. Заказчик настаивал, что нужна только прямая кнопка «купить». Агентство провело эксперименты с замером конверсии по типам кнопок. Выяснилось, что лучше всего работает кнопка «купить», ведущая к параметрам карточки товара. То есть кнопка, работающая как «подробнее».

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

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

  1. Изменения на главной странице сайта.

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

Фирменный стиль страницы был сохранен, сделаны изменения в дизайне. Главная была запущена в феврале 2022 года, результаты приведены ниже:

➠ время пребывания посетителя на сайте выросло с 4:55 до 6:04 минут

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

➠ глубина просмотра страниц увеличилась с 5,81 до 7,83

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

➠ отказы сократились практически в 2 раза: с 14,2 до 7,63%

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/
  1. Добавление баннеров.

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

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

На главной еще сделаны 2 баннера под акции и спецпредложения. Клиент может свои активности размещать самостоятельно. 

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/
  1. Изменение корзины.

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

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

Новая корзина запущена в середине августа 2022 года:

➠ число покупок возросло на 16% в месяц,

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

 ➠ доля посетителей, сделавших заказ, выросла с 2,29 до 2,43%,

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

➠ доход увеличился на 12% в месяц.

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/
  1. Создание блога.

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

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

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

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

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

Блог стабильно привлекает 11% от всего трафика в 2023 году, при этом постоянно растет.

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/
  1. Обновление раздела «Акции».

Совместно с заказчиком идет поиск дизайна этого раздела.

Результат решения задач

Применение МПУ дало клиенту заметные преимущества:

Изображение предоставлено агентством «Четвертый Рим»  с сайта https://4rome.ru/

За 2 года проекта (с октября 2020 года по октябрь 2022 года) интернет-магазин показал следующие результаты:

  • Рост в 2,4 раза в месяц — по визитам из поисковиков.
  • Рост по заказам в 1,8 раза.
  • Рост по доходу в 2,1 раза в месяц.

 Смотрите другие кейсы агентства «Четвертый Рим».