Power Driven

Выглядел сайт нормально. Беда была в том, что он мешал покупать. Я разобрал раздутый и запутанный магазин запчастей и пересобрал его вокруг одной задачи — довести покупателя с главной до нужной детали. Задачи стали решать на 35% быстрее, отказов стало на 20% меньше. Люди перестали гадать и начали покупать.

1. Чтобы нужная деталь находилась сразу
   Сделать навигацию проще и площе, убрать шум.

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

3. Меньше отказов, больше доверия
   Сделать уверенный и понятный интерфейс: быстрый, собранный, профессиональный и непохожий на остальные сайты автозапчастей.

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

Разработчик и руководитель маркетинга. На мне были UX-аудит, вайрфреймы, дизайн интерфейса, тестирование и передача в разработку.

Трафика у Power Driven Diesel было много, но сайт был перегружен, запутан и медленно работал. Нужный товар найти было трудно, и многие уходили, так и не дойдя до корзины.

Корень проблемы: хаотичная вёрстка и непонятная навигация мешали продажам.

Меня позвали это исправить. Решали в основном не новым визуалом, а продуманным UX — чтобы детали для тюнинга быстрее находили и покупали.

Чтобы понять, где люди теряются, я провёл полную диагностику:

• UX-аудит: визуальный мусор, разнобой в интерфейсе и лишние кнопки

• Интервью с 10 пользователями: люди говорили, что «не понимали, с чего начать», или бросали поиск на полпути

• Разбор конкурентов: сравнил с лучшими автомобильными магазинами, чтобы понять планку UX

• Встречи с заказчиком: уточнили бизнес-цели — поднять средний чек и сократить отказы — и от них расставили приоритеты

UX-стратегия

• Меньше уровней в навигации, проще категории

• Карточки товаров перестроены так, чтобы их было легко читать по диагонали

• Больше воздуха и меньше лишних элементов

Вайрфреймы и тесты

• Вайрфреймы низкой и высокой детализации в Figma

• A/B-тесты главной и пути до товара

• Доработки по обратной связи — особенно поиск, фильтры и группировка контента

Визуальный дизайн

• Цельная UI-система:
  • Современная жирная типографика, которая звучит технично и уверенно
  • Чистая палитра под суровый характер бренда
  • Микроанимации, которые подсказывают, но не отвлекают

Передача в разработку

• Переиспользуемые компоненты для разработчиков: карточки товаров, меню, кнопки

• Участвовал в QA и тестах после запуска, чтобы дизайн не развалился в продакшене

Вот что показали тесты прототипов в Maze: