User Experience Mapping: Enhance UX with User Story Map, Journey Map and Diagrams

Why shouldn't you give a 100 page document to your cat-sitter? Writing a documentation and sharing that with your cat-sitter might seem like a better idea. In the "information stone-age" of the early 90's, software delivery was based on a requirements document created as the first phase of the waterfall model. It seemed like a good idea back then. In this analysis phase, a long document was written. This document contained many details about what's being built, ahead of time, as well as an executive summary and product description and possibly many other sections. The requirements document was then approved and signed, and it represented a commitment. Requirements documents assumed that it's possible to know every eventuality up front and that priorities would not change. Obviously, they were not cast in stone. They were often revised, and sometimes even drastically changed. 

Now, imagine our cat-sitter getting a 100-page requirements document with many sections. What are the chances that she misses or misunderstands something? Software developers cursed with a massive documentation feel the same.

According to Paul Vii and most other experts, waterfall was the most popular product management model in software development. In the first phase of waterfall, usually named analysis, the business analyst and the product owner will put together a set of requirements. Why has this approach failed? 

As you can see, our problem will not be solved by telling the cat-sitter what to do or writing a comprehensive documentation.

In Chapter 2, User Story Map – Requirements by Collaboration and Sticky Notes, we will see how maps and improved communication will address the problems of rigidity, lack of collaboration, and inflexibility of traditional requirements documents.

This book will teach you many User Experience Map types so that you can pick the right tool for the situation. The examples in the other chapters are product management, usually software development problems. I certainly don’t expect you to build software for your cat-sitter (at least not in this chapter.)

There is a communication technique much older than the writing technique. You guessed it, some 40,000 years ago our ancestors started to draw. At first, they didn’t draw maps, but that changed more than 15,000 years ago. A prehistoric map of the night sky on the walls of the caves at Lascaux, France, testifies this. Obviously, the creators of that map preferred hand drawing over sophisticated software products, so we will also start with hand-drawn maps.

To solve the cat-sitter's communication problem, let’s draw a map using pen and paper. Often sticky notes or other small pieces of paper are used because it's easier to rearrange them. We will create sticky notes based user story maps in Chapter 2, User Story Map – Requirements by Collaboration and Sticky Notes, but here, we will just use a sheet of paper. Don’t worry if your drawing skills stop at stick figures. Maps can be composed of some simple lines and a few written words. Some people do this instinctively during meetings. The most important thing to remember is that although mapping is a powerful tool, maps should never replace conversations.

It’s easy to overdo mapping, hoping to reduce the need for conversation. Remember that the map is not a substitute for a conversation. It will also not work if you overdo it, as it will be confusingly complicated for others. It’s a tempting idea to draw a map so detailed that you can simply send it to the cat-sitter and get done with it. Don’t do that, it’s a terrible idea. I have seen agencies creating journey maps as a deliverable and e-mailing it to project stakeholders. Although they can look great, they rarely--if ever--meet the goals or solve problems alone, without a conversation.

We agreed that you will draw a map, and you will have a conversation where the map will help. You could also create the map during the conversation if you are an experienced mapper, but most of the time it’s better if you have the first version ready for the conversation, and create a new iteration together with the stakeholders--in our case, the cat-sitter.

Before you start drawing, you need to decide what to draw. It’s perfectly fine if your approach and strategy are not crystal clear at this stage.

First, you need an idea obviously, but we already have that. The idea is to go on holiday without your cat. A terrible idea if you ask your cat, but the world is not a perfect place, not even for our feline companions.

Another thing you should decide is the opportunity. What do you expect to happen because of our process? It’s easy to confuse opportunity, outcome, and output, not just because they all start with “o”, but because some people use the terms interchangeably.

In our example, opening a can of cat food is the output, but so is the cat biting our cat-sitter. We want to minimize outputs. Your resources are always limited. Even if you somehow got virtually countless people and money for this project, time will never be unlimited. Throwing more money at a project is probably the worst thing you can do, so it makes sense to do as few things as possible.

