User Story Mapping: 4 Effective Examples That Create a Better User Experience

BlogHeader UserMapping 1200x600

“User story mapping is a facilitated, curated conversation that brings everyone along for the journey.” — Nick Muldoon, Co-CEO, Easy Agile

Allowing development teams and product managers to better understand the customer journey and prioritize their work, user story mapping will allow you to optimize a product or service. In doing so, this allows teams to design and build a better product based on the customer’s desired outcomes.

The ultimate goal is to create a positive user experience.

01 UserMapping

This holistic visual view of a product often requires an all hands on deck approach. From engineering and design teams to legal and marketing teams — and everyone in between, user story mapping may be a simple concept, but the payoffs are immense.

Once you have your user story, create interactive prototypes of the solutions in UXPin, an end-to-end design tool for advanced prototypes that not only look professional, but are also fully interactive. Sign up for a free trial.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

Why Should You Map Your User Story? 

The benefits of user story mapping are vast, including:

  • The ability to visualize a product from a user’s perspective. More specifically, a user story will keep your user front and center.
  • Being able to better prioritize the necessary work in order to complete the product as anticipated — both in terms of the desired timelines and overall outcome.
  • Your ability to achieve cross-team clarity. Knowing what to build for who, why, and when will help guide the process, allowing everyone to communicate in a way that supports the overall product journey.

Bottom line: When you’re working with multiple teams, most teams will focus on their specific tasks, missing the mark in terms of the big picture. When the entire user journey is mapped out, this can also help identify any potential holes in functionality. Current and subsequent releases can also be better prioritized.

The User Story Mapping Process 

A user story map can be completed using either physical or digital mediums and resources. Think whiteboards and sticky notes vs software tools.

The goal is to create a story arranged on a horizontal axis, showcasing the customer journey. Once complete, you can visualize all of the ways in which a user may interact with a single product

02 UserMapping

Consider Your Products or Services 

To begin, not only should your team(s) be defined but also all of your product or service requirements. Then, your main objective should be bringing a minimal viable product (MVP) to life.

This is essentially the earliest version, which will include the most critical features only. Think about your desired outcomes and create a solution.

Read more: How to Write a Painless User Story

Please note: When considering your product or service, leverage all of the data you have on user personas. This information will serve as the core basis of your user mapping story.

Develop a Story Map or Multiple Maps 

Once you have a clear understanding of what will be involved, it’ll be time to build the actual map.

  1. Write user activities. Once again, these are based on your personas. These activities are the backbone of your story and will support the development of future development. Activities are broken down based on core “epics” — these are the fundamental steps of the customer journey, often represented as “high-level features.” For example, Organize email — Manage email — Manage calendar.
  2. Develop user stories. At first, these stories will be fairly minimal, expanding based on the phase of the project. Remember, the goal here is to add value and meet the users’ needs. User stories are built in a grid, under epics and user activities. Based on the example above, for Organize email, user stories may include Search email — File email — Compose email. In comparison, Manage calendar may involve stories such as View calendar — Create appointment — Update appointment — View appointment.
  3. Prioritize user tasks, focusing on the tasks that are most important, this will allow you more effective plan releases. Tasks will be organized based on their releases, adapting and evolving with the product or service.

Revising Your User Story Map 

It’s important to remember that user story maps are a continual process. As steps are completed, new ones are added based on analytics and user feedback. For example, you’ll want to remain mindful of changing technologies, user behavior, and consumer trends.

4 Effective Ways to Visualize & Conceptualize a User Story 

Whenever you’re creating a user story, think of the following formats in terms of user stories.

  • As [a persona], I can [select a need or goal], so that [I can accomplish this].
  • As a [class of user], I want to [be able to do this] so that [I can gain some form of benefit].

Example 1: E-commerce site

Although not everything is necessarily linear, a user story is arranged in chronological order. Here is a fairly straightforward example in terms of an e-commerce site.

Search for an item –> View product –> View photo to better analyze product –> Select the item for purchase –> Enter payment info –> Enter shipping address –> Confirm order

In the example above, these can be grouped into the following activities:

  • Find product [Search for item]
  • Product details [View product + View photo]
  • Shopping cart [Select item for purchase]
  • Checkout [Payment info + Shipping info + Confirmation]

To tackle a user story, activities, tasks, and sub-tasks are clearly defined, which are then prioritized.

Example 2: Book a flight

Online flight booking system.

Search for flight –> View flight info –> Confirm

Depending on the complexity of this user story, there will be numerous releases, which are then prioritized. For example:

  • Search for flight
  • Release 1 — Select by flight type – By availability – By location
  • Release 2 — Integrate with 3rd party
  • View flight info
  • Release 1 — Display times and layover airports
  • Release 2 — View additional flight options and details
  • Release 3 — Make flight info available via API
  • Confirm
  • Release 1 — Fill in payment and contact info
  • Release 2 — Incorporate PayPal
  • Release 3 — Incorporate Google Checkout

Example 3: Change a reservation

If a user wanted to alter their reservation.

View reservation –> Change reservation –> Cancel the reservation

  • View reservation
  • Release 1 — Search by reservation number
  • Release 2 — Search by username
  • Change the reservation
  • Release 1 — Change the date and time
  • Release 2 — Change reservation type/add additional details (customizable field)
  • Cancel the reservation
  • Release 1 — Provide contact info to cancel
  • Release 2 — Cancel online

Example 4

If a user wants to purchase a pair of shoes.

Find a shoe retailer –> Find shoes –> Choose shoes –> Purchase

In this case, depending on the specific user and their goals, these activities could be further broken down into “find running shoes” or “purchase a select style for the least amount of money.”

  • Find a shoe retailer [Open search engine and visit the retailer’s site].
  • Release 1 — Create keywords (SEO)
  • Release 1 — Display special deals and discounts on site
  • Release 2 — Website homepage
  • Find shoes [Open search bar]
  • Release 1 — Search by style (i.e. running shoes)
  • Release 1 — Search by size
  • Release 2 — Search by gender
  • Release 2 — Search by brand
  • Choose shoes [Consider shoe details and compare shoes based on preferences]
  • Release 1 — User reviews
  • Release 1 — Compare offers
  • Release 2 — Shoe details (i.e. material, technology, etc.)
  • Purchase [Select shoes and pay for shoes]
  • Release 1 — Color
  • Release 1 — Pay with gift cards or credit
  • Release 2 — Size
  • Release 2 — Pay with Apple Pay, PayPal, etc.

Ready to build a prototype to test the solution you came up with? Try UXPin for free and build a fully interactive prototype that looks and behaves like an end-product. Sign up for free.

Build prototypes that are as interactive as the end product. Try UXPin

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you