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

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

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

Задачи и результаты

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

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

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

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

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

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

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

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

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

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

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

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

 

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

Анализ и проектирование

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

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

Анализ воронки продаж показал, что основная потеря конверсии в смартфонах происходит на этапе просмотра каталога и добавления товара в корзину.

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

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

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

 

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

Рекомендации клиента

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

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

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

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

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

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

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

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

Леонид
веб-дизайнер Intensa
 

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

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

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

В первую очередь влияние на совершение покупки оказывают 3 фактора: наличие товара на складе, стоимость и скорость доставки.

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

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

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

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

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

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

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

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

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

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

Добавили отображение суммы заказа на кнопке «Корзина», а также количество позиций и скидка, если она применена. Это поможет избежать ситуации, когда пользователь видит «неожиданную сумму» покупок и сократить показатель отказов из «Корзины».

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

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

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

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

Для проекта использовали современные тенденции в разработке фронтенда: сборщик gulp, препроцессор Sass, Flexbox layout, SVG графику. Это способствовало увеличению скорости загрузки страниц на 45% (3,96 против 7,29 сек.), что также оказало положительное влияние на конверсию.

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

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

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

Отзывы покупателей о новом сайте

После анонса запуска интернет-магазина SW-STRAZY.ru в новом дизайне, клиент получил много отзывов в соцсетях.

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

Intensa — производственное агентство для e‑commerce.

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

Начать проект
You May Also Like

Как организовать совместную разработку двух команд на одном проекте

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

Digital-сопровождение онлайн-мероприятия CEO Summit: от разработки лендинга до техподдержки прямого эфира

Mindbox — облачная платформа автоматизации маркетинга. Компания 12 лет помогает увеличивать выручку от маркетинга. В портфеле Mindbox более 700 клиентов из e-commerce, retail…

На 3 дня ускорили выпуск материалов для журнала Mindbox, разработав редактор контента на Laravel

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

Сократили время верстки статей для блога с 4 часов до 15 минут, разработав модуль для «1С-Битрикс»

CoMagic — платформа аналитики маркетинга и продаж, которая помогает сделать рекламу прозрачной. Предлагает услуги коллтрекинга, сквозной аналитики и контроля обращений. Компания…