Join us
Simple graphic showing a user profile at the top, with three empty empty bubbles below to represent a user mapping flow.

User Story Mapping in Design

by Mads Soegaard | | 41 min read
584 shares

User Story Mapping is a crucial technique for visualizing product development from the user's perspective. Here, we outline essential components and steps for crafting a User Story Map. You’ll learn how  User Story Mapping can help create engaging and effective user experiences through different examples and practical tips and tools for mapping user stories.

Consider a scenario: a team developing a new app struggles to align their vision with user needs. They have extensive documents like product requirements and technical specifications but do not understand the user experience. 

People don't have the time or focus to read technical specifications fully. Even if they do, they usually misunderstand what to build. Instead of boosting productivity, these long documents limit creativity, communication, teamwork and new ideas. That’s where you can use user story maps as a better option. They offer a clear view of what an agile team plans to build.

So, let’s talk about user story mapping in more detail. You'll find this helpful if you’re a designer, product manager, or eager to enhance user experiences. 

Table of contents
  1. What is User Story Mapping?
    1. User Story Maps vs User Stories
  2. The Benefits of User Story Mapping in UX Design
    1. 1. Focus on Users 
    2. 2. Better Teamwork and Clear Communication
    3. 3. Clear Picture of Your Project
    4. 4. Make Decisions Faster
    5. 5. Keep Track of Progress Easily
  3. User Story Mapping Examples in Design
    1. 1. E-commerce User Story Map
    2. 2. Document Management User Story Map
  4. 5 User Story Mapping Tools Worth Trying/ Top 5 User Story Mapping Tools
    1. 1. Jira Software
    2. 2. Trello
    3. 3. Miro
    4. 4. Lucidchart
    5. 5. StoriesOnBoard
  5. How to Run a User Story Mapping Session
    1. Preparing for the Session
    2. Step 1: Select Your Team
    3. Step 2: Frame Your Map and Set Goals
    4. Step 3: Implement User Personas
    5. Step 4: Organize the Meeting and Brief Your Team
    6. Step 5: Add Activities, Steps, and Tasks
    7. Step 6: Prioritize Stories and Plan Releases
    8. Step 7: Create User Stories Based on User Story Map
  6. User Story vs Customer Journey Mapping 
  7. The Take Away
  8. Where to Learn More

What is User Story Mapping?

User story mapping is a visual tool that helps product managers and development teams plan work that creates an excellent user experience. A software leader, Jeff Patton, developed and spread knowledge about this method. 

In this video, Laura Klein, UX designer and author, explains what user stories are and how to create them. 

Show Hide video transcript
  1. 00:00:00 --> 00:00:30

    User stories are the actual tasks that are written on the cards or sticky notes in your Kanban board. In Agile methodologies, these are often small  enough that they can be done in a matter of hours or sometimes a day or two. Many teams write them from the perspective of the user. So, you may end up seeing things in the form of: 'As a _____ I would like to _____ so that I can _____.' To fill in those blanks just a little bit,

  2. 00:00:30 --> 00:01:00

    'As a *user type* I would like *some goal or action*, so that *outcome*.' And an actually useful example would be something like: 'As a *job applicant* I would like to save my *resume information*, so *I don't have to re-enter  it every time I apply for a new job*. The idea here is that the engineer who is implementing this user story knows not just what the *description of the feature* is but *what the outcome is  and why the user would want that outcome*. Sometimes the user stories are accompanied  by various types of design deliverables.

  3. 00:01:00 --> 00:01:10

    Also, some teams don't phrase the user stories in exactly this way. You're going to have to adopt the patterns of your team or work with them to come up with something that works better for you.

User story mapping in UX design involves activities, steps, and details. You outline a typical user's interactions with a product. You identify the most valuable steps for the user and decide what to build next. 

  • Activities focus on high-level tasks like "Plan a vacation" 

  • Steps like "Select Destination" detail how to complete an activity. 

  • Details show specific interactions, such as "Browse destinations" or  "View images" under the particular step. 

