top of page
Writer's pictureMichal Jerzy

How to Design Effective Customer Journey Maps Using Figma

Updated: Dec 12


Journey mapping is a powerful user-centered design tool that helps visualize the entire customer / user experience, their interactions with your product or service; and to identify existing pain-points and opportunities for improvements.

While Figma still lacks plugins for interactive journey maps, you can build them using its prototyping tools.


You can also leverage libraries like this Interactive Journey Map library.


With Figma’s collaborative and intuitive design environment, creating a journey map is not complicated. Here’s a quick guide to get started.


Step 1: Define Your Objectives


The first step in creating a journey map is defining the scope of the map. What is the user's goal or Job-to-be-done? What part of the experience are we focusing on? This will shape the journey and give it purpose. This could be a bank account opening journey, ordering a product online via App or desktop, customer engagement journey, or internal user journey with specific digital solution.


Here are few critical questions to start:


• Are you mapping the customer’s current experience?

• Do you want to visualize an ideal future state to define scope of new project?

• Who are the primary personas involved?

• Who is the main and the secondary audience for the journey map?

• In what format it should be presented to each audience group?



Understanding the “why” behind your map will guide your design choices.


Step 2: Gather Key Data / Insights


Compile qualitative and quantitative data about your users. Think of available research insights, and if any additional research activities are required. Sources could include:


• User / Customer / Stakeholder interviews

• Surveys

• Various types of analytics

• Customer feedback / complaints


Identify pain points, goals, and touchpoints that users encounter.


Step 3: Open Figma and Set Up Your Canvas


1. Create a New File: Open Figma and start a new design file.

2. Choose a Layout: Use a blank canvas or search for journey map templates in Figma’s Community tab for inspiration; for example Interactive Journey Map library.


Step 4: Design the Framework


Stages: Divide the user’s journey into clear phases (for example: Awareness, Consideration, Purchase, Retention).

Actions: List what the user does at each stage.

Emotions: Use emojis, lines, or graphics to visualize emotional highs and lows.

Pain Points and Opportunities: Highlight barriers and areas for improvement.

Touch-points: Include where and how users interact with your service.

Teams: Teams involved in interacting with the user, or enabling particular stage of the journey.

Technology: What technology enables particular interaction touch-point: f.e CRM system, Contact Center, Chatbot, Chatline, Mobile App, etc.


Use Figma’s tools to draw grids, lines, and text boxes for structure.


Step 5: Add Visuals for Clarity


1. Icons and Illustrations: Use Figma’s vast icon libraries to represent actions and emotions visually. You can also add photographs that represent particular interaction or stage of the experience.

2. Colors and Gradients: Use colors to differentiate between stages or highlight emotional intensity.

3. Components: Create reusable components for consistency if you’re working on multiple maps.


Step 6: Collaborate in Real-Time


Figma’s real-time collaboration features allow your team to:

• Add comments and annotations.

• Edit and refine the map together.

• Share the map via a shareable link.


Step 7: Review and Iterate


Once your map is ready:


• Review it with stakeholders, service team and project team.

• Gather feedback.

• Update the map to reflect new insights or changing user behaviors.

• Consider exporting your design to a static format that can be shared with senior stakeholders or used in an interactive design workshop.



Creating journey maps in Figma is a straightforward way to bring user experiences to life. By combining data-driven insights with Figma’s powerful design tools, you can craft visually compelling maps that inform and inspire your team. Whether you’re mapping an onboarding flow or a multi-touchpoint journey, Figma provides the flexibility to design, collaborate, and iterate effectively.




コメント


コメント機能がオフになっています。
bottom of page