User Experience

Our hero: Storymapping the user experience

9 minute read  2 comments
storymapping_user_experience_7

Mapping out how a user might interact with a product is key to creating a fluid user experience. Flowcharts and task flows are pervasive design tools, yet they lack the human factor and lead to a less than engaging ways to conceptualise the user flow.

There is a tendency for the design process to become feature-centric and solution orientated, leading to the user being relegated to secondary importance. Storymapping is a tool that can overcome these obstacles and focus the design team on the needs and motivations of the user. 

We are inveterate storytellers says the philosopher Owen Flannagan, “who create our own identities around a story”. It seems appropriate that story (without the definitive article) should be incorporated into design thinking as a creative tool, one that can also define the identity of the product. A story approach to imagining a user’s journey is a valuable way of breathing life into our design challenges, opening the mind to ideas and finding the obstacles that need to be overcome.

Italo Calvino illustrates what a story is in his novel Invisible Cities.

“But which is the stone that supports the bridge?” Kublai Khan asks.

“The bridge is not supported by one stone or another,” Marco answers, “but by the line of the arch that they form.”

Kublai Khan remains silent, reflecting. Then he adds: “Why do you speak to me of the stones? It is only the arch that matters to me.”

Polo answers: “Without stones there is no arch.”

In the beginning

Think of any film, be it a film by Micheal Bay or Chan-wook Park. It will begin with a character or characters. An event occurs that changes their situation. This causes conflicts, that are resolved in some way by the end. This is story structure. 

The origins of this approach go back to Aristotle, the originator of the classical story structure. He told us that a story has “a beginning and middle and end”. In 1863, the German playwright and novelist Gustav Freytag updated the three-act structure by investigating ancient Greek drama and plays of Shakespeare. He identified common patterns and introduced the five-act story arc. This structure is represented neatly by a pyramid, which is still in use today.

storymapping user experience - freytags pyramid

Freytag’s Pyramid

Let’s take Spielberg’s Close Encounters of the Third Kind as an example: 

  1. Exposition: The film opens with government scientific researchers investigating the disappearance of airforce planes over the desert. Then a three-year-old boy is awoken in the middle of the night. He discovers something in the kitchen that is off-screen and runs after it through the front door.
  2. Rising action: Roy Neary (Richard Dreyfuss) is an electrical lineman who witnesses an unidentified flying object. He becomes increasingly obsessed and refuses to accept a logical explanation. This causes issues in his personal life and his wife leaves him. Roy meets Jillian, the mother whose child went missing at the beginning. They are both obsessed with finding out what is happening. They both travel to Devils Tower, the site of army activity, where they hope to discover the truth.
  3. Climax: Roy and Jillian finally reach Devils Tower where they discover a brightly lit landing pad onto which, an enormous mothership descends. A group of government researchers and UFO enthusiasts (including Roy) get ready to greet the alien visitors.
  4. Falling action: The mothership opens its doors and begins releasing animals, children and adults that went missing from different eras. Jillian is finally reunited with her lost boy.
  5. Dénouement: The aliens finally appear from the mothership. Along with 12 government explorers, they select Roy to come with them on their travels. Roy ascends with the aliens. The end.

This is a simplified version of the plot showing Freytag’s Pyramid in operation. The many details of the plot become perfectly clear when overlayed over this arc.

Donna Lichaw, a strategy consultant, has specifically used Freytag’s Pyramid as the basis for a design tool called Storymapping. This is where the use of story really shines for product design. This is the ‘user’s journey’. The user is the hero of our story. It is with this tool we venture next.

The power of Storymapping

Storymapping puts motivation and behaviour of the user front and centre. By using the story arc, from exposition to resolution, we are visualising a natural process that is understandable by everyone. You could say it’s user-friendly. We are all deeply aware of this structure. It suffuses our culture through film and advertising. This story arc has been absorbed into our subconscious. 

One important aspect of this process is that it can help build empathy with the potential user. In short, it gives us a window into the user’s world, to learn about their potential difficulties and latent needs in order to explain their behaviours.

Renowned psychologist Jerome Bruner argues that stories provide a means of structuring and reflecting on our experiences. It is an appropriate tool that allows us to organise our stream of ideas and experiences, order them and work out meaning in our design flow.

storymapping_user_experience

Let’s break down the reasons that Storymapping is so powerful into two parts.

Firstly, Storymapping is about engaging your audience and quickly communicating concepts to the product team. People can grasp concepts far more quickly when they are presented graphically. Contrast this with the use of abstract feature centric diagrams. Storymapping by its very nature is a highly collaborative and inspirational tool.

There may be some in the audience that thinks we are descending into some kind of Arts and Crafts design hell by using this technique. Far from it.

Secondly, Storymapping is about uncovering strengths, weaknesses, gaps, and opportunities that you might otherwise miss. We are less likely to fall into the trap of focusing on the ‘how’ things are done when using this tool, but answering the ‘who, what, where, when, and why’. 

