A brief guide to user experience maps in all their various forms

The many ways we can map customer journeys in order to make sense of our users’ experiences.

In researching this article about creating different experience maps we came across the following terms…

  • Customer journey maps
  • Customer experience maps
  • User story maps
  • Wireflows
  • Workflows
  • Wireframes
  • UX maps
  • Journey maps
  • Customer story maps
  • User journey maps
  • Empathy maps

Is this just an industry struggling to agree on one standardized name for the same thing – or are there subtle (and not so subtle) variations?

Maybe experience mapping is so different from product to product and journey to journey, that’s it’s impossible for there to be a standard – especially if we’re discussing such intangibilities as empathy.

Unsurprisingly, pinning down the nomenclature isn’t the only ambiguity when it comes to the process of understanding the ‘story’ of your customers and their experience of your brand/website/product.

First of all, let’s try and pin down what we’re trying to accomplish with all these various maps…

A guide to different experience maps

Customer journey map

We recently covered customer journey mapping in a UX beginner’s guide: basically, a customer journey map tells the story of your customer’s experience within a specific journey. From initial contact, through the various points of engagement, to wherever they end up. It should identify the key interactions a customer has with your organization, and you can use these observations to improve the journey and remove any barriers.

Customer experience map

This is similar to a customer journey map, in that it tells the story of your customer, but this map will reveal the entire experience between a customer and your brand throughout their sum total of interactions. It can encompass everything from a visit to a website, to social engagement, to store visit, to customer service inquiry. A customer experience map can help create a consistent tone of voice, bring siloed teams within your organization together, and, of course, bring the focus of your business to the customer.

User story map

User story mapping has its roots in agile product development, but the essential theory is the same as the methods above – capture the journey a customer takes with your product including all the activities and tasks they undertake. According to Easy Agile, the key is collaboration: “creating the story map as a team ensures team members are on the same page from the start of development through to ongoing delivery of new releases.”

Wireframes, workflows and wireflows

I know, bear with me…

According to NN/g, wireframes are used to show webpage layout ideas. It’s a quick and cost effective way (because you don’t necessarily need more than a pen and paper) to get early user insight. This is also known as paper prototyping.

Example of a standard wireframe from NN/g

Workflows map out a users’ movements across the wireframe or prototype. So this has more in common with a customer journey map, in that it highlights interactions – but doesn’t go into the details a user would see on the screen.

Example of a workflow from NN/g

However, according to NN/g, despite these being in regular use by UX professionals, there are situations in which they’re not great for communicating design ideas – there’s no context.

This is where a wireflow comes in – it’s a combination of the above two methods.

Wireflows document the process of a user working through a task on the product or website, but with each step you can see wireframe mock-up of the relevant page.

Empathy map

Originally created by Dave Gray, an empathy map is a collaborative tool that teams can use to gain insight into their customers, in a similar way to building personas.

According to Solutions IQ, empathy maps can be helpful when diving into the customer segments of a business model canvas, elaborating on user personas, capturing behaviours when interviewing a customer and building the “user” in your user story.

And the rest?

I *think* the rest of the terms in the list at the start of this article are variations of what I’ve already discussed above (customer story map = user story map) but please correct me if I’m wrong and I’ll update accordingly.

Next let’s open up the discussion to our UX community on Twitter and see what they have to say…

When do you create UX maps? What types of maps do you use most often?

In order to try and establish what processes UX professionals regularly use, we asked them what map types they prefer…

When should a UX map be created?

At the prototyping stage, or there different maps for different iterations?

What are the benefits of creating UX maps?

Of course the number one benefit is in bringing the focus of your endeavours to a purely customer level, but is there anything else?

How does user research help and how do you carry it out?

Do users need to be involved from before the initial stage of prototyping?

User research can help you to create a better experience map #uxchat

— Rizal Dahalan (@rizale) July 27, 2017

Templates for experience maps?

Is it possible to use templates for experience maps? Or should they be tailored specifically to individual journeys/organisations/products?

Are there any good experience mapping tools?

Online mapping tools as recommended by the experts…

Or of course you could go properly old-school…

Remote vs. in-person

Naturally, as a remote UX testing platform, we recommend remote. We feel like the insights you’ll get from users will be more natural, because they’re relaxed in their own environment away from the pressures of a lab and its various observers.

What should an experience map look like?

Some examples of experience maps…

Making the leap from post-it notes to online tools

Once the rough sketch is drawn, what next?

How do u transition from post it & whiteboards to online tools? #uxchat I took a photo of the whiteboard and redraw it on Visio

— Rizal Dahalan (@rizale) July 27, 2017

How do you report results to the rest of the organisation?

Ah stakeholders, how to communicate to you of the benefits of UX in the most efficient, clear and accurate way possible.

The importance of wireflows

As we discussed earlier, wireflows are the best of workflows and wireframes, but do you need them?

Here's our in-depth guide to getting started with user research