A brief guide to user experience maps in all their various forms In this week's #UXchat we discuss customer journeys, experiences and stories, and how to map them


In researching this article about creating different experience maps – mainly by sending OJ, our ace head of social, into the UX Slack channel and asking them what they think – 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 standardised 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.

Last week we took to Twitter for our weekly #UXchat session and asked our community a few questions on the subject of experience maps. Our esteemed host was Peter Szabo, UX consultant and author of the book ‘User Experience Mapping’.

The following is a breakdown of the answers we received. First of all though, 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 recent 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 organisation, and you can use these observations to improve the journey and remove any barriers.

example of a customer journey map template

Example of a customer journey map from WhatUsersDo

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 enquiry. A customer experience map can help create a consistent tone of voice, bring siloed teams within your organisation together and, of course, bring the focus of your business to the customer.


Example of a customer experience map from Adaptive Path

Source: http://www.copyblogger.com/customer-experience-maps/

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.”

Example of a user story map from Easy Agile

Sources: https://blog.easyagile.com/anatomy-of-an-agile-user-story-map-4ecb6a508d94 https://blog.easyagile.com/understand-what-your-customers-want-with-agile-user-story-maps-94c89c620330

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

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

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.

wireflow mockup for mobile

Example of wireflow mockup for mobile by NN/g

Source: https://www.nngroup.com/articles/wireflows/

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.

Example of an empathy map from Solutions IQ

Source: https://www.solutionsiq.com/resource/blog-post/what-is-an-empathy-map/

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 in the comments 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 (after the jump).

Get a newsletter that isn't all about us...

Subscribe for weekly, hand-picked articles about UX, design, and more every Friday—from the Be Good to Your Users blog and the rest of the whole darn web.

...get a little taste right here. 👅 🍭

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?

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 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?

Thanks so much for everyone who took part in #UXchat this week. Please follow us and tune into Twitter every Thursday at 4pm for more insightful UX based discussion.

Get a newsletter that isn't all about us...

Subscribe for weekly, hand-picked articles about UX, design, and more every Friday—from the Be Good to Your Users blog and the rest of the whole darn web.

...get a little taste right here. 👅 🍭

Main image by Andrew Neel

Christopher Ratcliff
Christopher is the Content Marketing Manager of WhatUsersDo. He's also a filmmaker and the editor of wayward pop culture site Methods Unsound. He used to be the deputy editor of Econsultancy and editor of Search Engine Watch.

Leave a Reply