Customer Journey Map: как составить карту пути клиента для UX

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

Эта статья о том, как сделать CJM рабочим инструментом дизайнера и продакта: на каких данных её строить, какие строки действительно нужны, как читать кривую эмоций и как переводить барьеры в экраны, состояния и тексты. Если вы заказываете UI/UX-дизайн с исследованием пути пользователя, полезно понимать, какой результат этого этапа считать хорошим. Красивый плакат таким результатом не будет, нужна связка «барьер — гипотеза — правка — метрика».

В конце есть пример карты для записи в клинику и чек-лист, по которому готовую CJM можно проверить за десять минут.

Что такое CJM и чем она отличается от воронки и user flow

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

Главное, чем CJM отличается от соседних артефактов, это точка зрения. Воронка смотрит на путь глазами компании и считает, сколько людей дошло до следующего шага. User flow описывает экраны и переходы внутри интерфейса. CJM смотрит глазами человека и захватывает то, что происходит вне продукта: звонок другу, сравнение цен в соседней вкладке, ожидание курьера.

На практике эти артефакты работают в связке. Воронка показывает, на каком шаге падает конверсия. CJM объясняет, почему это происходит. User flow превращает объяснение в новый сценарий экранов, а service blueprint нужен, когда причина сидит в процессах компании: например, менеджер перезванивает через два дня.

Зачем карта пути нужна продуктовой команде

Она нужна, чтобы команда договорилась о том, где у пользователя болит, и перестала решать задачи по ощущениям. Хорошая CJM даёт несколько практических результатов:

• Общий язык. Дизайнер, продакт, разработчик и поддержка смотрят на один и тот же путь и называют этапы одинаково.
• Приоритеты. Видно, какие барьеры встречаются на критичных этапах, а какие раздражают, но не мешают дойти до цели.
• Пробелы вне интерфейса. Часть проблем вообще не в экранах: в письме подтверждения, в ответе оператора, в сроках доставки.
• Основа для метрик. Каждому этапу можно назначить показатель и потом проверить, сработала ли правка.
• Аргумент для бизнеса. Цитата пользователя рядом с провалом конверсии убеждает лучше, чем «нам кажется, что так удобнее».

Если ни одного из этих результатов карта не дала, её можно считать упражнением на сплочение команды. Это тоже полезно, но не стоит выдавать воркшоп за исследование.

Когда карта пути не нужна

CJM не нужна, если вопрос решается дешевле другим методом. Это дорогой инструмент: он требует интервью, синтеза и участия нескольких ролей, поэтому запускать его стоит, когда проблема действительно растянута во времени и между каналами.

• Проблема на одном экране. Если потери видны на конкретном шаге формы, быстрее провести юзабилити-тест этого шага, чем строить карту всего пути.
• Путь короткий и линейный. Сценарий из двух-трёх действий внутри одного экрана лучше описывать user flow.
• Нет доступа к пользователям. Без интервью и аналитики получится карта мнений команды. Честнее назвать её гипотезами и сначала договориться о доступе к данным.
• Никто не готов менять продукт. Если по итогам не будет ресурса на правки, карта останется плакатом. Договоритесь о владельце результатов до старта.

Из чего состоит карта пути клиента

У карты есть шапка и сетка. Шапка говорит, кто идёт и зачем; в сетке этапы лежат по горизонтали, слои по вертикали. Nielsen Norman Group в базовом руководстве по journey mapping выделяет те же опоры: действующее лицо, сценарий с ожиданиями, фазы пути, действия, мысли и эмоции, а также возможности для улучшения.

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

Какие бывают карты пути клиента

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

Текущее и желаемое состояние

Карта текущего состояния (as-is) описывает, как путь выглядит сейчас, со всеми провалами. Карта желаемого состояния (to-be) показывает, каким путь должен стать после изменений. Начинать почти всегда стоит с as-is: без неё to-be превращается в список пожеланий, не привязанных к реальным барьерам.

Весь путь или один сценарий

Схема всего жизненного цикла клиента полезна для стратегии, но слишком крупная для дизайнера. Для работы над интерфейсом удобнее узкая карта одного сценария: «первый заказ в приложении», «подключение тарифа», «возврат товара». На ней видно отдельные экраны и тексты, которые можно поменять уже в следующем спринте.

