Communicating the results of UX research
While conducting through UX research, one of the greatest challenges is communicating the results without wasting the time of stakeholders. I needed a high impact deliverable that visualizes how well user needs are being met. The maps metaphor was convenient because I had to show how the users expect to go about reaching a goal using well paved roads, shortcuts and pitfalls set by an app or site. From the usability perspective maps, even multi-dimensional maps are nothing new.
Most people are able to understand the 4D User Experience Maps I make with no or very little explanation. They are a clear indicator of what needs to be done to make sure the users don’t get lost or frustrated. Bright red colours indicate the dangerous neighbourhoods, where the users will disappear. The most important things that need urgent attention are clearly visible when taking a peek at the map by the strong borders.
While doing UX research/consulting, I always felt that I should come up with something highly visual, something great looking. Without going into the age old debate of where the UX ends, and where visual design starts, I can tell, that most companies don’t expect external UX consultants to do the job of their visual design team. We are expected to set guidelines for the (web/visual) designers, maybe direct them to create something awesome, and most often do researches based on the new designs they came up with, but never directly interfere.
The 4D User Experience Map is something I can show, looks great and can be printed on (a rather large) paper. It can be taped to the wall in the office of the internal visual design team. It is a compact yet highly visual summary of an UX consulting project.
How to adopt a cat? – 4D User Experience Map example
Most UX articles have some sort of web shop as an example (yes, selling services online counts as one, since the UX is not drastically different). This makes sense because web shops are user experience defined, and improving the usability of online stores usually increase the number of sales. Most UX jobs revolve around selling something online, so some UX experts take the examples of UX methodologies and substitute “jewellery” with “chewing gum” and sell it as the product of their hard work. By picking the website of a cat shelter as the example of this article I hope people will try to understand and improve this technique, instead of being a copycat (pun intended). Plus: We all know since the dawn of the internet that cats are great fun…
Long story short, in this article, we will create a visually intensive map for the user experience of a cat shelter. I don’t recommend giving the title “4D UX Map” to your maps. It is the same as calling it “untitled document”. The url or title of the existing website is also a poor choice. Give something that stakeholders can relate to. Something that stops them on their tracks and starts user-centric thinking based on the subject. In our example “How to adopt a cat?” is the most common question by wannabe cat adopters, even before reaching the site.
Road to the 4D User Experience Maps
Although in its current form this is my “invention”, I was greatly influenced by the articles of Chris Risdon (The Anatomy of an Experience Map) and Gene Smith (Experience Maps: Understanding Cross-Channel Experiences For Gamers). I should also mention the book Smashing UX Design: Foundations for Designing Online User Experiences by Jesmond Allen and James Chudley. It is a great read on UX in general and has a whole chapter dedicated to Customer Experience Maps.
The above sources where great inspiration, although they focused on “buyers” and they only included two dimensions in their maps. What I did is adding two more dimensions (see below), make it easier to understand for stakeholders and most importantly broaden the usage to any user experience problem. I generalised the whole concept, and hopefully, I can evangelise it, so it can get broad recognition. The main shift of focus was adding things beyond the usual UX call of duty. For instance while creating the map for the cat shelter the first milestones are external sites and offline media. In UX strategies I make user experience starts before entering into contact with objects we can easily influence (like external sites and offline media) where the first contact is made. I used to experiment with adding cheesy 3D rendered graphics and vibrant colours. Those tricks are scientifically questionable and make the map harder to understand.
Horizontal dimension: Milestones
Every step the user takes to reach the success criteria are considered milestones in my model and represented on the horizontal axis. The rightmost milestones are the follow-ups. In our example, things that happen after you got your cat, like sharing pictures of your new cat on Facebook, or trying to return her to the shelter.
The leftmost milestones are the starting points. For a website, the leftmost milestone is often hard to influence, or if you try to influence them you start stepping on other expert’s toes. The most important first contact might be in Google. If you say a word about it, the SEO or SEM expert will give you that special gaze.
Vertical dimension: Events
While milestones are special events that require the most attention, different events can lead to them, or even a combination of multiple events. To make thing easier I often group events by the milestone they most often lead to. Events can be simple thoughts that cross the user’s mind, or as complex as viewing the home page for the first time. Most of the time thought type events can be associated to things happening while the user interacts with the site.
The simplest method of identifying thoughts of your users is to have them think aloud while conducting user experience tests. Even after a small sample of 5-10 people, you will be able to identify the most common things that cross the user’s mind.
Line thickness dimension: Importance
Creating a 3D rendering of the map with height as important dimension really adds to the shock value. It is great fun, especially if you use Google SketchUp or similar user-friendly 3D application, but it makes the map harder to understand, and distracts the viewer. I suppose you could use tint or shadow instead of height, but I have found that increasing the line thickness of the boxes based on their relative importance is the easiest to understand for most viewers.
I usually go with a visible but not too thick line for important things. If they are not really important they will not make it to the map. If they are one of the most important things on the map I go with a line three times as thick as the normal lines. Then if there is a need for a middle ground between important and very-very important I go with a line twice as thick as the normal line.
Color dimension: Severity of the problems
Red is usually understood as an error, while yellow as a warning. So I use those colours to draw the borders of the boxes that need attention.
Restricting yourself to three line thicknesses and three colours you will be able to create maps on a whiteboard/paper, even without the need of a PC.
My personal favourite is the four division rating system. I often use that for surveys, but also when milestones of the UX map need a rating. The forte of this rating system is that it has no neutral choice. Basically, you need to pick a side. Good or Bad. As the cliché goes, not everything is black and white, so the four division system refines the ratings by splitting both sides in two. Thus the final ratings will become something like: Very Bad, Bad, Good and Very Good. Get real: Make sure that the extremes can be reached. You should have something that is very bad on your map, and something that is very good. Always measure qualities of milestones to the other milestones, not to some ideal.
Don’t forget to make the ratings good looking. Don’t get me wrong here, you should keep any UX deliverable simple and easy to understand, but adding icons will definitely make it easier to read. I would not use stars if possible. You can use thenounproject.com to find free icons for most English nouns. (The example has two icons from there.)
In our example, I have rated the milestones based on three things: motivation, ease of use and fun. Motivation means, how motivated the users are to proceed towards getting a cat from the shelter. This is relative to the previous event. Ease of use is how easy they find the task at hand. Based on Dr. BJ Fogg’s behavior model three elements must converge at the same moment for a behavior to occur: motivation, ability (ease of use in our case), and trigger (a call to action, something that directly leads to the next event, like a big button with “adopt a cat now”). There are many triggers during each event, which would get different ratings. An average would do no good in this case, so I decided not to rate the triggers on the map.
On the other hand, I included a fun factor of a given event. Owning a cat and getting a new cat from a shelter is great fun according to most users. Now I felt that the site should reflect this. Please keep in mind that you should pick rating criteria based on the project at hand. Nobody expects to have fun while on the site of a chartered accountant. You can certainly try, but you would risk that the users will not take the service seriously, and find a more serious accountant. In that case measuring things like the increase of perceived trustworthiness would make a lot more sense.
This is the first time I published my 4D User Experience Map method and a bit of the theory behind it. I would love to get comments and critiques to turn this into a widely recognised UX deliverable. Most importantly if you create a 4D UX Map based on this article I would really love to see it.
W. Szabó Péter
Follow up article in UX Motel: http://ux.walkme.com/must-know-4d-user-experience-map/ by Megan Wilson.