Практика создания UserJourneyMap через Mermaid — просто и полезно

Поможет дизайнеру, разработке и даже бизнесу.

User Journey Map (UJM) помогает понять, как пользователь взаимодействует с продуктом — от первого касания до достижения цели. Обычно UJM делают в визуальных инструментах, но если вы работаете над CRM, веб-приложением или пишете техническую документацию, то UJM в Mermaid будет идеальным решением.

Что такое Mermaid и зачем он нужен дизайнеру

Mermaid — это язык для описания диаграмм в виде кода. Он работает в Markdown-файлах, на GitHub, в Notion, в Obsidian, а также на сайтах-документации (Docsify, Docusaurus и др.). Подробнее про Mermaid я писал тут.

UJM, созданный с помощью Mermaid:

• легко обновляется в команде (через Git)
• живёт рядом с документацией и кодом
• пригоден для версионирования

Общая структура UJM в Mermaid

journey
  title Название сценария
  section Этап 1
    Действие: Эмоция:Роль
  section Этап 2
    Действие: Эмоция:Роль

• Эмоция — число от 1 (негатив) до 5 (позитив)
• Роль — кто проходит путь (например, Клиент, Менеджер, Оператор)

Пример: CRM-система для управления программой лояльности

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

В этом кейсе есть два типа пользователей:

1. Менеджер магазина (работает в CRM)
2. Клиент (использует карту лояльности в магазине или приложении)

UJM для менеджера: регистрация нового клиента

journey
    title Регистрация нового клиента в CRM
    section Вход
      Авторизуется в CRM: 3:Менеджер
    section Работа с клиентом
      Открывает раздел "Клиенты": 4:Менеджер
      Нажимает "Добавить клиента": 5:Менеджер
      Вводит ФИО, телефон, email: 3:Менеджер
      Сохраняет карточку клиента: 4:Менеджер
    section Завершение
      Видит сообщение "Клиент добавлен": 5:Менеджер

UJM для клиента: получение карты и использование

journey
    title Путь клиента: подключение к программе лояльности
    section В магазине
      Общается с кассиром: 4:Клиент
      Оставляет данные для регистрации: 3:Клиент
    section После визита
      Получает SMS с приветствием и ссылкой: 4:Клиент
      Переходит в личный кабинет: 4:Клиент
    section Первое использование
      Совершает покупку: 5:Клиент
      Получает баллы: 5:Клиент
      Читает условия бонусной программы: 3:Клиент

UJM для администратора: создание бонусной кампании

journey
    title Настройка бонусной кампании
    section Панель управления
      Заходит в раздел "Акции и бонусы": 4:Администратор
      Нажимает "Создать новую кампанию": 4:Администратор
    section Конфигурация
      Указывает название, даты, правила начисления: 3:Администратор
      Настраивает сегментацию клиентов: 2:Администратор
    section Публикация
      Сохраняет и запускает кампанию: 5:Администратор
      Видит кампанию в списке активных: 5:Администратор

Как использовать Mermaid в UX-процессах

Полезные советы

• Используйте эмоции в числовом виде — для быстрой оценки UX
• Старайтесь описывать одно действие на строку
• Покрывайте не только happy path, но и ошибки, отказы
• Можно вставлять в Notion, GitHub, Confluence или просто в .md файл

Что делать дальше

• Почитать больше про mermaid тут.
• Поиграть с mermaid на сайте mermaid.live.