B2C и B2B

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

Как составить CJM: пошаговая инструкция

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

Шаг 1. Сформулируйте вопрос, на который отвечает карта

«Сделать CJM» целью не считается. Цель звучит как вопрос: «почему 60 % новых пользователей не доходят до первой оплаты» или «что мешает клиентам самостоятельно оформить возврат». Вопрос задаёт границы карты: где путь начинается и где заканчивается.

Шаг 2. Выберите одну персону и один сценарий

Правило простое: одна карта, один тип пользователя, одна цель. Если сегменты ведут себя по-разному, делайте несколько карт. Усреднённый «клиент от 25 до 55 лет» даёт усреднённые выводы, которые не подходят никому.

Шаг 3. Соберите то, что уже известно

Перед интервью выгрузите воронку, обращения в поддержку, отзывы в сторах, записи сессий и результаты прошлых тестов. Это дешёвый источник гипотез и способ не спрашивать у людей то, что видно в данных.

Шаг 4. Проведите интервью и наблюдение

На практике для одной карты часто хватает 6–10 интервью с людьми из выбранного сегмента, которые недавно прошли этот путь. Просите рассказать о последнем реальном случае, а не о привычках в целом: «расскажите, как вы в последний раз…» даёт факты, «как вы обычно…» даёт фантазии. Если есть возможность, добавьте юзабилити-тест ключевых экранов. Подробнее о том, сколько участников для него нужно, мы писали в разборе юзабилити-тестирования на пяти пользователях.

Шаг 5. Выделите этапы глазами пользователя

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

Шаг 6. Заполните слои по каждому этапу

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

Шаг 7. Найдите критические точки

Критическая точка — место, где пересекаются три сигнала: эмоция падает, в воронке видны потери, и барьер повторяется у нескольких участников. Одна жалоба из десяти интервью пока только наблюдение. Тот же барьер у шести участников плюс провал на этом шаге в аналитике уже приоритет.

Шаг 8. Сформулируйте план изменений с метриками

Каждая возможность на карте должна превратиться в гипотезу с владельцем и показателем: «если показывать стоимость приёма до выбора врача, доля брошенных записей на шаге выбора снизится». Без этого шага карта остаётся описанием, а не инструментом.

Сколько времени занимает CJM и кто участвует

Узкая карта одного сценария на реальных данных обычно занимает от двух до четырёх недель: подготовка и сбор имеющихся данных, интервью, синтез, сессия с командой и оформление плана изменений. Это ориентир, а не норма: срок растёт, если сложно набрать респондентов или в пути несколько ролей, как в B2B.

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

Где брать данные, чтобы карта не была фантазией

Надёжная карта собирается минимум из двух типов источников: качественных, которые объясняют причины, и количественных, которые показывают масштаб. Только интервью дают яркие истории без понимания, насколько они массовые. Только аналитика показывает провалы без объяснения, почему они случились.

Для эмоциональной кривой полезно после интервью попросить человека оценить каждый этап по простой шкале от «очень тяжело» до «легко». Это не точная метрика, но она помогает не рисовать эмоции по собственному впечатлению модератора. Для количественной оценки удобства на ключевых этапах подойдут стандартные опросники. Какие из них работают и как их считать, разобрано в статье про UX-метрики SUS и HEART.

Как читать кривую эмоций на карте

Кривая эмоций показывает, где путь даётся человеку тяжело. Общее настроение пользователя она не измеряет. Читать её нужно вместе с барьерами и данными, иначе легко принять за проблему место, которое просто неприятно по природе задачи.

Глубокая просадка рядом с потерями в воронке

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

Просадка без потерь

Человеку тяжело, но он всё равно проходит шаг, например потому что альтернативы нет. Такие места не дают провала конверсии сегодня, но копят раздражение и превращаются в обращения в поддержку и плохие отзывы. Их стоит чинить после критических точек.

Пик в конце пути

Ощущение от сервиса заметно зависит от самого сильного момента и от финала, а не только от суммы шагов. Поэтому экран подтверждения, письмо после заказа и первое напоминание заслуживают не меньше внимания, чем сама форма: ими путь заканчивается и запоминается.

Разброс между участниками

Если у половины людей эмоция на этапе растёт, а у половины падает, скорее всего, на карте смешались два сегмента или два сценария. Это сигнал разделить карту, а не усреднять кривую.

