Изображение с сайта unsplash.com, автор фото — Andy One
Как сделать редизайн на работающем сайте и получить +700 заказов в месяц: метод поэтапных улучшений для интернет-магазина косметики
Кейс агентства “Четвертый Рим” о том, как улучшить сайт интернет-магазина, не прекращая его работы и получить +700 заказов в месяц.
Заказчик проекта: Интернет-магазин профессиональной косметики kosmetika-proff.ru
Задачи проекта: увеличить конверсию на сайт путем редизайна.
Решение задач
Интернет–магазин заказчика плохо справлялся со своими функциями, он устарел и плохо продвигался на поиске. Это грозит постоянной потерей покупателей. Обычно в этом случае создают новый сайт. Но, не все могут позволить себе тратить большой бюджет и ждать разработки примерно год.
У агентства «Четвертый Рим» было удобное решение – сделать редизайн имеющегося сайта без его остановки. Сначала нужно было предпринять экстренные меры для прекращения потери трафика, у клиента начинался предновогодний сезон в октябре 2020 года. Агентством были сделаны нужные технические доработки и выбран метод поэтапных улучшений (МПУ).
Агентство полностью перестроило сайт интернет–магазина, внося изменения без остановки работы.
Суть метода МПУ в том, что сайт не переделывается целиком, изменению подлежат лишь проблемные места, определенные эмпирически и аналитически. Метод выгоден для клиента и позволяет получать эффект от улучшений не только после каждого изменения, но и год спустя.
Проведение редизайна сайта за 10 шагов
Применение МПУ позволяет делать точечные и эффективные улучшения. Главное было привести сайт в соответствие с пользовательскими ожиданиями, улучшив его поведенческие характеристики, упростив путь покупателя к товару.
- Обновление шапки сайта.
Клиентом первоначально был предоставлен собственный вариант, который команда агентства перестроила. Макет был принят заказчиком.
Старый сайт был сделан на узкой сетке 960 пикселей, которая плохо адаптировалась в мобильной версии, это грозило потерей трафика. Изменение сетки началось с шапки, а потом перешло на все страницы.
Сетка была расширена, что сказалось на видимости меню – одну строку. Структура меню сохранилась, она была логична и удобна – по сферам применения и алфавиту. Навигация по сайту улучшилась.
В мобильной версии старое меню усложняло выбор раздела, поэтому его сделали с горизонтальной прокруткой. Удобно листать линейку без лишних кликов. Cookies скрроллируются и больше не занимают пол экрана.
- Упорядочивание информации в карточке товара.
Карточки в магазине косметики очень сложные, с множеством параметров. Например, у краски для волос много вариантов цветов. Неудобная структура была оптимизирована, все дополнительные параметры выведены в дополнительный список, характеристики и описания находятся в блоке закладок. Сама карточка содержит только ключевую информацию – товар, бренд, цена, доставка.
Основное изменение – с ведущей товарной страницы в корзину можно добавить его вариации, ориентируясь на выпадающее меню. Сохранилась и старая опция – переход в карточку для каждого параметра (например, цвета краски).
- Внедрение умного поиска.
Согласно статистике маркетплейсов, посетитель предпочитает поиск товара через поисковую строку на сайте, а в каталоге. Этот факт был взят за основу при изменении функции поиска на сайте.
Для улучшения было предложено внедрить умный поиск с подключением внешнего интерфейса multisearch.io. Теперь умный поиск показывает категории, релевантные разделы, топовые разделы появляются в выпадающем поле на той странице, где находится пользователь. Спустя несколько месяцев были отработаны алгоритмы поиска и агентством создан собственный умный поиск на базе модуля в Битрикс.
Такой подход прекрасно иллюстрирует МПУ – внедряется подходящее решение для быстрых улучшений, а параллельно идет поиск дальнейшей оптимизации для роста конверсии.
- Улучшение брендовых страниц.
Брендовые страницы притягивают максимум трафик и продаж. Они четко отвечают на потребности покупателя, который ищет товар конкретного бренда. Раньше конверсии брендовых страниц были низкими из-за путаницы в продуктовых линиях и товарах. Логика страницы сделана адаптивной для мобильной версии. Основная страница бренда показывает популярные линии, которые можно раскрыть. Ниже расположен товарный блок, слева размещены категории. В итоге брендовые страницы стали лучше конвертироваться.
- Переработка каталога.
В каталог были добавлены подборки продуктов с разными задачами — теговые страницы. Это облегчает продвижение на поиске.
Дальше усовершенствован список товаров в выдаче каталога. До редизайна товары имели 2 вида кнопок: для одного типа товара кнопка «купить», для другого кнопка «подробнее», позволяющая подбирать параметры. Заказчик настаивал, что нужна только прямая кнопка «купить». Агентство провело эксперименты с замером конверсии по типам кнопок. Выяснилось, что лучше всего работает кнопка «купить», ведущая к параметрам карточки товара. То есть кнопка, работающая как «подробнее».
Через вебвизор было проверено, какими параметрами фильтра чаще всего пользуются посетители и убраны лишние, а также пересмотрен порядок их использования.
Можно отметить здесь еще один плюс МПУ: тестирование гипотез в реальном времени, что невозможно при разработке с нуля.
- Изменения на главной странице сайта.
Работа с главной страницей была отложена на полтора года. Велись работы с внутренним наполнением, которые дают больший эффект по трафику и конверсиям.
Фирменный стиль страницы был сохранен, сделаны изменения в дизайне. Главная была запущена в феврале 2022 года, результаты приведены ниже:
➠ время пребывания посетителя на сайте выросло с 4:55 до 6:04 минут
➠ глубина просмотра страниц увеличилась с 5,81 до 7,83
➠ отказы сократились практически в 2 раза: с 14,2 до 7,63%
- Добавление баннеров.
В дизайне стало больше баннерных мест для знакомства с новыми брендами и захода на них с разных точек сайта. Под собственные бренды заказчика сделано место под баннер на главной странице в выпадающем меню.
На главной еще сделаны 2 баннера под акции и спецпредложения. Клиент может свои активности размещать самостоятельно.
- Изменение корзины.
Было добиться увеличения чека. Для этого создан новый дизайн с блоком рекомендаций и онлайн оплатой.
Новая корзина запущена в середине августа 2022 года:
➠ число покупок возросло на 16% в месяц,
➠ доля посетителей, сделавших заказ, выросла с 2,29 до 2,43%,
➠ доход увеличился на 12% в месяц.
- Создание блога.
Наполнение сайта статьями велось хаотично. Контент это важный инструмент, который позволяет позиционировать компанию как бьюти – эксперта, поэтому это преимущество надо было реализовать по полной.
Под ключевые запросы был создан план статей. У клиента появился копирайтер, создающий материалы. Дизайнеры сформировали структуру блога с оформлением страниц и переходом на товары, зашитые в тему статьи.
Ссылка на блог выведена в верхнее меню. Статьи получили стильное оформление и параметры, позволяющие понять эффективность – счетчик просмотров. Задумка была рассчитана на размещение брендовыми блогерами своих статей, но пока она не реализована из-за ограничения бюджета.
Блог стабильно привлекает 11% от всего трафика в 2023 году, при этом постоянно растет.
- Обновление раздела «Акции».
Совместно с заказчиком идет поиск дизайна этого раздела.
Результат решения задач
Применение МПУ дало клиенту заметные преимущества:
За 2 года проекта (с октября 2020 года по октябрь 2022 года) интернет-магазин показал следующие результаты:
- Рост в 2,4 раза в месяц — по визитам из поисковиков.
- Рост по заказам в 1,8 раза.
- Рост по доходу в 2,1 раза в месяц.