For example, the cat will not be hungry after the feeding process. While opening a can of cat food or putting food in front of the cat are outputs, the outcome can be a well-fed cat or a starving cat. We will not know the outcome until the map is put in production. This means that we will only know how our map changed our cat’s life when we come home from the holiday, but not before we board the plane. 

We want our cat to be well-fed and healthy and, most importantly, happy while we are away. This is our opportunity, the outcome we would love to happen. We will know the results of our map after it's put into practice. For now, let’s aim for a happy cat. It goes without saying that we want to have the biggest possible opportunity. It's human nature to be greedy, but cats also share this character trait with us. 

Mapping will help you to achieve the most, with as little as possible. In other words, maximize the opportunity, while minimizing the outputs. 

If you have an idea and opportunity, grab a piece of paper and a pen, and you can start drawing the solution. 

This is not a cat-food advertisement, but a twist on Ram Charan's book, What the Customer Wants You to Know. Without delving too deep into sales, the main takeaway from the book is beginning with the customers' needs. To ensure that we maximize the opportunity and minimize the output, we need to visualize what our users want. 

In Chapter 5, Remote and Lab Tests for Map Creation, we will research what our users need and what they usually do when interacting with similar products. Cats, unlike humans, really hate being researched, tested, and analyzed. So, we just assume what a cat needs and wants during our time away. 

You need to make sure you visualize something implementable, something which helps you to fulfill the opportunities within the constraints of time, budget, and human resources. For our demo project, getting nine cat-sitters 24/7 in three shifts would certainly be nice, but that's probably way too expensive and way too hard to organize.  Later in this book, we will see how mapping can help us in understanding our limits, but for now, we assume to know our limitations. 

A piece of paper and a pen is all you really need for mapping. For our purpose, the only "drawing" you need to do is drawing lines. Sounds simple enough, right?  We have all created millions of lines. When we connect those, shapes emerged. Writing is simply a set of lines, no matter the language. Alyona Nickelson goes beyond that and emphasizes that lines and shapes carry an emotional message to the viewer; straight lines convey a sense of accuracy, directness, solidity, and stiffness. On the other hand, curves create a feeling of compromise and agreement, and flexibility and indecisiveness. To balance our communication, we can incorporate both types of lines. Don't worry if you can't draw a straight line. You can use rulers, or better to avoid communicating stiffness and be 100% agile, use only freehand-drawn lines. 

Any pen and paper will do, but if you had more than one color, that would be really helpful. The often neglected aspect of experience mapping is color. We use brightly colored sticky notes for our user story maps (see Chapter 2, User Story Map – Requirements by Collaboration and Sticky Notes), but many UX experts just pick colors to represent a group of notes or even worse, just randomly. I hope that after reading this book, you will have a different approach. Color is an important aspect of communication. Judy Martin argues that our response to color is instinctive. We use it as a means of recognition and analysis. It not only defines space and form, but we also use color cues as invitations or warning signals. It has a subconscious emotional appeal. We associate green with the idea of life, growth, youth, spring, hope, and recently, environmental consciousness. For the artists out there, that might be a shock, because there are few natural sources of green pigment and the green coloring agents in artists' materials have been chemically developed so make sure that no green pastel dust falls on your cat, or any pastel dust for that matter. 

This is a fraction (the cleaner, more presentable fraction) of my drawing equipment, but don't let yourself be intimidated by that. You don't need such a wide range of equipment for User Experience Mapping. Simply use what is available to you. A piece of printer paper and a pen is a good start. Colored mud on the wall of a cave was the choice of our ancestors, and it worked wonderfully for their purposes. Remember Barber Barrington's famous quote: A keen artist will drawwith anything and make it work to his advantage. All user experience experts are artists. Communication is an art after all. 

Now, we really need to get started with drawing a map. I'm sure that the inner artist in you is itching to take a pencil in hand and draw something. 

Now things will get exciting. We will add the opportunity to the map. You can write "Opportunity: Happy Cat", or have some fun creating a happy cat line art like I did:

The main map elements in User Experience Mapping are often called cards. This is because you can use a blank card, or more often a sticky note to represent them. 