Пример CJM: запись в клинику через сайт

Разберём упрощённую карту для сценария «записаться к стоматологу на первичный приём через сайт клиники». Персона — человек, у которого заболел зуб, он ищет клинику рядом с домом и хочет попасть на приём в ближайшие дни. Данные в примере условные и показывают формат, а не результаты реального исследования.

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

Как превратить карту в задачи для интерфейса

Карту превращают в задачи через три перехода: барьер становится гипотезой, гипотеза привязывается к экрану или каналу, а у изменения появляется метрика. Удобно оформить это отдельной таблицей рядом с картой, а не прятать в ячейке «возможности».

1. Соберите барьеры в один список. Перенесите все барьеры с карты, у каждого — этап, источник и число участников, у которых он встретился.
2. Оцените частоту и критичность. Частота — сколько людей сталкивается с барьером. Критичность — мешает ли он дойти до цели или только раздражает. Барьеры с высокой частотой и высокой критичностью идут первыми.
3. Привяжите к точке контакта. Для каждого барьера укажите конкретный экран, состояние компонента, письмо или скрипт оператора. Если точку указать нельзя, барьер сформулирован слишком общо.
4. Сформулируйте гипотезу. «Если сделать X на экране Y, то показатель Z изменится, потому что…» Причина берётся из цитат и наблюдений с карты.
5. Назначьте метрику и срок проверки. Доля успешного прохождения шага, время на задачу, число обращений в поддержку по теме, оценка после сценария.
6. Обновите user flow и макеты. Новая последовательность экранов проектируется уже с учётом этапов карты, чтобы правка одного шага не создала барьер в соседнем.

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

Можно ли строить CJM с помощью ИИ

Языковые модели полезны на подготовительных и рутинных шагах, но не заменяют данные о реальных людях. Модель может быстро:

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

Опасно другое: попросить модель «нарисовать CJM для интернет-магазина» и выдать результат за исследование. Такая карта выглядит правдоподобно, потому что повторяет типовые представления о покупателях, но в ней нет ваших барьеров: вашей формы, ваших сроков, ваших формулировок. Используйте ИИ как ассистента по обработке собранных данных и всегда сохраняйте ссылку от каждого вывода к исходной цитате или событию в аналитике.

В каких инструментах рисовать карту

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

Какие ошибки делают карту бесполезной

CJM перестаёт работать по нескольким повторяющимся причинам, и почти все они связаны с подменой данных предположениями.

• Карта из головы команды. Воркшоп без интервью и аналитики фиксирует мнения участников, а не поведение пользователей.
• Слишком широкий охват. «Весь путь клиента за три года» не даёт ни одной задачи для ближайшего релиза.
• Этапы компании вместо этапов человека. Схема по отделам повторяет оргструктуру и прячет проблемы на стыках.
• Эмоции без источника. Кривая, нарисованная модератором, отражает его интуицию.
• Нет приоритетов. Двадцать барьеров одного веса означают, что не будет исправлен ни один.
• Нет владельца. Карту никто не обновляет после релизов, и через полгода она описывает продукт, которого уже нет.

Отдельная ловушка: путать CJM с аудитом интерфейса. Эвристический аудит находит проблемы на экранах быстрее, но не объясняет, что происходило с человеком до и после них. Если нужен быстрый взгляд на экраны, начните с UX-аудита за 30 минут, а карту стройте, когда нужно понять путь целиком.

Чек-лист CJM

По этому списку можно проверить готовую карту перед тем, как показывать её команде или заказчику:

• у карты есть вопрос, на который она отвечает, и границы пути;
• на карте одна персона с одной целью или отдельные дорожки для разных ролей;
• этапы названы словами пользователя;
• в основе — не меньше 6 интервью или наблюдений плюс данные аналитики;
• у каждого барьера есть источник: интервью, сессия, тикет или событие;
• ячейки без источника помечены как гипотезы;
• критические точки отмечены по совпадению эмоции, потерь и повторяемости;
• у каждого критического барьера есть экран или канал, гипотеза, владелец и метрика;
• назначен человек, который обновит карту после ближайших изменений.

Редакция Флагштока

Пишем об UX/UI-дизайне: исследования, интерфейсы, дизайн-системы и доступность.