8:18 PM

, NYC, NY

Journey Map Kit

Building a Figma tool adopted by 6,400+ designers to streamline journey mapping

Challenge

Journey mapping is essential for understanding user experiences, but creating maps from scratch is time-consuming and chaotic. After identifying recurring pain points across multiple projects - difficult initial setup, lack of starting direction, visual overwhelm - I built the Journey Map Kit to streamline the process for the design community.

Impact

The Journey Map Kit has been adopted by 6,500+ designers on Figma Community. It became Method's most successful community contribution with a 14.96% engagement rate on socials in 2023, and is now used internally at Method and other design companies to streamline journey mapping across client projects.

Client

Figma Community

Timing

2023

Role

Solo creator and designer

Colorful journey mapping components and templates spread across purple gradient background showing various UX mapping frameworks and customizable cards
Colorful journey mapping components and templates spread across purple gradient background showing various UX mapping frameworks and customizable cards

"I used your journey map template for something at work and everyone on my team thought it was amazing."

Claire Lorman
Associate Design Director at Smart Design

"I used your journey map template for something at work and everyone on my team thought it was amazing."

Claire Lorman
Associate Design Director at Smart Design
Figma Community interface showing Journey Map Kit with download button and file preview
Figma Community interface showing Journey Map Kit with download button and file preview
Adopted by

6,500+ designers

Adopted by

6,500+ designers

Identifying the need

Working across Method projects, I identified a number of recurring challenges. Journey map requirements evolved mid-project requiring format adjustments, whiteboarding tools created visual chaos, team consistency became challenging as more people contributed, and initial setup consumed hours that projects couldn't spare.

Building the Solution

I designed pre-built components that simplify setup, foster cross-functional collaboration, and maintain visual consistency through a cohesive design system. The kit provides structure without prescription - teams can customize to their specific needs.

Typography specification sheet showing DM Sans font families, weights, and size hierarchy for journey mapping
Typography specification sheet showing DM Sans font families, weights, and size hierarchy for journey mapping
Spread of pre-build journey map sections to help users decide on their design direction
Spread of pre-build journey map sections to help users decide on their design direction
Frame with instructions for new users
Frame with instructions for new users
Robust component library allows users to jumpstart their design process
Robust component library allows users to jumpstart their design process
Visual Direction

The color palette draws from traditional journey mapping colors, with three accent colors to allow further customization. Typography uses DM Sans (Method's default font) for accessibility and consistency. Navy anchors the palette in Method's brand.

Built for Speed and Flexibility

The kit's Working Space provides a visual overview of all available components - pre-built blocks for pain points, opportunities, channels, and touchpoints. This eliminates time-consuming setup and lets teams focus on insights rather than infrastructure.

Exploring what's possible

Teams often struggle to envision and decide on potential directions a journey map can take. The kit provides multiple fully-realized examples that demonstrate different approaches. These examples serve as both inspiration and starting points that can be customized for specific project needs.

Horizontal journey map template with phases, steps, user needs, and pain points organized in structured rows with purple accent color
Horizontal journey map template with phases, steps, user needs, and pain points organized in structured rows with purple accent color
Journey map with emotional curve overlay showing user sentiment fluctuations across journey phases with orange and blue gradients
Journey map with emotional curve overlay showing user sentiment fluctuations across journey phases with orange and blue gradients
Service blueprint style journey map with swim lanes showing user actions, frontstage interactions, backstage processes, and support systems
Service blueprint style journey map with swim lanes showing user actions, frontstage interactions, backstage processes, and support systems
Builf tor Your Process

Journey maps look different for each project. Some fall neatly into established categories - customer journeys, experience maps, service blueprints - while others are hybrid and unique. The kit embraces this flexibility, providing structure without prescription. As long as a map serves its purpose and moves the project forward, it's doing its job.

Examples of journey maps kreated with the kit
Examples of journey maps kreated with the kit
The kit in Figma Commpunity
The kit in Figma Commpunity