This technique is highly flexible. It can map out the smallest feature, single interaction, full project or even a family holiday. Using the story arc also models how we interact with products as events plotted out with natural peaks and troughs of tension and release. Mapping these user flows onto a story arc helps us see the flow of ideas and interactions as your users might experience them.

There may be some in the audience that thinks we are descending into some kind of Arts and Crafts design hell by using this technique. Far from it. It is a serious professional tool that has serious benefits. 

Just one aside. This technique should not be confused with Agile Storymapping popularised by Jeff Patton. This technique is more concerned with the prioritisation and implementation of software features.

Starting the journey

There are a number of things we can map, such as origin and concept stories, but for now, we will concentrate on what is known as a usage story. This is how a user navigates through our product step by step.

Storymapping can map out the smallest feature, single interaction, full project or even a family holiday.

Storymapping sets out to visually map a user journey. It can come at any stage in the design process. I personally prefer to use it after the discovery stage, when we have created Job Stories, a tool for defining features based on user’s motivations. These Job Stories form the basis of what will become the usage story for any piece of functionality or larger design project.

All you need are post-it notes, cards or sheets of paper or coloured markers on a whiteboard. Whatever works for you.

You should be armed with some user research and analytics data to get you started. There will be points in the flow that you have no data for, and this is perfectly fine. One of the purposes of this technique is that it allows you to brainstorm at every possible plot point. It will force you to think “what if?”.

In design terms, we can tailor this narrative structure and make it relevant to what we are doing. We are using an expanded version of the story arc. We will introduce two extra plot points that are relevant to product design; ‘event’ and ‘crisis’. Some of the names of existing plot points such as ‘dénouement’ can be exchanged for ‘resolution’ which reflect the nature of the thing we are mapping.

How it works

Let’s break down the process. We will take a product flow as our example. 

storymapping user experience

Example of Storymapping task functionality

1. Exposition/Start

Who is it for and what is their goal?

The user, in this case, could be an HR manager. They need access to employee details. This gives us context.

2. Event

What is the incentive or call to action?

This can be the problem the user wants to overcome. If there is no problem, there should be something enticing for the user to become engaged. In our case, the HR manager receives an alert to update employee benefit details. 

3. Rising Action

The steps that the user takes.

It’s the journey. It should build. Our HR manager clicks on an email link, is brought to a notification page, where they can read an important message. They then open a new page and enter the specific data into a form. 

4. Crisis

This is the impediment to the user.

These are possible issues that may face the user. It’s the gargoyle at the gate. Maybe they are unable to log in properly as they have come from an email. Or the message doesn’t communicate effectively, so the user doesn’t know what to do. It’s the low point for the user experience. It’s ‘make or break’ for their experience. 

5. Resolution

This is the experience of value.

This is how our user has overcome the obstacles. The HR manager has entered the information easily and it is saved successfully.

6. Falling action

How the user finishes the flow.

This about finishing off the experience with something extra. The HR manager now gets a nice confirmation message to say that they have successfully entered the information. What would they like to do next? Add more info? Alert a team member of this change? Export a report? 

7. The end

Where does the user end up? I hope it’s sunny.

When the user has completed all the actions in the flow, where can we bring them? We can bring the user to a dashboard with their activity. We can also add context by showing the overall activity for the month. This should be the end of a very satisfying user experience.

Extra detail

Under each plot point, we can put down what action we assume the user will take, layer it with other detail, such as what psychological behaviour we might expect and what principles we can employ, such as using Design with Intent cards to help us help the user. We can incorporate the Fogg’s Behavior Model and relevant psychological principles. At each plot point, we are plotting not what happens, but how it might happen and what might affect this. I try to keep it as simple as possible.

The ultimate goal with Storymapping is to frame the user as the protagonist and the hero of your product story. These stories can be as short and long as you like. But a word of caution. If we make this process too complex, it will start to start to become unwieldy. If you start feeling frustration setting in, stop and start to pare your story back.

The sense of an ending

I realised that there was a correlation between reflecting on the design process and Storymapping as a tool. Storytelling can be used to investigate our design process. There is always an interesting story to tell at the end of a design sprint. This ap can elucidate what happened during our design thinking, what issues arose and how best to learn from it.

By combining Job Stories with Storymapping, we can create a powerful user-centric approach to design. Once you start using Storymapping for a while, you will begin thinking in stories and then your most important asset, the user, will naturally become the hero of all your design journeys.

Tell me your story

I’d be interested to hear what tools you use in your design process. Do you think Storymapping can be extended and improved? And do you think it would work with effectively in your organisation? Leave a comment

storymapping user experience

References

2 Comments
  1. Thanks for the fantastic info. Valuable tips. This is an issue we have grappled with for a while as our team is diverse. I could see this being implemented into our design sprints and working well. I would be interesting to see how customizable this to our own process.

    Can you recommend a Storymapping resource to go further?

Discuss this article

Your email will not be displayed.