For each map, you need to create a structure that can be easily understood at a glance. For many maps, it makes sense to name the card by the outcome. Geographic and route map elements have their name, but those names can also be outcomes. For example, if I want to go to Budapest by car, the outcome is getting to Budapest. All I need to do is find the map element name Budapest to use the map. 

In the next chapter, we will use sticky notes to represent cards, as they have many advantages. Movable, easy-to-rearrange cards are vital in the early, ideation phase of a product. Fortunately, our vision is clear, and we cast our priorities into stone in a totally non-agile way. Please don't try this at home, and always maintain flexibility in product management and in life. However, for this demo, it's okay to draw the cards on the paper.

For each card, we also want to add a short version of the requirements associated with the outcome. For multi-user, multi-platform, or multi-channel cards, we want to add those classifications. As our map is only aimed at cat-sitters, it's pointless to define the cat-sitter user group.  

The last step is adding a title. Usually, you want to give your maps a meaningful title. I have seen digitally created maps with titles ranging from "Untitled" and "UXMap" to the URL of the site. Needless to say, all those are terrible choices. People who are not familiar with the process used to generate the map should know instantly what it is describing. Titles are also helpful when distributing the maps to the wider organization to get buy-in.

In our example, “How to make a cat happy?” will do the trick. I add the "Opportunity" to the title, if that can be spelled out with simple and short words. If not, then you might need to think a bit more about your opportunity. Remember that now you need to discuss this with your main stakeholder, the cat-sitter. You need both the map and a conversation to solve a problem. In the following chapters, we will see business situations and get into facilitating the conversation using the map, but this chapter's examples stop at the finished map:

This map is also an example for cards not needing well-defined edges. It's customary to draw a rectangle or use a sticky note as a card, but sometimes it's not needed. I could have added a thin border around each card, but it would have added only visual clutter. As you can see, just a few words on a paper can form a map.

In the next section of this chapter, we will draw the same map with well-defined card boundaries, and more importantly using digital tools instead of free-hand. 

Drawing by hand is great fun, and all maps in the book can be done with pen and paper; each chapter will show you how to do the map with software. Digital tools will result in easier to edit and more readable maps while sacrificing the handmade charm. If you don't intend to sell your maps on Etsy or eBay, but use them as a communication tool, then digital might be the way to go.

I will use different software, my personal favorite for a map type. This, of course, doesn't mean that you need to use that software. This book is not intended to be a tutorial for any of those software products, so just use what's the easiest for you.

In my eight years as a people manager, the most frequent software product I have seen in CVs is Microsoft's Office package, more specifically Word. Although Microsoft Word is rarely among job requirements for a UX job, most people will know the software at least to a basic level. Although people have Word installed on their machines and use it to write shorter or longer texts, most people would not think of it as a User Experience Mapping tool.

On the screenshots, you will see Microsoft Word 2016, but you can use older versions to achieve similar effects. I will not use any feature new to Word 2016. I will use the Windows version, running on Windows 10. Again, you can use the Mac version to achieve the same look and feel. 

To create our journey map, launch Word andInsert a SmartArt Graphic from the Insert tab's Illustrations group, selecting SmartArt:

In the following choose a SmartArt graphic dialog box, click on the type and layout that you want. There are many types available, but for our mapping purposes, Process seems to be the best starting point. With that said, please experiment with other types too.

For now, let's just pick Basic Process:

Choosing a SmartArt Graphic

Now, we can add our textual content. For this demo exercise, we will not specify user groups, just as we only intend to target cat-sitters. To add text to SmartArt, we can use the text pane. If it's not visible, you should click on the control button (that usually looks like a "<" character): 

Once you are in the text pane, simply type in the text. Each top-level list item in the text pane will create a card as a map element. You can even copy and paste a list. If you press Tab, you can add sub-elements; those will be shown on the card as a list:

Text pane

Remember, for each map, you need to create a structure that can be easily and quickly understood by a miscellaneous passer-by. For our map, it makes sense to name the card by the outcome. 

