How To Use Storytelling In UX

About The Author

Marli Mesibov is a Lead Content Strategist at Verily Life Sciences. She has been helping people understand doctors, hospitals, and health insurers for over a … More about Marli ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 176.000 folks.

Quick summary ↬ Storytelling is a powerful tool for any UX designer. It helps create a product and understand the people who use it. In this article, Marli Mesibov takes a real-life example of an app she helped to build in 2017 and explains five steps you can use to help you build a story into your user experience.

As human beings, we love stories. And stories come in all shapes and sizes. Children love fairy tales; teenagers ask “and then what happened?” when their friends recount gossip; history buffs explore biographies for insight into famous personalities; science lovers enjoy documentaries that offer explanations of the world around us; and everyone likes a satisfying conclusion to a good workplace drama or romantic exploit — be it fiction or fact.

We tell stories in our day-to-day lives. In fact, according to Scientific American,

But writing a story is easier said than done. A story is more than just a list of things. It requires the “causal connection” that Kahneman referenced, and it must be emotionally charged in some way. Let’s review five steps that authors use which will also help you build a story into your user experience:

  1. Choose your genre;
  2. Create context;
  3. Follow the hero’s journey;
  4. Revise, revise, revise;
  5. Write the sequel.

Step 1: Choose Your Genre

Let’s forget about UX and digital products for a moment. Just think about your favorite story. Is it a murder mystery? Is it a sitcom? A romantic comedy? It’s probably not a murdery-mystery-romantic-comedy-sitcom-movie-newspaper-article. That’s because stories have genres.

Before beginning work on a product, it’s important to identify the genre. But where an author calls it a genre, in UX we might call it a “niche” or a “use case”. This is different from an industry — it’s not enough to be creating something “for healthcare” or “for finances.” Your product “genre” is the space in which it exists and can make a difference for the target audience.

One way to determine your product’s genres is to create an elevator pitch. The team at Asana suggests that the core of an elevator pitch is the problem, solution, and value proposition.

The 5 step elevator pitch: Introduce yourself, present the problem, present your solution, share your value proposition and add a call to action
The team at Asana recommends a 5 step elevator pitch. (Large preview)

Another way to find the “genre” of your product is to fill in the blanks:

“We want to be the _____ of __________.”

Next, write a sentence or two explaining what that means to you. The key is specificity: the second blank should specifically describe what your organization does. This is your genre.

Here’s an example:

“We want to be the Amazon of find-a-doctor apps. That means we want to be known for offering personalized recommendations.” or “We want to be the Patagonia of ticket sales. We want people to know us for not only what we sell, but the ways that we care for the environment and the world.”

When my UX team worked on Sanofi’s Rheumatoid Arthritis (RA) Digital Companion, we took this approach to identify what features to include, and what a “digital companion” should do for someone with RA. We knew our audience needed a simple way to manage their RA symptoms, track their medication, and exercise their joints. But they also needed to feel supported.

Thus, the genre needed to reinforce that mentality. Internally, our UX team chose to focus on being “the Mary Poppins of medication adherence apps. That means we anticipate what the patient needs, we’re generally cheerful (though, not cheesy), and we focus on what works — not what’s expected.”

More after jump! Continue reading below ↓

Step 2: Create Context

Step two is to add context to the experience. Context is everything that surrounds us. When I use an app I use it differently if I’m sitting at home giving it my full attention than if I’m at the grocery store. The noise, the visual stimuli, and the reason I’m logging in are all context. A UX designer also creates visual context by including headers at the top of screens or breadcrumbs to show someone on a website where they are in the grand scheme of things.

In Lisa Cron’s book Story Genius, she has a section called “What Kindergarten Got (And Still Gets) Very Very Wrong.” In it, Cron explains that too many people mistake a list of things that happen for an actual story. The difference is this idea of context: a good story is not just a sentence, but a descriptive sentence: the descriptors add the context.

To give a product context, it needs to be developed with an understanding of what the background of the audience is and the context in which they’ll be using the product. For UX, some of this comes from personas. But there’s more to it than that.

In storytelling, Cron believes the problem starts in kindergarten when students are given “What ifs” like these, which are used in a school in New Jersey:

  • What if Jane was walking along the beach and she found a bottle with a message in it? Write a story about what would happen next…
  • What if Freddy woke up and discovered that there’s a castle in his backyard? He hears a strange sound coming from inside, and then…
  • What if Martha walks into class and finds a great big sparkly box on her desk? She opens it and inside she finds….
[…] The problem is, these surprises don’t lead anywhere, because they lack the essential element we were talking about earlier: context.

[…]Because so what if Freddy discovers a castle, or Martha finds a big box on her desk or Jane finds a message in a bottle? Unless we know why these things would matter to Freddy, Martha, or Jane, they’re just a bunch of unusual things that happen, even if they do break a well-known external pattern. Not only don’t they suggest an actual story, but they also don’t suggest anything at all, other than the reaction: Wow, that’s weird!

— Lisa Cron, Story Genius

Cron suggests amending a “what if” to have a simple line providing context for the character. Joseph Campbell would call this “equilibrium” or “stability” in his well-known story structure, the Hero’s Journey (more on this in the next section). Both Campbell and Cron are saying that an author must show what stability looks like before the hero receives their call to adventure (or “what if”).

