Назад MGN · Великобритания

Маркетплейс стройматериалов, где прораб закажет прямо со стройки

Полная пересборка сайта из начала 2000-х: исследование аудитории, UX-аудит по Baymard, новые продуктовые механики и 150+ экранов для десктопа и мобайла.

Роль
Продуктовый дизайнер, полный цикл
Работа
Напрямую с владельцем продукта и разработкой
Домен
E-commerce для строителей
Платформы
Web + Mobile
Проект в цифрах
−35%

время оформления заказа

+12%

конверсия в заказ

−30%

обращений в поддержку

+18%

повторных заказов

MGN — британский маркетплейс стройматериалов, аналог Леруа Мерлен, OBI и Максидома. На старте это был интерфейс начала 2000-х без дизайн-системы и без проверки на пользователях.

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

Сам выстроил процесс: вместо «перерисовать» — разобрать проблемы, найти метрики и сформулировать гипотезы.

  • Исследования. Интервью, обратная связь от поддержки, валидация идей тестами
  • Метрики. Зафиксировал текущие показатели и те, на которые можем повлиять. О части из них в компании не знали
  • Дизайн. UI-кит и основные интерфейсы
  • Синхронизация. Напрямую с владельцем продукта и разработкой, приоритизация сценариев

Пользователи не доводили заказ до конца, а поддержка разбирала вопросы про корзину и доставку.

БизнесПользователи
Потери на этапе оформленияСложно найти нужный товар
Высокая нагрузка на поддержкуНет даже избранного
Уступает конкурентам визуально и функциональноПустые карточки: нет отзывов и характеристик
Нет единого визуального языкаНизкий контраст, важное не выделено
Нет аналитики по ключевым действиямСайт плохо работает на телефоне
Гипотеза

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

Основные пользователи — прорабы, снабженцы и небольшие строительные компании. Часто заказывают с телефона прямо на объекте.

  • 35+, в основном мужчины, невысокая цифровая грамотность
  • Работают в полевых условиях
  • Часто заказывают одни и те же материалы
  • Чувствительны к цене
Строители — ребята с крепкими руками и крупными пальцами. Это не шутка, а практическое UX-наблюдение из тестов.

Чтобы аргументы были весомее, проверил сайт по рекомендациям Baymard Institute.

Нашёл дублирующиеся действия, неочевидную иерархию в карточке, лишние переходы, сложную информацию о доставке и контраст ниже стандартов. Затем разобрал прямых конкурентов в России и Великобритании и косвенных — Ozon, Wildberries, IKEA.

Аудит старого оформления заказа
Оформление заказа до редизайна: доставка, оплата и мобильная версия. Красные точки — проблемы, найденные в аудите: дубли действий, лишние поля и шаги, слабая иерархия. Нажмите, чтобы открыть крупно.

Из интервью, обращений в поддержку и аудита собрал job stories. Каждая описывает ситуацию, мотивацию и то, что должен дать интерфейс.

Job storyМотивацияЧто важно в интерфейсе
Когда я ищу нужный товар, я хочу быстро отфильтровать по параметрам,чтобы не тратить время на просмотр нерелевантных позицийУдобные фильтры, быстрый отклик, предварительный просмотр
Когда я собираю заказ для стройки, я хочу видеть всё в одной корзине,чтобы ничего не забыть и удобно оформить доставкуГруппировка по категориям, визуальные напоминания, автозаполнение
Когда я нахожусь на объекте с телефона, я хочу оформить заказ за 2–3 шага,чтобы не отвлекаться от рабочего процессаУпрощённый флоу, крупные элементы, минимум текста
Когда я выбираю товар, я хочу видеть отзывы и характеристики,чтобы убедиться, что он мне подходитЯркие табы, фильтр отзывов, примеры использования
Когда я оформляю заказ, я хочу понимать, где и как применяются мои бонусы,чтобы максимально сэкономитьВидимая система бонусов, индикатор выгоды, расчёт скидки
Когда я делаю повторный заказ, я хочу просто нажать «повторить»,чтобы не собирать всё заново вручнуюИстория заказов, быстрый доступ к часто покупаемым товарам
Когда я оформляю заказ, я хочу быть уверен, что ввёл всё правильно,чтобы не пришлось обращаться в поддержкуПодсказки, валидации, проверка на последнем шаге

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

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

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

Что дали механики

Бонусная программа

+18%повторных заказов

×2заказов из аккаунта

×3отзывов в карточках

«Кухни и ванные»

+22%средний чек

+30%заявок на консультацию

+25%время на сайте

Калькуляторы

24%расчётов доходят до корзины

−15%дозаказов

−30%вопросов «сколько нужно»

По job stories пересобрал ключевые разделы маркетплейса.

  • Главная. Современная сетка и интерактивные блоки
  • Категории. Новые фильтры и навигация по лучшим практикам конкурентов
  • Карточка товара. Табы с документацией, вопросами и ответами, отзывами; избранное и бонусы
  • Корзина. Три шага: корзина, оформление, оплата — и кешбэк за заказ
  • Поиск. Товар добавляется в корзину прямо из результатов
  • Личный кабинет. Способы оплаты, настройки связи, интересы и бонусы
Главная: промо-баннер, преимущества доставки, подборки товаров и крупные категории. Мобильная версия повторяет структуру, но с навигацией внизу экрана — под большой палец.
Карточка товара: цена с НДС и без, бонусы за покупку, «Часто покупают вместе» и табы с описанием, характеристиками, вопросами и отзывами.
Оформление в три шага: корзина, способ получения и адрес, оплата. Сводка заказа всегда справа, бонусы списываются в том же окне.
Мобильная версия для работы на объекте: крупные кнопки, характеристики в аккордеонах, корзина с итогом без лишних шагов.

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

  • −35% время оформления заказа: три шага вместо длинной формы
  • +12% конверсия из корзины в заказ
  • −30% обращений в поддержку по корзине и доставке
  • +18% повторных заказов благодаря бонусам
  • 150+ экранов и UI-кит уложились в бюджет внедрения
  • Редизайн — повод поговорить о метриках. Бизнес часто не знает, какие показатели может сдвинуть
  • Контекст использования решает. Стройка, телефон и крупные пальцы важнее любого тренда
  • Дизайнер может предлагать продукт. Бонусы и калькуляторы выросли из исследования, а не из ТЗ
Смотрите также

Другие кейсы

B2B CRMFinTechAdTech

Russ Online: запуск кампании на федеральной сети — за минуты

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

Минуты вместо часов на запуск креатива
DevOpsEnterpriseДашборды

Купол. Контейнеры: уязвимости и кластеры в одном окне

Продукт с нуля: JTBD, прототипы, A/B-тесты и 250+ экранов.

−25% время обработки уязвимостей
RetailUX-исследованиеПлатежи

Korzinka: касса, с которой покупатель справится без кассира

Полевое исследование, два терминала оплаты и кешбэк по QR в одном сценарии.

8 касс изучено в поле за день
NDAДизайн-системаWeb + Mobile

MON's: крипта без порога входа для обычных игроков

Лутбоксы, аналитика рынка и обучение новичков: год работы до закрытой беты.

180+ страниц в двух темах
FinTechMobileИсследования

Ozon Банк: с 9 до 29 млн пользователей за год

Онбординг, оформление карты в ПВЗ и QR-оплата вместо курьера как единственного канала.

40% новых карт — оформление в ПВЗ