Оптимизация мобильного сценария покупки в B2B интернет-магазине

Best-крепеж — B2B интернет-магазин с большим каталогом продукции и сложными сценариями покупки. Основная аудитория — оптовые клиенты, которым важно быстро оформлять заказы и работать с большими объёмами товаров.

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

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

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

На мобильных устройствах это приводит к ряду проблем:

• сложно быстро найти нужный заказ
• невозможно охватить все данные без горизонтального скролла
• теряется контекст (статусы, суммы, даты)
• затруднен контроль текущих заказов

Я рассмотрела несколько подходов к адаптации таблицы: таблица с горизонтальным скроллом, карточки заказов.

Решение
Я переработала список заказов под мобильный формат:

• преобразовала таблицу в карточную структуру
• вынесла ключевую информацию (статус, сумма, дата) в верхнюю часть карточки
• добавила быстрые действия (повтор заказа, переход к деталям)
• упростила визуальную иерархию для быстрого сканирования
• выделила ключевые действия в свернутый вариант карточки

Результат

• пользователи быстрее сканируют список заказов
• упростился контроль статусов заказов
• появилась возможность быстрых действий с заказом без раскрытия всех деталей

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

• сложно быстро понять статус заказа
• ключевая информация (сумма, позиции, доставка) разбросана по экрану
• действия (повтор заказа, экспорт, переход к счету) неочевидны
• длинные таблицы затрудняют просмотр состава заказа

Решение
Для адаптации экрана с деталями заказа под мобильные устройства:

• сгруппировала информацию по смысловым блокам (общая информация, товары, финансы, история)
• вынесла ключевые данные (статус, сумма, дата) в верхнюю часть экрана
• упростила структуру списка товаров для удобного сканирования
• добавила явные действия (повтор заказа, переход к счету, экспорт)
• сократила визуальный шум за счет упрощения таблиц

Результат

• пользователи быстрее ориентируются в информации о заказе
• упростился просмотр состава заказа
• ключевые действия стали более заметными

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

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

Решение

• преобразовала таблицу в карточки товаров
• упростила управление количеством и удалением позиций
• вынесла итоговую сумму и CTA в фиксированную область
• структурировала процесс оформления заказа на последовательные шаги

Инсайт
В B2B-сценариях проблема не в количестве данных, а в их подаче: сложные таблицы можно упростить, если правильно выделить ключевую информацию и действия.

Для дальнейшего улучшения опыта пользователя я бы предложила:

• добавить быстрые повторные заказы и шаблоны покупок
• развить систему уведомлений о статусах заказов

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