For example:

  • What if Jane, who had been waiting for years to hear from her long-lost father, was walking along the beach and she found a bottle with a message in it? Write a story about what would happen next…
  • What if Freddy, who dreamed of adventure in his small town, woke up and discovered that there was a castle in his backyard? He hears a strange sound coming from inside, and then…
  • What if Martha, who believed she had no friends and hated school, walks into class and finds a great big sparkly box on her desk? She opens it and inside she finds…

For your product, context means going beyond the moment someone uses your product. The UX context includes the problem that someone has, what prompts them to find the product, and where they are when they use the product. Simply having a new tool or product won’t help someone to use it or feel connected to it.

Make sure to ask these questions instead:

  • Who is my audience?
  • Where do they spend their time?
  • What were they thinking, feeling, and doing before seeing my product?

These questions will start to create a context for use. For the RA Digital Companion, we began by creating a journey map to pinpoint all the things someone with RA experiences in their daily life. We sketched out the steps of the journey map on a storyboard, focusing on moments of pain, frustration, or concern. These became the areas where we thought our app could have the most impact.

For example, we wrote the story by starting with Grace (our person with RA) waking up in the morning, her hands already hurting. We hypothesized that she reaches for her phone first thing, maybe turning off the alarm on her phone. This became an opportunity to suggest a quick “game” on her phone which would challenge her to exercise her fingers. While we might have thought of the game without the journey map or storyboard, we also might have missed this opportunity to connect to a moment in Grace’s life.

Step 3: Follow The Hero’s Journey

As exciting as a story that goes on forever might seem, ultimately it would bore the audience. A good book — and a good product — has a flow that eventually ends. The author or UX team needs to know what that flow is and how to end the experience gracefully.

In his book, The Hero with a Thousand Faces, Joseph Campbell outlines 17 steps that make up a hero’s journey (a common template of storytelling). While the hero’s journey is very detailed, the overarching concept is applicable to UX design:

Joseph Campbell’s 17 steps that make up a hero’s journey
One thing that’s noteworthy in the Hero’s Journey template is where the culminating problem-solving moment happens. It’s not at the very end, as you might expect: it’s about three-quarters of the way into the journey. (”:

“Princess Dress” Tide commercial ()

We could break it down like this:

Call to AdventureLily’s princess dress getting dirty.
Refusal of the CallLily’s procrastination: she doesn’t want to change out of her princess dress.
Road of TrialsThe father collecting the dress and giving Lily her sheriff’s costume, plus her accompanying power trip (a true trial for every parent).
ApotheosisWhen the wash is dry and can be worn again.
Refusal of the ReturnThe parent wanting to leave everything nice and clear in the basket.
Crossing the Return ThresholdWhen Lily gets her princess dress back.
Master of Two WorldsLily is wearing clean clothes that are not yet dirty and having to be washed.

Important note: Notice where the product is used and where the user steps away from Tide and continues on with their life.

Ideally, with an app like the Digital Companion, a user could use our app for years. But there will be ebbs and flows. Building off our storyboard we created numerous vignettes for our user “Grace”.

When Grace needs to take her injection, we knew from user research she would be worried, uncertain, and even likely to skip the medication. Instead of seeing this as a static phase in her life, we imagined her on the “Road of Trials” in the Adventure of the Hero. This imagery became a part of the language we used to encourage users to overcome their fears and bravely give themselves their injections. Over time, as the app encouraged “Grace” to build a habit of taking and recording her injections, our app copy treated her like a conquering hero, moving through the Hero’s Journey to become a “Master of Two Worlds”.

Step 4: Revise, Revise, Revise

“Good writing is good editing,” so the saying goes. The same is true with UX. For an author, finishing the story is only the first step. They then work with an editor to get more feedback and make numerous revisions. In UX, we rely on user research, and instead of “revisions,” we have iterations. Usability testing, A/B testing, user research, and prototype testing are all ways to get feedback from the target audience.

But in UX we have a major advantage. Once a book is published, the feedback can’t be acted on. But digital products can be adapted and improved even after launch. Websites get redesigns, and apps get bug fixes.

For example, when launched, , allowed by the website. A failed story is simply a failure. A failed product can be iterated on.

In some cases, even a physical product can be updated to succeed. Consider a product like the Garmin watch. Even within one year there are labeled smoking a health risk. It wasn’t the sequel they had planned, but in the words of their fictional ad man Don Draper:

“If you don’t like what people are saying, change the conversation.”

As a result, they back in 2018:

“As human beings, we’re often drawn to the narrative; in part, because our complex psychological makeup wires us for the sharing of information through storytelling and in part due to our natural curiosity.”

Products are no exception: a good user experience takes the form of a story. The IA feels familiar and gives context and flow. The product itself will fit into a user’s sense of their own life story, and users are drawn to that.

To tell a story, you need to focus on a genre or a type of product and audience. You need to build out a world or context for your audience. Limit your scope to where you can have the most impact, revise with user feedback, and then think about the sequels. All in all, storytelling is a powerful tool for any UX designer. It will help you to create your product and understand the people who use it.