As the second level, we want to add a short version of the requirements associated with the outcome. Pressing the Tab key at the beginning of the line will enable you to make a first-level item a second-level item, pressing again will make it a third-level item, and so forth. Pressing the Backspace key at the beginning of the line will decrease the level, making the second-level item a first-level, for example: 

Adding text to different level items

At this point, you might realize that theBasic Process SmartArt type might not be the best for our map, as one card is not the result of the previous card, but they are all needed to make our cat happy. Fortunately, you don't need to recreate the SmartArt. You can change the type on-the-fly from the Layouts selection in the Design tab, as follows:

Deciding the design for our map

When you hover over different layout types, you can see their effect on our map, while clicking on one commits the change of type. For this map, arguably the best type would be Vertical Arrow List. All of our efforts should lead to fulfilling the opportunity, and they are not necessarily a result of the previous card's fulfillment. You can easily give food and water at the same time, no need to wait until the cat finishes drinking before you put down the food bowl. 

Same as with the hand-drawn map, vertical placements of a color can be a good representation of importance here. Remember, if you draw two cards, one above the other, then people assume that the one above is more important. What's easier to do digitally is to gradually add tints of a color to highlight importance. A tint is the mixture of a color with white, which increases lightness. This means that the most important box will be the pure color, without white mixed in, and we add more and more white as we go down the importance scale.

To do this, Office has an easy solution. Just go to the Design tab and select Change Colors. There, you can find the gradient range of your chosen color. I have picked green because it is often associated with safety or the most important outcome. Moreover, it has a strong emotional correspondence with life, health, and clean environment. It is also the most restful color for the human eye. Another fun fact here is that cats don't see colors like we do. Reds and pinks appear greenish to them, whereas purple is just another shade of blue, but they can see shades of green similarly to how we see the color, according to Nickolay Lamm (http://nickolaylamm.com/art-for-clients/what-do-cats-see/):

Changing the color scheme

You may find it odd that we started with the opportunity on the hand-drawn map, but not digitally. The main difference is that we are using the hand-drawn map as a guide for our digital map. Therefore, we know the opportunity and it's always in our focus, even if we haven't added it to the map yet, but now it's time.

Although you can add shapes inside the SmartArt, sometimes it's easier to add another SmartArt or Text Box next to it. To do so, we will start with resizing the SmartArt, so there is space to the left. In parts of the world where left-to-right writing is more common, it makes sense to add the opportunity to the right-hand side of the page. To resize the SmartArt, move the mouse cursor over the SmartArt's left edge. There should be a dot in the middle when the SmartArt is selected. Click on the SmartArt if it's not selected. Now, the cursor should turn into a double arrow, and you can start dragging it to the left to set the size. Most drawing elements in Word (and other software) can be resized the same way:

Resizing the SmartArt

Changing any element of the SmartArt is simple and intuitive. Just click on the element, and set the option in the Format panel. For example, I changed the text color for the second-level elements on the following screenshot to better match the rest of the map. This step is, of course, optional:

Customizing the elements

After you finish formatting your SmartArt, we will add the "Opportunity" as a Text Box; you can find that in the Insert tab's Text group. You can choose a Simple Text Box and format it later: 

Now, you can move the Text Box to the right location by dragging and dropping with the mouse. Then, you can resize it by dragging the dots on the edges to make it the right size:

Optionally, you can change its appearance by selecting one of the Theme Styles or by manually setting your Shape Fill and Shape Outline colors:

Now, you can rotate and add the text for our Opportunity box. If you want, you can rotate the text from the Format Shape panel (Text Options | Text direction dropdown):

Rotating the text

The last step is adding a title. You can type in a title as your first line of text in the document. Remember, when creating a title for your map, try to find something that the stakeholders can relate to. Something that stops them in their tracks and starts user-centric thinking based on the subject. 

How to make a cat happy? was my choice, because it introduces the "Opportunity" with simple and short words. Format the title to your liking and publish the final map by printing it. Don't forget that you need to discuss this with your cat-sitter. Both the map and a conversation are needed to solve the problem. In the following chapters, we will delve deeper into facilitating the conversation using the map, but this chapter stops at the finished map: