Управление ассортиментом B2B · Enterprise Data-heavy UI 2025

Product box:
много товаров — одно место на полке

Задача

Дать категорийному менеджеру инструмент, который объединяет схожие SKU в один бокс и позволяет управлять ими как одним товаром.

Для магазина Product box — единая потребность покупателя, которая занимает одно место витрины. Это сокращает витринные образцы и затраты на закупку схожих товаров, но затрагивает сразу четыре процесса и десятки правил распределения.

Роль
Product Designer
логика, UX, UI
Пользователь
Категорийный менеджер
товарная группа целиком
Системы
Ассортимент · Титан
SAP, товарный учёт
Результат
Новая страница + матрица
MVP спроектирован
Инструменты и срок
Figma
4 недели
Страница управления Product box: список боксов, состав бокса и справочник товаров
Главный экран: боксы группы, состав выбранного бокса с рейтингом и справочник всех товаров группы

Сложность была не в экранах

Одно действие в интерфейсе меняет данные в четырёх процессах и в смежной системе распределения. Прежде чем рисовать, нужно было собрать все вводные и уложить их в правила поведения.

4 затронутых процесса: прогноз спроса, пополнение, мерчендайзинг, торговый зал
7 статусов жизненного цикла товара, каждый по-своему влияет на рейтинг
11 ограничений на состав бокса, рейтинг и передачу данных
4 кейса влияния изменений бокса на уже назначенную матрицу
01 Только внутри одной товарной группы посадочные места в магазинах распределены по группам, ответственность КМ тоже
02 Один товар — только в одном боксе нужен явный перенос между боксами, а не копирование
03 Рейтинг внутри бокса — это приоритет распределения чем выше товар, тем раньше он поедет в магазины
04 Пустой бокс сохранить нельзя минимум одно SKU, иначе бокс занимает место, не отдавая товар
05 Неактивный ЖЦ не попадает в матрицу если неактивны все товары бокса, посадочное место освобождается
06 Во внешние системы уходят все товары бокса без фильтра по ЖЦ — иначе Титан посчитает деселект неверно

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

Данные

Где живёт бокс и куда уходят его данные

Ассортимент отдаёт наружу две связки: товар → Product box и Product box → магазин. Дальше Титан по своим алгоритмам выбирает оптимальный товар для каждого магазина и считает деселект. Интерфейс обязан объяснять это менеджеру, не показывая ему алгоритм.

Вход Справочник товаров SAP-код, наименование, бренд, ЖЦ, цена на полке, цена закупки, остатки
Решение КМ Состав и рейтинг бокса какие SKU объединены и в каком порядке они претендуют на место
Матрица Связка бокс → КСП галочка в кластере магазинов: одно место на полке или несколько отдельных товаров
Выход Титан и 4 процесса распределение и деселект, прогноз спроса, пополнение, ценники, витринные образцы

Матрица: где сложность видна лучше всего

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

Страница Матрица: товары сгруппированы в Product box, колонки — кластеры магазинов
Правило Бокс целиком или отдельные товары. Одновременно — нет: иначе кластер получит больше мест, чем есть.
Ограничения Красный счётчик над столбцом — переквот: назначено больше товаров, чем мест. Пустые ячейки в нём отключаются, отмеченные остаются активными: добавить уже нельзя, снять лишнее — нужно.
Поиск и фильтры Фильтр никогда не разрывает группировку: остаётся обобщающая строка бокса и только подходящие SKU внутри.
Нераспределённые Товары без бокса собраны в отдельный блок — для фильтрации и сортировки, но назначаются только по отдельности.

Как это работает в интерфейсе

Четыре сценария, в которых менеджер работает с сотнями SKU и не теряет контроль над данными.

Сценарий 01

Создать бокс и наполнить его

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

Диалог создания Product box с вводом названия
Название задаёт КМ — бокс должен читаться как потребность покупателя
Перетаскивание товара из справочника в состав Product box
Товар переносится из справочника в бокс перетаскиванием — и сразу исчезает из свободных
Сценарий 02

Выстроить рейтинг

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

Перетаскивание строки внутри Product box с индикатором места вставки
Линия вставки показывает будущую позицию в рейтинге до отпускания строки
Сценарий 03

Загрузить сотни SKU

Перетаскивать по одному товару реально для пяти позиций, но не для пятисот. Массовое добавление принимает список SAP-кодов и отвечает построчным статусом на каждый.

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

Панель массового добавления товаров: поле вставки списка SKU
Одно поле: список кодов вставляется из Excel как есть
Результат проверки списка: построчные статусы загрузки и причины отказа
Построчный разбор: что загружено, что отклонено и почему
Сценарий 04

Не дать сломать данные

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

Удаление и переименование бокса подтверждаются отдельно — за каждым из этих действий стоят посадочные места в магазинах.

Ошибка: пустые продуктовые боксы не могут быть сохранены
Пустой бокс не сохраняется: наполнить или удалить
Контекстное меню бокса: массово добавить товары, переименовать, удалить
Все операции над боксом собраны в одном меню
Что осталось за кадром

Решения, которые не видны на скринах

Часть работы — это выбор между вариантами, каждый из которых что-то ломает. Импорт из Excel: плоская таблица связок минимизирует расхождения в названиях боксов, но допускает задвоение SKU; загрузка списка в конкретный бокс задвоения исключает, зато требует много файлов.

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

Настройка таблиц Менеджер сам собирает набор и порядок колонок: в данных десятки показателей, но в работе нужны единицы.
Сортировка Работает внутри бокса и не разбивает группировку: иначе рейтинг перестаёт читаться как рейтинг.
Известное ограничение До доработок на приёмке магазин не увидит, что товар — часть бокса. Это зафиксировано как блокер, а не спрятано в интерфейсе.
Панель настройки отображения таблицы: выбор и порядок колонок
Панель настройки отображения таблицы
Результат

Спроектирована новая сущность ассортимента — от страницы управления боксами до изменённой матрицы и передачи данных во внешние системы.

Менеджер работает с понятным объектом — «потребность покупателя», а все правила ЖЦ, рейтингов и посадочных мест интерфейс держит на себе.

1
бокс = одно место на полке магазина
∞
SKU в боксе без ограничения по количеству
2
способа наполнения: перетаскивание и массовая загрузка
0
пустых боксов и переквотов по кластерам
Поговорим о проекте

Давайте
сделаем вместе

Написать мне на почту →
Telegram Резюме PDF