От задачи до макетов шаг за шагом

Сложные слова есть, но как с ними жить…

Пример задания

"Спроектировать модуль 'Программа лояльности' в CRM для розничной сети.
Менеджеры смогут подключать клиентов к программе, просматривать баллы и историю бонусов."

---

Шаг 1: Понять задачу и собрать вводные

Задаём вопросы:

• Кто пользователи модуля? (менеджеры, клиенты?)
• Какие задачи они решают?
• Что уже есть в системе?
• Какие ограничения?
• Какие данные отображаются?
• Где что хранится?

Фиксируем:

• Цель: дать менеджеру управлять бонусной программой
• Пользователь: менеджер магазина
• Данные: клиенты, баллы, история операций

---

Шаг 2: Построить ERD — структуру данных

Создаём ERD, чтобы понять:
Какие сущности есть и как они связаны.

erDiagram
  CUSTOMER ||--o{ LOYALTY_CARD : has
  LOYALTY_CARD ||--|{ BONUS_TRANSACTION : records

  CUSTOMER {
    string id
    string name
    string phone
  }

  LOYALTY_CARD {
    string id
    float balance
    date issued_at
  }

  BONUS_TRANSACTION {
    string id
    float amount
    string type
    date created_at
  }

Это показывает:

• У клиента может быть карта
• Карта хранит баланс
• Транзакции — история начислений и списаний

Эта структура станет основой для экранов, таблиц и форм.

---

Шаг 3: Построить UJM — путь пользователя

Создаём User Journey Map для ключевого сценария:
Подключение клиента к программе лояльности

journey
  title Подключение клиента к программе
  section Начало
    Открывает CRM: 4:Менеджер
    Находит клиента: 3:Менеджер
  section Программа
    Нажимает "Подключить к программе": 4:Менеджер
    Заполняет форму: 3:Менеджер
    Видит успешное сообщение: 5:Менеджер
  section Проверка
    Открывает карточку клиента: 4:Менеджер
    Видит карту и баланс: 5:Менеджер

Из карты видно:

• Какие шаги проходит пользователь
• Где нужна форма
• Где должен быть фидбек
• Что необходимо предусмотреть в интерфейсе

---

Шаг 4: Построить IA — информационную архитектуру

Создаём карту экранов и их связей — Information Architecture.

graph TD
  Dashboard --> Customers
  Customers --> CustomerCard
  CustomerCard --> LoyaltyTab
  LoyaltyTab --> BonusHistory

Это показывает:

• Структуру навигации
• Какие экраны, вкладки и секции нужны
• Как пользователь перемещается между ними

---

Шаг 5: Определить ключевые интерфейсы

На основе ERD, UJM и IA выделяем:

• Список клиентов
• Карточку клиента
• Форму подключения к программе
• Таблицу истории бонусов
• Отображение текущего баланса

Определяем состав UI-компонентов:
таблицы, формы, кнопки, уведомления, вкладки

---

Шаг 6: Сделать wireframes (каркасы)

На основе всей информации:

• Рисуем каркас интерфейса
• Проверяем: все поля из ERD учтены
• Все шаги из UJM отображены
• IA соблюдена по структуре и логике

На этом этапе показываем черновой вариант команде и собираем обратную связь.

---

Шаг 7: Перейти к UI

После подтверждения wireframes:

• Добавляем визуальный стиль
• Применяем дизайн-систему
• Настраиваем состояния (загрузка, ошибки, пусто)
• Поддерживаем доступность и читаемость

---

Как связаны ERD, UJM и IA

Инструмент	Назначение
ERD	Определяет структуру данных в системе
UJM	Показывает, как пользователь взаимодействует с данными
IA	Помогает организовать экраны, навигацию и переходы

---

Финальный алгоритм

1. Понять задачу, цель и пользователей
2. Построить ERD (данные и связи)
3. Построить UJM (поведение пользователя)
4. Построить IA (структура интерфейсов)
5. Выделить ключевые экраны и действия
6. Создать wireframes
7. Перейти к UI-дизайну

---

Заключение

Эта последовательность помогает дизайнеру мыслить системно, а не "от картинки".
Вы не просто рисуете интерфейс, а проектируете его на основе данных и поведения.
Такой подход даёт логичную структуру, удобный UX и понимание всей команды.