User story maps guide teams in planning their minimum viable product (MVP) release. They visually map out what to include in the initial and future releases. Teams draw lines on the map to separate what goes into the MVP from what can wait for later. The team places items above the line for the MVP and below the line for future updates. As they learn and reprioritize, they add new activities, steps, and details to the map for upcoming sprints and releases.

Agile organizations find user story mapping useful as an alternative to simple backlog lists or long requirements documents. It has become a key strategy in user-centered design and agile product development.

User Story Maps vs User Stories

User Stories are individual narratives focused on specific functionalities or requirements from the user's perspective. 

User story mapping first outlines the user's journey with the product. Teams then extract specific user stories from this map. Each story focuses on a particular functionality. This process aligns all development work with the user's overall experience.

While user stories focus on small, specific features, user story maps offer a big picture of a product and provide the context of specific features. Agile teams can use these maps to prioritize smaller tasks and turn them into user stories. These stories help you validate and build a common understanding of the steps needed to create a product users will love. You write these stories in a specific format: "As a [type of user], I want to [action] so that [benefit]." This format helps you focus on product interactions from the user's perspective.

The Benefits of User Story Mapping in UX Design

User story mapping transforms how teams approach product development, especially from a UX design perspective. 

An overview of all the benefits of user story mapping in UX design.

© Interaction Design Foundation, CC BY-SA 4.0

1. Focus on Users 

When based on user research, a user story map shows the product from the user’s perspective instead of a technical one. This user-centric approach drives satisfaction by focussing on understanding and prioritizing user requirements.

2. Better Teamwork and Clear Communication

User story mapping unites the team with a shared vision. It reduces misunderstandings and fosters better teamwork. It establishes the context for the individual user stories so teams can develop better solutions. 

3. Clear Picture of Your Project

User story mapping in UX design focuses on visualizing the user's journey with a product. Imagine a roadmap showcasing every feature and user interaction. This map helps teams see how individual parts form the whole picture. It's like piecing together a puzzle, where each piece represents a user's step or a product feature. Mapping user interaction becomes clearer and guides the team to prioritize effectively.

4. Make Decisions Faster

The user story map helps teams identify the minimum viable product, allowing them to ship products incrementally, with just the right level of detail, without shipping a broken experience.

5. Keep Track of Progress Easily

This method can act as an alternative to traditional backlogs. It provides a transparent view of the project's status and lets teams detect gaps in the user experience early on.

User Story Mapping Examples in Design

Here are three user story mapping examples to help you understand the concept better and visualize how you do it. 

1. E-commerce User Story Map

E-commerce user story mapping example

© Hubspot, Fair Use

