Как редизайн интернет-магазина увеличил конверсию на 40%

1. Вводная задача от заказчика, проблематика, цели

SW-STRAZY.ru, лидер продаж страз Swarovski в СНГ в 2020 году, обратился к нам с проблемой — низкая конверсия с мобильных устройств из-за устаревшего дизайна интернет-магазина.

Задача

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

Вадим Богомолов

управляющий директор, SW-STRAZY

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Анализ интернет-магазина

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

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

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

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

Дизайн-решение

Специфика товара, который предлагает SW-STRAZY.ru — яркость и разнообразие цветов. Эти особенности терялись на фоне устаревшего дизайна, поэтому сделали максимально легкий и ненавязчивый дизайн.

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

Создание прототипов и подход mobile-first

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

Верстка и разработка

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

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

Какие решения повлияли на конверсию и юзабилити

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

Чтобы процесс выбора товара был быстрым и удобным:

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

2. Пустили маркетинговую строку, которая меняется каждые 10 сек.. Например, «Бесплатная доставка», «Беспроцентные платежи по карте», что позволяет потенциальному покупателю за несколько секунд узнать акции и спецпредложения данного поставщика.

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

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

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

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

3. Результаты сотрудничества

Разработали новый дизайн с учетом потребностей целевой аудитории и юзабилити, что привело к увеличению конверсии в мобильной версии сайта на 39,8%.

Оцениваем результаты работы нового сайта интернет-магазина через 5 месяцев после его запуска.

Все пользователи

Рост дохода на 16,8%, рост конверсии на 22%, рост заказов на 26%.

Новые пользователи

Рост дохода на 96,7%, рост конверсии на 102,6%, рост заказов на 105,4%.

Трафик со смартфонов

Рост дохода на 36,4%, рост конверсии на 39,8%, рост заказов на 75,7%.

Вадим Богомолов

управляющий директор, SW-STRAZY

Задача была освежить дизайн и повысить конверсию продаж на мобильных устройствах (была около 1,5%) и мы решили ее на 150%. Мы получили не только классный сайт с высокой конверсией, но и надежных партнеров для дальнейшего развития сайта, дизайна, SEO и контекстной рекламы. Неожиданным для нас стал уровень погружения и перфекционизм команды проекта.

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

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