Редизайн B2B e-commerce сайта по продаже промышленных станков

Платформа

Web / Mobile

Роль

UX/UI дизайнер

Сфера

B2B, промышленное оборудование

Задача — сделать внешний вид сайта более современным и повысить конверсию в заявку.

Я переработала ключевые страницы B2B e-commerce сайта. На основе данных Яндекс Метрики убрала неиспользуемые элементы, усилила CTA, добавила навигацию по разделам и sticky-header. Основной фокус — упростить выбор промышленных станков и повысить доступность заявки/покупки.

Проблемы исходного интерфейса

  1. В карточке товара цена и CTA терялись при скролле.
  2. В листинге карточки были перегружены информацией.
  3. Переключатели вида каталога почти не использовались.
  4. Пользователям было сложно быстро перейти в соседний раздел.
  5. Хедер исчезал при скролле, из-за чего навигация была недоступна.
  6. Визуальный стиль выглядел устаревшим и снижал доверие.

Пользовательские сценарии

Сценарий 1: пользователь пришёл из рекламы на карточку товара.

Его задача: понять цену, характеристики, наличие и оставить заявку.

Сценарий 2: пользователь в каталоге сравнивает несколько моделей.

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

Сценарий 3: пользователь не знает точную модель.

Его задача: перейти в нужный раздел и сузить выбор.

Исследования

Аналитика

  1. Пользователи не взаимодействовали с переключателями вида в листинге.
  2. Основное внимание приходилось на карточки товара и фильтры.
  3. Часть CTA была ниже зоны видимости.
  4. Пользователи возвращались наверх страницы для перехода в другие разделы, так как хедер не был закреплён вверху страницы при скролле.
Анализ карты кликов: переключатели вида каталога почти не используются

Конкуренты

  1. У конкурентов активнее используются крупные фото товара.
  2. Цена и CTA в карточке товара вынесены в отдельный блок.
  3. Есть быстрый доступ к категориям в листинге.
  4. Карточки в листинге проще и легче сканируются.

Ключевые UX-решения

Я не сильно меняла UI сайта, потому что ЦА довольно консервативная. Упор делался на редизайн карточки товара и листинга, так как туда обычно ведет реклама из рекламной сети Яндекса.

Разместить цену и основные CTA в правом блоке карточки товара и закрепить при скролле страницы

Пользователь сможет быстрее перейти к покупке или заявке, не возвращаясь вверх страницы. Это должно снизить трение на этапе принятия решения. Лизинг оставлен как вторичный аргумент покупки.

Разделы каталога вынести над листингом и убрать неиспользуемые переключатели вида.

Разделы каталога, вынесенные отдельными кнопками, ускорят поиск нужного оборудования. Раньше можно было выбирать варианты отображения каталога в листинге, но мы это убрали, так как данная функция, судя по Яндекс Метрике, не пользовалась спросом и работала не совсем корректно.

Упрощение карточек товара в листинге

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

Sticky-хэдер

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

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

Адаптивы

Остальные страницы

Упор делался на карточку товара и листинг, но помимо этого я сделала UI-kit для всего сайта и обновила и другие страницы.

Главная

Новости

Результат

Что изменилось

  1. Переработана карточка товара.
  2. Переработан листинг.
  3. Удалены неиспользуемые элементы.
  4. Добавлены быстрые категории.
  5. Добавлен sticky-header.
  6. Усилены CTA.
  7. Интерфейс приведён к более современному визуальному стилю.

Метрики, которые я бы отслеживала

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