SW‑STRAZY: Как редизайн увеличил конверсию на 40%

TL;DR

SW‑STRAZY.ru — лидер продаж страз Swarovski в СНГ. Переделали дизайн интернет‑магазина с фокусом на мобильную версию. Конверсия с мобильных выросла на 39,8%, у новых пользователей — в два раза.

Pitch

К нам пришёл SW‑STRAZY.ru с низкой конверсией на мобильных из‑за устаревшего дизайна и тяжёлого каталога: до 100 цветов и 5 размеров на один артикул, новые покупатели терялись. Мы провели аудит, упростили структуру каталога, разработали лёгкий дизайн под специфику товара и собрали адаптивную вёрстку на HTML5 с Sass и Flexbox. За 5 месяцев после запуска мобильная конверсия выросла на 39,8%, конверсия среди новых пользователей — в два раза, скорость загрузки — почти в два раза.

Контекст клиента

SW‑STRAZY.ru — лидер продаж страз Swarovski в СНГ в 2020 году. Прямое сотрудничество со Swarovski даёт низкие цены и широкий ассортимент. Основная целевая аудитория — мастера по пошиву костюмов для спортивной гимнастики и фигурного катания, а также те, кто создаёт украшения.

Каталог сложный: у одного артикула кристалла может быть до 100 цветов и до 5 размеров, что формирует сотни модификаций товара.

Задача

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

Что сделали

1. Анализ и выявление проблем

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

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

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

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

2. Разработка дизайна

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

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

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

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

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

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

Леонид, веб‑дизайнер Intensa:

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

3. Решения, которые повлияли на конверсию

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

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

1. Сделали адаптивный фильтр для каталога и карточки товара в модальном окне. Это убрало лишние страницы и упростило просмотр подробной информации о товаре.
2. Запустили маркетинговую строку, которая меняется каждые 10 секунд: «Бесплатная доставка», «Беспроцентные платежи по карте». За несколько секунд покупатель узнаёт об акциях и спецпредложениях.

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

Упростили структуру каталога: теперь 10 категорий и 2 уровня вложенности вместо трёх.

На кнопке «Корзина» вывели сумму заказа, количество позиций и применённую скидку. Так покупатель не видит «неожиданную сумму» — это сокращает отказы из корзины.

Тултип возле «Корзины» — «До получения скидки 10% осталось купить на 4000 руб» — показывается, если сумма корзины меньше условий акции. Это помогает увеличить средний чек.

4. Вёрстка и разработка

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

Реализовали адаптивную вёрстку нового магазина по стандарту HTML5 — корректное отображение страниц на ПК, ноутбуках, планшетах и смартфонах. Использовали современные тенденции фронтенда: сборщик gulp, препроцессор Sass, Flexbox layout, SVG‑графику. Скорость загрузки страниц выросла на 45% — 3,96 секунды против 7,29 секунды.

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

Результат

Оцениваем результаты работы нового сайта через 5 месяцев после запуска — с 1 октября 2019 года по 29 февраля 2020 года.

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

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

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

Метрика	Значение
среднее время загрузки страницы	3,96 сек против 7,29 сек
конверсия в мобильной версии	+39,8%
конверсия среди новых пользователей	+102,6%
доход со смартфонов	+36,4%

Отзыв клиента

Вадим Богомолов, управляющий директор SW‑STRAZY:

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

Где проект сейчас

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

Команда

• Кирилл Трофимов — генеральный директор
• Леонид — веб‑дизайнер

Технологии

HTML5, Sass, gulp, Flexbox, SVG.

Ссылки

• Публикация: https://intensa.ru/⁠blog/⁠sw‑strazy‑kak‑redizajn‑uvelichil‑konversiyu‑na‑40/
• Сайт клиента: https://sw‑strazy.ru/