Doc's Diesel

Товары и трафик у Doc's Diesel были отличные, а вот магазин заставлял мобильных покупателей потрудиться. 90% посетителей приходят с телефона. Сначала им нужно убедиться, что деталь подойдёт к их машине, а потом — что этому магазину можно доверять. Сайт отвечал на эти вопросы слишком поздно или не там.

Я задаю направление магазина и веду его как продукт. По данным воронки решаю, что чинить, проектирую решение в Figma, собираю его в теме Shopify и проверяю A/B-тестами. Ещё я координирую внешних партнёров по разработке, поиску по сайту и CRO-исследованиям, чтобы все работали по одному плану.

1. Закрыть дыры в мобильном магазине
   Найти, где покупатели застревают в навигации и на карточке товара, и начать именно с этих мест.

2. Подтверждать каждое изменение данными
   Крупные изменения выпускать через A/B-тесты или запуски с замерами и честно показывать, что сдвинулось, а что нет.

3. Ускорить команду
   Заменить разовую работу над материалами дизайн-системой и инструментами, чтобы контент и тесты не ждали дизайнера.

Веду магазин от начала до конца: UX-стратегия, дизайн интерфейса, фронтенд на Shopify, программа экспериментов и партнёры по разработке, поиску и CRO-исследованиям.

Внутренние команды e-commerce, маркетплейсов и маркетинга. ConversionFlow отвечает за CRO-исследования, ещё есть партнёры по разработке темы, поиску по сайту и A/B-тестам — всех их координирую я. Проектирую в Figma и сам собираю на Shopify Liquid.

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

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

Проблема. Поиском по сайту пользовались вместо меню. Люди вбивали «отследить заказ», «военная скидка», «бонусы», «возврат», «промокод», потому что меню повторяло внутренний каталог, а не слова покупателей. Это чувствовала и поддержка: вопросы о статусе заказа составляли 41,8% всех обращений.

Исследование. Вместе с нашим CRO-партнёром ConversionFlow я провёл 9 пользовательских тестов и изучил тепловые карты Microsoft Clarity для мобильной главной. Направление определили три вывода:

• Все начинают с машины. Каждый из 9 участников первым делом выбирал свой пикап. Списки «год, марка, модель» — четыре самых нажимаемых элемента на мобильной главной.
• Меню — запасной вариант. «Бургер» оказался только пятым: 4 191 нажатие.
• Футер никто не видит. 72% посетителей даже не долистывали до него, а именно там жили отслеживание заказа, возвраты и поддержка.

Решение. Я собрал прототипы двух вариантов: меню «от машины» и меню «от задачи» — и выбрал второй. С выбором машины прекрасно справлялся подбор по году, марке и модели. Меню же отвечало за всё остальное: заказы, бонусы, скидки и помощь. Если продублировать в нём подбор, вложенность выросла бы, а поисковых запросов меньше не стало бы.

Что вышло. Меню, сделанное в первую очередь для телефона и построенное вокруг того, зачем люди приходят. Новые разделы «Бонусы» и «Поддержка» вытащили заказы, скидки, возвраты и помощь из футера — теперь до них один тап с любой страницы. Переключатель «Дизель / Бензин» остался наверху, а каталог по машинам по-прежнему в одном шаге.

Сравнивали 30 дней до запуска и 30 дней после: с 7 июля по 5 августа и с 6 августа по 4 сентября.

• Мобильная конверсия выросла с 2,40 до 2,64%, то есть на 9,9%
• Мобильная выручка на посетителя выросла на 12,4%

У сравнения «до и после» нет контрольной группы, поэтому я считаю это сильным сигналом, а не точной цифрой. Как раз поэтому все следующие изменения магазина я выпускал только через полноценные A/B-тесты.

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

Насколько это важно, показала военная скидка. Военные, которые находили своё предложение, покупали в 54% случаев и чаще, но большинство до него так и не добиралось.

Исследование. Аудит с ConversionFlow по 23 источникам данных — от аналитики и тепловых карт до пользовательских тестов.

Что изменил. Я перестроил верх страницы, где принимается решение о покупке, вокруг этих трёх вопросов:

