Kanzler: Увеличили конверсию карточки товара интернет‑магазина Kanzler в 3 раза

TL;DR

Редизайнили карточку товара Kanzler — конверсия выросла в 3,1 раза, скорость загрузки — в 2,5 раза, бронирования — в 2,7 раза. A/⁠B‑тест, доверительный интервал 95%.

Pitch

К нам пришёл Kanzler — известный бренд мужской одежды с 80+ магазинами в 47 городах России. На старте у карточки товара был устаревший дизайн, медленная загрузка и неудобная мобильная навигация. Мы переделали дизайн, отрефакторили бэкенд и оптимизировали поп‑ап бронирования. Конверсия выросла в 3,1 раза, и мы продолжаем работать над остальными узлами сайта.

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

Kanzler — интернет‑магазин модной мужской одежды от известного бренда. Делают качественную и удобную стильную мужскую одежду для бизнеса и отдыха, для торжеств и на каждый день. Работают на российском рынке более 25 лет.

Работает более 80 магазинов Kanzler в 47 городах России: от Санкт‑Петербурга до Улан‑Удэ. В электронном каталоге бренда представлены одежда, обувь, сумки и аксессуары. Наше агентство работает над развитием и поддержкой проекта с августа 2022 года.

Задача

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

Поставили задачу редизайном карточки товара улучшить UX и производительность, сделать её более стильной, отражающей статус бренда, увеличить конверсию и добавить выбор размера по аналогии с маркетплейсом, вывести наглядно дополнительное свойство «силуэт» в основных характеристиках товара.

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

Что сделали

Работу по карточке товара выполнили в несколько этапов.

1. Анализ и разработка прототипов

Проанализировали существующую карточку товаров и разработали прототипы для десктопа и мобайла.

2. Новый дизайн

Разработали дизайн для всех элементов карточки товара.

3. Вёрстка

Сделали вёрстку макетов и внедрили её в компонент.

4. Доработки функционала

Добавили доступность товара, сделали настраиваемые блоки «С этим товаром покупают» и «Также смотрят», исправили баги функционала бронирования.

5. Рефакторинг бэкенда

Отрефакторили часть кода на стороне бэкенда. Благодаря этому уменьшилось количество SQL‑запросов и увеличилась скорость загрузки карточки. Время исполнения запросов сократилось с 2,5371 до 0,9966 секунд, число запросов — с 335 до 115.

6. Размерная сетка

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

На стороне сайта сделали вывод размерного ряда, в котором объединили международный размер и размер производителя. Сделали вывод мерок — расшифровки по размерам.

7. Дизайн бронирования

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

Результат

После того, как выполнили все работы, улучшилось три показателя.

1. Конверсия карточки выросла в 3,1 раза. Редизайн повлиял на рост показателя вместе с другими факторами: расширением ассортимента интернет‑магазина и доработкой по корректному отслеживанию остатков по складам. Для сравнения: в мае–июне 2022 года коэффициент конверсии составил 0,438%, а в мае–июне 2023 года — 1,367%. При примерно одинаковом количестве просмотров число заказов возросло в 3,4 раза. Данные о числе уникальных просмотров карточек получены из Google Analytics — на их основе провели сравнение.

2. Скорость загрузки карточки выросла в 2,5 раза. Рефакторинг кода в карточке помог уменьшить количество запросов в базу данных. Раньше время исполнения запросов составляло 2,5371 секунд, а после редизайна — 0,9966 секунд.

3. Количество бронирований выросло в 2,7 раза. Сделали более удобный дизайн бронирования и быструю загрузку поп‑апа.

Как снимали метрики

Основными метриками ставили себе задачи бизнеса: рост конверсий и заказов. И клиентскую часть: данные систем аналитики по скорости загрузки, показателям отказов, количеству запросов к базе данных. Все метрики зафиксировали на старте работ и провели анализ спустя 2 месяца после релиза. Результаты отслеживали с помощью показателей Я.Метрики и Google Analytics.

Достоверность результатов

После снятия метрик мы проверили результаты на достоверность. Использовали калькулятор достоверности Mindbox. Результаты измерений со старым дизайном обозначены вариантом А, с новым — вариантом В.

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

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

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

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

Технологии

Bitrix, Figma, Яндекс.Метрика, Google Analytics.

Ссылки

• Публикация: https://intensa.ru/⁠blog/⁠uvelichili‑konversiyu‑kartochki‑tovara‑kanzler/
• Сайт клиента: https://kanzler‑style.ru/