Существует много способов визуализировать путь (customer journey) и пользовательский опыт (experience flow) с помощью интеллект-карт (mind map), стикеров и заметок на стенах или больших листах бумаги. Как по мне, использование интеллект-карт один из наиболее эффективных, быстрых и гибких подходов. Ниже я объясню, как создать полезную интеллект-карту:

1. Построить простой UX / CX шаблон карты;
2. Расширить интеллект-карту, подключив прототип InVision, документацию продукта или любую другую ссылку.

Интеллект-карта для UX с «высоты птичьего полета»

Для продуктов с большим количеством действующих лиц и сложной экосистемой (клиенты, сотрудники, партнерские приложения, система поддержки, инструменты бэк-офиса и т. д.), важно поддерживать связанные части продукта.

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

Изменения в продукте обычно влияют на все или некоторые его части. Пока продукт развивается, все быстро меняется. Интеллект-карта — один из лучших инструментов, чтобы оценить ситуацию с «высоты птичьего полета».

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

Создайте шаблон

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

Вот шаблон (подробное объяснение ниже).

https://mm.tt/813918822?t=a0WwSaWInM

1. Белые узлы изображают экраны / физическое местоположение.
2. Синие узлы показывают ключевые действия, которые можно выполнить на этом экране / месте. Например, на странице продукта — покупка.
3. Желтые узлы, начинающиеся с IF, показывают условия и сценарии.
4. Желтые узлы также описывают то, что происходит на сервере, задержки времени или то, что пользователь не видит, но с чем сталкивается.
5. Стрелки-отношения (зеленые линии) подключают независимые карты или перепрыгивают через другие узлы. Например, действие в пользовательском приложении инициирует события в приложении сервиса/сотрудника.

Разумно использовать emoji иконки, например: ✉ — электронная почта, ⏰ — отметить реальное время между различными событиями, ???? — отметить, где клиент предоставляет платежные реквизиты впервые и т. д.

MindMeister: https://mm.tt/813918822?t=WuNM1EQedA

PDF: https://dl.dropboxusercontent.com/u/2029718/Customer_app.pdf

Будьте лаконичны

Если ваш продукт мал и прост, он может поместиться в одну карту. Для больших систем я бы рекомендовал быть более краткими. Сделать одну карту, которая охватывает всю механику системы и добавлять в нее ссылки на другие интеллект-карты, которые описывают каждую часть в деталях. Лучше иметь несколько карт (для различных частей системы).

Обычно я строю диаграмму связей с точки зрения одного типа пользователя (это может быть клиент, сотрудник, бэк-офис и т. д.). Это означает, что самый подробный UX-поток будет относится к этому типу пользователя, а не ко всем участвующим сторонам, в противном случае карта будет слишком сложной. Иногда в карте могут присутствовать все задействованные стороны, но в упрощенном виде.

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

Пример

Представим, что у нас стартап по костюмам напрокат под названием SuitRent. Пользовательский опыт может выглядеть так: определенные события привели клиента на сайт SuitRent (не столь важно какие), клиент открывает сайт, находит костюм, получает его доставкой Uber, носит, отправляет обратно в течение следующих 48 часов посредством того же Uber. Я не погружался глубоко во все возможные сценарии (например, возврат костюма), можем сказать, что сервис работает везде и всегда без возможных сбоев и непоняток. Вот базовая CX-карта на основе шаблона выше:

MindMeister: https://mm.tt/813944995?t=MrNYEdd6DB

PDF: https://dl.dropboxusercontent.com/u/2029718/SuitRent.pdf

Пример.

Добавьте ваерфреймы или мокапы из InVision или Dropbox

MindMeister поддерживает внешние ссылки, присоединенные к любому узлу. Это, в принципе, главное преимущество приложения. Когда закончите с первыми ворфреймами, добавьте ссылку на узел. Теперь у каждого узла на вашей карте есть соответствующий ваерфрейм.

В случае, если вы делаете InVision-прототип, можете добавить ссылку к каждой странице прототипа на каждом узле интеллект-карты (убедитесь, что добавили публичную ссылку на InVision, а не ссылку из адресной строки браузера). Это сочетание является чрезвычайно полезным и для тех, кто использует карту как референс, так как можно одновременно следить за картой и использовать прототип.

Пользуйтесь картами в команде

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

Спасибо Ирене Заблоцкой и Андрею Глушко за помощь в написании этой статьи.

Оригинал — здесь.

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