• Подтверждение совместимости поднялось наверх, к цене
• Звёздный рейтинг переехал в правый верхний угол, где его ищут глазами
• Кнопка «В корзину» из красной стала чёрной, а цена со скидкой стоит рядом с зачёркнутой
• Текст о подписке называет конкретную выгоду: «скидка 5% и 1,5 Diesel Dollars за каждый потраченный доллар»
• Список преимуществ превратился в полосу доверия с иконками, а военное предложение получило свой блок «Ветераны и герои»
• На телефоне кнопка «В корзину» закреплена внизу экрана

Тест. A/B-тест 50 на 50 в Intelligems, 29 дней, 350 265 посетителей.

• Подписку стали выбирать 0,61% посетителей вместо 0,44%, то есть на 37,2% чаще (95-процентный доверительный интервал — от +24,8 до +50,5%)
• Проверок военной скидки в день стало почти втрое больше
• По отзывам стали кликать на 6,6% чаще

Общая выручка на посетителя не изменилась (+0,3%, в пределах погрешности). Выигрыш в структуре продаж: больше подписок, а подписчики возвращаются за новыми заказами.

Чему научил тест. Новая вёрстка опустила основную кнопку «В корзину», поэтому закреплённая кнопка почти не появлялась. Я исправляю это в следующем раунде и не называю тест безоговорочной победой.

Продолжение. Следом я проверил четыре варианта блока о доверии. Победила вёрстка «бенто»: выручка на посетителя +5,1%, добавления в корзину +3,1%, вероятность обойти контроль — 93%. Вариант с аккордеоном снизил конверсию на 5,6%, и я его отключил.

Короткая карточка. В отдельном A/B-тесте я сократил мобильную карточку товара с восьми-девяти экранов до короткой версии и убрал блоки, которые, по данным, не приносили выручку. Кнопка «В корзину» стала видна гораздо раньше, и короткая версия обошла длинную: выручка +21%.

Что дальше. Свожу 41 шаблон карточки товара к трём, чтобы каждое удачное изменение сразу появлялось во всём каталоге, а не расходилось по шаблонам неделями.

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

• Дизайн-система. Библиотека компонентов в Figma и дизайн-токены, которые продублированы CSS-переменными в теме Shopify, так что дизайн и код меняются одновременно. Комплект промо-материалов теперь делается не за рабочий день, а примерно за час — на 87% быстрее. Секции на этой основе мы собираем сами, и часов внешней разработки стало примерно вдвое меньше.
• Design Generator. Приложение на Next.js, которое я спроектировал и собрал сам. Загружаете CSV с товарами — и оно пачкой собирает картинки для карточек на маркетплейсах и в магазине, а AI пишет тексты на проверку. Команда маркетплейсов сделала его своим основным инструментом.
• Картинки для комплектов. Новой линейке нужны были изображения для тысяч комплектов, а вручную получалось не больше 30 в день. Я спроектировал AI-пайплайн с референсами, сгенерированными сценами, вырезанными объектами и трекерами. За один день он сделал 120 картинок, легко дотянет до 1 500 комплектов и стал стандартным процессом для внешнего креативного агентства.

• Программа конверсии. Когда внешнее CRO-агентство ушло, я перенёс тесты внутрь: еженедельные отчёты по конверсии и ошибкам, анализ воронки за 90 дней и бриф с гипотезой и планом замеров для каждого теста. За 33 недели разборы поймали утечку на оформлении заказа, сломанный скрипт корзины и страницы без товара в наличии, на которые по-прежнему шёл платный трафик.
• Поп-ап со скидкой. После редизайна подписок на рассылку стало на 29% больше (сплит-тест, 14 дней). Теперь его видят все посетители.
• B2B-страница для дилеров. Страница для заявок, связанная с регистрацией в дилерском портале. С запуска стабильно приводит новых оптовых клиентов.
• История бренда. Страница о семье, которая стоит за названием, — её структуру я вывел из разбора 14 конкурентов.
• Запуск бензиновой линейки. Всё, что понадобилось на сайте для новой линейки, в том числе раздел бензиновых машин на первом месте в меню.
• Расписание контента. Метаобъекты Shopify с публикацией по датам заменили ручные загрузки в каждый шаблон. Вместо часов — минуты.
• Тест главной. Идёт прямо сейчас. Первые данные: конверсия +2,4%, выручка с подписок на посетителя +27%.

«B2B-каталог и новая страница выглядят потрясающе».
Макс Нихарт, CEO Doc's Diesel

Каждая цифра — результат A/B-теста или сравнения 30 дней до и после. Тест главной ещё идёт, поэтому на графике его нет.