UX/UI и продуктовый дизайн B2B-платформы — логика ролей и процессов до первого экрана

В B2B-системе красивые экраны — самая дешёвая часть. Дорогая — правила: кто создаёт тендер, кто видит предложения, кто согласует сделку и что происходит, если согласующий в отпуске. Если правила не продуманы, интерфейс превращается в набор кнопок, в котором путаются даже свои.

Как я делал ETS Tender

В ETS Tender, тендерной бирже, путь от тендера до сделки проходит через предложения и согласования, а у каждой роли свои права. До первого экрана я разобрал роли, сценарии и потоки данных и записал правила системы.

Тендеры, сделки и согласования легли в канбан-модель: у каждого объекта свой путь по статусам. Логику я проверил на серых прототипах — поправить ошибку там дело минут, в готовом коде — недель. Только после этого появились интерфейсы: панели, аналитика и интеграции, в которых легко читать данные и управлять процессом. Что ещё ловит прототип и как оценить экономию — в заметке о прототипе до разработки.

В таких системах человек чаще всего ищет ответ на вопрос «что делать дальше». Поэтому экраны я проектирую так, чтобы сразу было видно, на каком шаге находится объект и чей сейчас ход.

Что остаётся у вас на руках

• Правила системы — роли, права и статусы, о которых договорились до разработки.
• Прототипы — серые экраны, на которых видна логика, а не цвет кнопок.
• Интерфейсы всех состояний — пустые, с ошибкой, с длинным текстом, с тысячей строк в таблице.
• Дизайн-система в Figma — компоненты и правила, с которыми разработчикам не нужно угадывать, как должен выглядеть экран.

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

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