Разработка Customer journey map в Figma


22.10.2019 Время чтения - 5 минут 1061

Карта действий пользователя обложка

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

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

Во многих случаях лучший способ понять рабочий процесс и способствовать поиску решений – это создать Customer journey map (далее – карта действий). Годы исследований, опросов, проб, и ошибок научили нас создавать идеальные карты действий, и понимаю того, как использовать Figma на всю свою силу.

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

Почему именно карта?

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

График эмоций карты действий
Пример того, как записать карту действий клиента

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

Как Figma облегчает создание карт действий

За последние два года мы создали множество карт в Figma, и за это время много узнали о том, как Figma может улучшить наши исследования, и процессы проектирования. Вот как наши UX-исследователи и UI-дизайнеры использовали уникальные функции Figma, чтобы сделать карты действий пользователей особенными.

Библиотека компонентов карты действий

Создав собственную командную библиотеку компонентов и стилей карт, вы придадите своему проекту согласованность, что упростит создание новых карт. Стиль будет изменить так же просто, как обновить компонент. Мы создали файл примера и библиотеку компонентов Figma, включающую некоторые компоненты, которые вы, возможно, захотите использовать в своих картах действий.

Команда Tidy Up

Функция Tidy Up имеет несколько преимуществ. Её можно использовать для изменения расстояния между шагами карты, а так же для вставки и/или изменения порядка шагов без существенной переделки.

tidy up figma

Сотрудничество в реальном времени

В дополнение к очевидному преимуществу одновременной работы нескольких дизайнеров c картой действий, наша команда также экспериментировала с использованием Figma для записи заметок непосредственно в инструменте, что  позволяет хранить все заметки в одном месте.

История версий

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

Используйте комментарии в Figma для непрерывной обратной связи

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

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

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

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

Сделайте вашу карту интерактивной

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

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

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

interactive board 1

interactive board 2

interactive board 3

interactive board 4

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

Чтобы начать, посмотрите этот образец в Figma.

Оригинал статьи.

Читайте так же: Удалённое тестирование юзабилити