In this example, we focus on the detailed journey of a user engaging with an e-commerce platform.

  • The Activities (in orange) represent the primary goals of the user, such as "Search," "Get product details," and "Check out."

  • Within these activities, Steps (in green) outline the necessary actions to achieve these goals, like "Scroll through search results" under "Search" and "Review and compare product" under "Get product details."

  • Finally, Tasks ((in yellow) detail the individual actions for each step, including "Filter by price" or "See product in AR."

This user story map facilitates a clear understanding of the user's journey. It can help teams prioritize development to create a user-friendly and efficient path from search to purchase.

2. Document Management User Story Map

Document management user story mapping example

© Lucidchart, Fair Use

This user story map is a structured visual that outlines the user experience for a document management system. It is broken down into three main components:

  • Activities (in blue) show the high-level goals or functions within the system, such as "Log into account," "Manage documents," "Edit documents," and "Complete documents."

  • Steps/Tasks (in blue) detail specific actions within each activity. For example, under "Manage documents," the tasks include "Open documents," "Manage documents," and "Delete documents."

  • Sub-tasks (in gray) provide an even finer level of granularity. They describe individual actions required to complete the tasks. Under the task "Open documents," we find subtasks like "Create new document," "Open existing document," "Open template," and "Import existing diagram."

Each task and sub-task receives a priority ranking from top to bottom. The map assigns these rankings on the left, ranging from Priority 1 to Priority 3. The color coding on the subtasks—green for complete and yellow for blocked—provides an at-a-glance status report on where each action stands.

The best part about this example? You can use it as a user story mapping template to start your mapping journey. 

5 User Story Mapping Tools Worth Trying/ Top 5 User Story Mapping Tools

Image with the logos for 5 tools used for user story mapping.

Exploring the right tools can significantly enhance your user story-mapping process. These five tools stand out for their ability to simplify and streamline the mapping of user stories.

© Interaction Design Foundation, CC BY-SA 4.0

1. Jira Software

Jira user story mapping tool

© Jira Software, Fair Use

Jira offers comprehensive agile project management features, including user story mapping add-ons. Teams committed to agile methodologies find this tool helpful as it integrates well with other development tools.

2. Trello

Trello user story mapping tool

© Trello, Fair Use

You can easily adapt Trello's simple, card-based interface for user story mapping. Its flexibility and intuitive design make it an excellent option for teams looking to organize their development process visually.

3. Miro

Miro user story mapping tool

© Miro, Fair Use

Miro is a user story mapping software that provides an expansive virtual whiteboard perfect for user story mapping. Its collaborative features allow teams to work together in real time, regardless of location.

4. Lucidchart

Lucidchart user story mapping tool

© Lucidchart, Fair Use

Lucidchart offers a range of diagramming tools that you’ll find useful to create detailed user story maps. Its drag-and-drop interface and collaboration capabilities make it a solid choice for mapping complex user stories.

5. StoriesOnBoard

StoriesOnBoard user story mapping tool

© StoriesOnBoard, Fair Use

StoriesOnBoard is one of the best user story mapping tools that turns customer feedback into actionable user stories. The user-friendly tool focuses on enhancing the product development cycle from the user's perspective.

How to Run a User Story Mapping Session

Running a user story mapping session can streamline your development process, align your team and ensure your product meets users' needs. With careful planning and execution, this method can transform your approach to building user-centered products. 

The steps to conduct a successful user story mapping exercise.

© Interaction Design Foundation, CC BY-SA 4.0

Preparing for the Session

Before you start:

  1. Gather all necessary technical documentation, like the Product Requirement Document, standards, ecosystem map, estimates and user personas.

  2. Choose whether to use digital tools or stick to the classic pen-and-paper approach.

  3. If you go digital, opt for tools with sharing capabilities like Lucidchart or Miro.com.

User personas in story mapping represent target users. They guide feature development to meet specific needs and preferences. Frank Spillers, CEO at Experience Dynamics, discusses why personas are important and how to create them. 

Show Hide video transcript
  1. 00:00:00 --> 00:00:33

    So, you've gone out, you've talked to your users. You've done a field study, basically interviews, user interviews and observations of their tasks, of their environment. And what do you do with that? Personas and journey maps. So, I just wanted to talk a little bit about personas in particular. Journey maps are also important, but I'm just going to cover personas. Where you get your data from is hugely important. Most people just use surveys.

  2. 00:00:33 --> 00:01:03

    Some people use focus groups. Those are both market research techniques. They're not appropriate for UX. Why? Because in UX we're looking at *behavior*, not at opinion. And focus groups and surveys do a lot of opinion elicitation. They're fine for marketing, but they really have no place in UX. So, if you do market research and just use  like a segmentation approach or market research approach, you're going to end up with a different type of persona.

  3. 00:01:03 --> 00:01:33

    So, if you do field studies, you'll end up observing their behavior and then creating behavioral profiles or role-based personas, and you'll understand better the context and the conditions under which your mobile app or device mobile content  is being consumed. And that's super important. This is an example of a persona, and you can adjust a persona. But basically you have a scenario. I've started writing my personas in first person.

  4. 00:01:33 --> 00:02:01

    So, literally the notes I take, I'll build the persona based on actually what the user said. And it's about 98% verbatim, like what they said with a few corrections of – you know – grammar and stuff like that. I won't change the meaning. I won't remove the words from their mouth and rephrase them in my head. I won't alter or fabricate them. And it's a technique that I learned from  Whitney Quesenbery, a UX consultant

  5. 00:02:01 --> 00:02:34

    who's written a book about storytelling and personas in particular, because personas are really about *stories*; they're really about telling stories about that context. Try it right now. So, think about the personas that might, the roles that people, the problems they might solve with your app. And in a narrative kind of style, write one or two sentences on their background to kind of set the context; write two or three more sentences on the problems that they're trying to solve, like the tasks, and two or three sentences on the call to action,

  6. 00:02:34 --> 00:03:00

    like what they need, what their desires are or how the design can basically help them get to their task, how can it empower them? How you can meet their needs, their goals, their tasks, their sub-tasks? If you have a lot of questions, it's probably because you need to spend more time with your users. Once you start hanging out with users doing field studies, you get to know what they need and the context of use becomes very apparent.

  7. 00:03:00 --> 00:03:30

    It's one of the most enlightening things I think about personas. But also you understand their *distractions*, their deeper kind of emotional and social context. You understand what multi-tasking they might be doing and what problem solving or the different states, the varied states that they might use, kind of usage scenarios, if you will,  but in different states. So, to create a role-based persona, identify the personas based on your data, so the themes that come out, the different hats that users are trying to wear.

  8. 00:03:30 --> 00:04:03

    And then give them a name, like not just like Sally or Susan or Jim or John or something. But give them an associating  adjective such as Support-Seeker Sally or Finance Fiona, I think was that other one there. Okay, so continuing with persona development, think about these things: *environmental impact*, so the context of use; *cognitive impact*, the time, for example, the time pressure or stress that they might be under.

  9. 00:04:03 --> 00:04:35

    Think of the *social impact* – the triggers that might lead to that such as another user or somebody else online or started a chat or tripped off – I don't know – a support call or whatever. And finally the *behavioral impact* – so, for example, the roles that not just the user has but the roles that the user must assume to complete the task. There's also *mental models*. So, mental models being these past expectations

  10. 00:04:35 --> 00:05:02

    that users bring to their designs; they basically influence how a user problem solves. And think about like the mental model for the restaurant experience – you know – what does that look like? For example, you enter the restaurant; there might be waiting, you might have to check in, you may have to order ahead, you might have a pickup situation. Some restaurants have made a separate place for the food delivery people to go

  11. 00:05:02 --> 00:05:33

    so that they're not standing there waiting with the the diners that are coming to the restaurant for the "live food". You can conduct *task analysis*, which is asking the user to do the task. You know – you can accompany them, a doctor's visit, restaurant visit, whatever it might be. You can accompany the user and look for the language they use, the way they talk about it, look at the physical, social environment, look at their functional needs and priorities and maybe  even the cognitive demands that they have.

  12. 00:05:33 --> 00:06:03

    So, for example, they have to figure something out; they have to fill in a form. They have to submit this. There's a pressure to answer these questions or to know something. Look at the task space, how they're making sense of things, how they're deciding or solving problems for themselves. Remember, we don't just have goals and tasks, but we have *sub-tasks* as well. So, we need all three of those things, not just goals. It's so important that we make sure that we drill deeper down

  13. 00:06:03 --> 00:06:19

    into our users' behavior so we fully understand what it is and bring that out. So, doing that, though, is so well worth it and makes you a much smarter designer and a much smarter design team.

Step 1: Select Your Team

Choose the key people for your mapping session. Limit your workshop to no more than 10 decision-makers from various departments, including a product owner, UX designer and stakeholders. A smaller group promotes easier and more effective discussions.

Step 2: Frame Your Map and Set Goals

Set clear boundaries for your user story map to avoid scope creep. Concentrate on the Minimal Viable Product (MVP) to focus on essential features. Decide on additional sections like ideas or thrash and if you'll use color coding for clarity.

MVPs in user story mapping identify essential features for focused development and early user feedback collection. Laura Klein explains MVP in more detail. 

Show Hide video transcript
  1. 00:00:00 --> 00:00:31

    One of the key ways of designing for  experimentation is to build an MVP, or Minimum Viable Product. This is a concept that was first introduced by Frank Robinson back in 2001 and was popularized by Eric Ries and Steve Blank. It's now heavily associated with The Lean Startup methodology, and it's obviously probably one of the most misunderstood concepts that is also wildly popular, which is impressive because there's actually a lot of competition in that category. People seem to have misunderstood what a minimum  viable product is

  2. 00:00:31 --> 00:01:04

    in about as many ways as you can do it, but the most common misunderstanding  is that you can just cut as much stuff out of a feature or product and then ship it and then – I don't know – learn something, I guess. But the thing is, you *can't learn something from  a really bad product*. You just learn that nobody likes really bad things, which is something that we already know. Instead, what we should be doing is designing and building something that *we can actually learn something from*. Specifically, what we normally want to learn from  building an MVP is whether the proposed feature or product *solves a real problem* for a specific type of user.

  3. 00:01:04 --> 00:01:33

    The idea is, if the users we've identified really have a problem that they want solved and they try out our *small* version of the product, that they'll overlook some simple missing features or some small problems because getting that problem solved in this way is so important. The great thing is, if we combine this technique with the one where we share our work with a small group of early users, we can end up getting really good data on the exact things that we're missing. This can sometimes mean that we end up building something far smaller than we thought we'd need in the first place.

Step 3: Implement User Personas

Base your map on user personas to guide the story's epics and activities. This ensures you address real user needs and behaviors in your product.

Step 4: Organize the Meeting and Brief Your Team

Explain the mapping process once you choose the team and have the tools ready. Make everyone comfortable and outline the session's structure and expectations. Clarify the map's layout, including any color codes or sections.

Step 5: Add Activities, Steps, and Tasks

User story mapping aims to define the entire product from the user's perspective. This process involves adding activities, steps, and tasks to the map. 

  • Activities represent high-level user goals in the product. 

  • Steps break down these activities into more specific actions. 

  • Tasks further detail these steps with granular interactions.

Reading the map from left to right should reveal the user's journey from start to finish. This horizontal view shows the sequence of user interactions. On the other hand, reading from top to bottom should highlight prioritization. This vertical view helps you understand the most important features or tasks you should tackle first.

Incorporating these elements into the map provides a comprehensive, user-focused view of the product development lifecycle. It ensures that every feature aligns with user needs and that the team prioritizes effectively.

Step 6: Prioritize Stories and Plan Releases

Sort user stories based on importance. Use visual cues like tape or digital tools to define different releases, starting with the MVP. Discuss and agree on features essential for the initial release. 

The team draws or tapes lines to mark release boundaries. They place essential features for the MVP above this line. Features suitable for later releases go below the line. This clarifies the development team's immediate focus and outlines a roadmap for future updates. As the project evolves, the team adds new activities, steps, and details to the map, which inform the planning for future sprints and releases

Step 7: Create User Stories Based on User Story Map

The last step involves using the user story map to create user stories. To create user stories from a user story map, follow these steps:

5 Steps to create user stories from a user story map.

© Interaction Design Foundation, CC BY-SA 4.0

  • Identify Epics: Start with the high-level activities on the map, which will serve as your epics.

  • Break Epics into Stories: For each epic, define the steps as individual user stories that express specific user goals.

  • Specify Tasks for Each Story: Detail the tasks for every user story to establish the acceptance criteria or detailed requirements.

  • Compose the User Story: Write each story in the format: "As a [type of user], I want [an action] so that [a benefit/outcome]."

  • Prioritize the Stories: Sort the user stories. Place the most critical ones for the MVP at the top and schedule the rest for future development. Use the story map's structure as a guide.

This process turns the visual user journey into a prioritized backlog of user stories, ready for the team to tackle in a focused and user-centric manner.

User Story vs Customer Journey Mapping 

User-story and customer journey mapping serve distinct purposes in product development and user experience design.

  • Customer journey mapping is all about stepping into the shoes of your users. It illustrates a user's journey to achieve a goal with your product. It captures their emotions, the channels they use, and the devices they interact with. The mapping creates a narrative highlighting the user's experience from start to finish. It focuses on the emotional highs and lows.

Journey maps provide you with information from a customer’s perspective. Watch this video to understand the power of journey mapping as Matt Snyder, Head of Product & Design at Hivewire, discusses it. 

Show Hide video transcript
  1. 00:00:00 --> 00:00:33

    You know, as human beings we have the strength of  visual reasoning to understand and perceive things visually, and it's just an incredible tool to bring  people together at actually a pretty low cost. If you think about what it takes  to perceive and understand a broad, rich journey, that's a *book*, right? And so, you have to find ways to articulate the customer journey

  2. 00:00:33 --> 00:01:00

    and contact with your company and product  in a way that's succinct and in a way that people can grasp whether they're a designer  or whether they have time to read a big book or not. So, it's a tool that is almost like  a democratization of information in a way. And so, it both spreads the information  and brings people together, and helps you make decisions and perceive things that  might otherwise not be known or understood.

  • On the other hand, user story mapping looks at things from the product's perspective. It helps teams plan and prioritize the product's features based on the problems they solve for users. It focuses more on functionality. Thus, it helps you turn insights from the customer journey map into actionable items for product development.

Both tools work well together or separately. They start from the same research but focus on different parts of design and development.

The Take Away

User story mapping can help you visualize the product journey, focusing on user activities and steps. This method breaks down complex projects into manageable parts. It aligns development with user expectations and business goals. It helps: 

  • Visualize the Customer Journey: User Story Mapping offers a clear, step-by-step view of how users interact with a product. This helps you identify areas for improvement and ensures a user-centric design approach.

  • Enhance Collaboration and Clarity: Mapping out user stories helps your team gain a shared understanding of project goals and user needs. This improves teamwork and communication.

  • Prioritize User Needs: This technique ensures that development efforts align with what users value the most. It leads to products that truly meet user demands.

Start familiarizing yourself with the basics to apply user story mapping. Then,

  • Understand the components of user story maps and how they fit into a larger map.

  • Consider exploring digital mapping tools like Jira, Trello, Miro, Lucidchart, or StoriesOnBoard. 

  • Run a user story mapping session, focusing on user needs and product goals. 

This approach can transform your development process into a more user-focused and efficient one. 

Where to Learn More

Agile is one of the most misunderstood methodologies in software development. Laura Klein breaks down common “anti-patterns” and how to avoid them in this hour-long Master Class.

Read more about product development and user story mapping from Jeff Patton and associates.

Journey Mapping
Closes in
10
days
booked

Get Weekly Design Insights

Join 315,741 designers who get useful UX / UI Design tips from our newsletter.
A valid email address is required.

Topics in This Article

User Flows Customer Journey Maps
584 shares

What You Should Read Next

What are Customer Touchpoints & Why Do They Matter?
There are as many different definitions for the word “touchpoint” in customer experience design and marketing as there a
  • 1.2k shares
  • 4 years ago
Read article

Flow Design Processes - Focusing on the Users' Needs
It can be really tempting to start a design project by leaping into the deep end and starting to sketch out pages and wo
  • 1k shares
  • 4 years ago
Read article

User Experience (UX) Surveys: The Ultimate Guide
Imagine you’re a business owner who wants to know what’s working and what’s not on your website—and, oh yes, where you n
  • 855 shares
  • 1 year ago
Read article

How to Design Use Cases in UX
Imagine a new mobile app or an e-commerce site gets launched; it looks great, sure, and it should be a hit because it at
  • 657 shares
  • 1 year ago
Read article

How to Create a Perspective Grid
When you create a journey map, it can be a challenge to combine research data and the ideas of people in your organizati
  • 579 shares
  • 1 year ago
Read article

4 Takeaways from the IxDF Journey Mapping Course
Maps are one of the oldest tools humans have used to find their way around the world. They help us understand the lay of
  • 546 shares
  • 3 years ago
Read article

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Privacy Settings
By using this site, you accept our Cookie Policy and Terms of Use.

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this article.

Soegaard, M. (2024, March 9). User Story Mapping in Design. Interaction Design Foundation - IxDF.

New to UX Design? We're Giving You a Free eBook!

The Basics of User Experience Design

Download our free ebook “The Basics of User Experience Design” to learn about core concepts of UX design.

In 9 chapters, we'll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
315,741 designers enjoy our newsletter—sure you don't want to receive it?