May 2023

As I’ve written about before (and in my Presto Sketching book!), storyboards give you great bang for buck when you want clarity and direction in any project, especially for product and service design. Here’s how to construct the most essential ingredient: the story itself.

Storyboards can guide you and your team from problem to solution to experience to execution. They serve as explainers for an existing experience (e.g. a customer experiencing a problem), or as prototypes for a future experience (a customer achieving their goal using a solution). And by ‘drawing it out’, you can spot gaps in your thinking, and invite more effective feedback from team members and stakeholders alike.

A hand-drawn image showing how ideas can flow between people with storyboards — *Storyboards are great for clarifying and refining problems, solutions and envisioned experiences as a team*

Get your story straight

Whether you’ve never drawn a storyboard before, or you’re a seasoned veteran, it can be daunting to put pen to paper, let alone show your storyboards to others!

Never fear.

The most fundamental element of a successful storyboard is not the actual drawing. It’s the story itself. I’ve seen storyboards that weren’t that useful, even though they were sketched by people who are ‘good at drawing’, because the story didn’t make sense.

It’s the story that joins all the frames together. It’s the story makes your audience care. It’s the story that feeds their curiosity, sparks imagination, and keeps them reading to find out what happens next.

Don’t go on the Hero’s Journey

As a designer, I was taught the Hero’s Journey story format, the Monomyth by author Joseph Campbell, in his book The Hero with a Thousand Faces. On one level, it’s easy to see how you can use it as a way to tell your customers’ stories: by casting your customer as the hero, you can then illustrate a challenge they’re up against, and your solution as the Helper or Mentor.

Even when I first tried to apply it, I found it problematic. For a start, the way of using it I just described ignores most of what’s actually on the Hero’s Journey, including the whole point of it: the Hero returns not only conquering whatever Enemy needed conquering, but a transformed version of themselves. That’s what makes so many stories so endearing. Plus, do we really want our customers to go through the Abyss, and Atone for their mistakes…?

The diagram of The Hero's Journey, but annotated to show how it does not work well for UX journeys

And that’s only the start of it. It’s been rightfully claimed that when Joseph Campbell combed through the stories of all ages and cultures to derive a single Monomyth, he basically cherry-picked what already fit the prevailing cultural narrative of the ‘rugged individualist’. In this way, what he did was falsely reductive and colonialist.

Also: is conquering enemies – even metaphorical ones – the only way to resolve things? What about collective experiences, rather than individual ones?

If you want to pen the next Star Wars or Lord of the Rings, go for it. But I think our customers’ and communities’ stories deserve better.

The Freytag story arc

There’s no doubt that stories of challenge and achievement have a huge pull on us, and it’d be rude if I didn’t mention the arc from Gustav Freytag’s book Technique of the Drama. Freytag rationalised stories into 5 acts: exposition, rising action, climax, falling action (or final suspense and resolution), and denouement (conclusion).

This might work well for the story you want to tell, but it always still fell short for me. Being mad keen on storyboarding my entire design career, and wanting to find a repeatable successful story framework that worked for me, my team, and other design teams, I extracted the best of what I could from these two and made my own narrative structure:

The Presto Sketching story structure

This story structure is purpose-built for product and service teams, but also works for change management projects as well, where you need to show an experience that involves either a problem with a negative impact, or a solution with a positive benefit.

And it goes thus:

A diagram showing the Presto Sketching 6-step story structure

I’ve done a screenshot of these stickies in Miro, to show that you can construct your story using words and simple sticky notes, whether real sticky notes, or digital. Let’s take a look:

CONTEXT – Set the scene. Who is the story about? Where is this character or protagonist? Why are they there, or what is their goal? This helps your audience to know exactly what’s going on.
TRIGGER – Show the motivation. What is the unmet need or problem? Without this, it’ll be hard for your audience to care about what’s going on.
SEARCH – Wind up your character, and let them go. What does your character do first (and do next), to try to solve their unmet need or problem?
KEY – Show what’s new. What’s the main feature or change that unlocks success from here on in?
ACTION – Let your character go again. What do they do next, that involves the feature or change that they have found?

At this point, your story structure will be different depending on what you intend to show:

WIN – Show the achievement. What’s the end-game, or benefit? How does your character achieve their goal? OR
LOSS – Show the frustration. What’s the negative impact? What is your character left with?

How to use this Presto Sketching story structure

You can use this structure as a way to synthesise and translate the various elements you have into a visual story that your audience can read and act on, based on the 6 ‘stages’ listed above.

Step 1: Set your goal

Decide what the goal of your story is going to be. This includes:

What is the main point you want to make with your story (and then storyboard)? Is it to explain a situation that needs attention/fixing? Is it to show a new idea in action?
Who is your main audience? What is their perspective on the subject of this story? How close or distant are they to the subject matter? What’s in it for them?
What action do you want them to take? As pleasant as it will be for people to read your story/storyboard, there needs to be a clear point to it. Do you need to raise awareness? Clarify and educate? Get them to empathise? If so, why? Do they need to make a decision of some sort?

Example:

Some how-to details on the Presto Sketching story structure

Step 2: Gather your material

You’ll probably need some material to translate into your story. This could include:

Customer interviews, survey responses, customer quotes, personas/archetypes, and other authentic user research and analysis
Product/service usage data
Existing journey maps and service blueprints
Existing or new ideas for user interfaces, processes, other other aspects of the experience or change you area designing
Existing or new product/service ideas, and ideas for how your customers/employees will use them

Step 3: Get 6 sticky notes

Whether you use physical or digital sticky notes is up to you. Both are quick and cheap to use.

Step 4: Get writing

Label each of the 6 sticky notes with the stage names above (including whether you choose WIN or LOSS). Then, try to write a succinct sentence describing each stage. Note: one stage doesn’t have to equal one scene in your storyboard; it might end up being one frame or several frames. That doesn’t matter right now.

Example:

Set yourself up for storyboarding success

Congratulations! Now you have the bones of your story. You have a sound, logical structure that has a beginning, middle and end, and that unites the various essential elements into a coherent whole.

From here, you’re ready to draw your storyboard. This can take several forms – office paper, large long gallery-style sheet of paper, PowerPoint slides, Miro canvas, you name it – but now you have a story that you can tell, and you can adapt to any of these media.

…and drawing the storyboard will be the subject of another blog post. 😉

So, what do you think of this structure? Try it out. I’m interested to know how it works for you, and how you might adapt it for your team and your project.

There’s that fantastic time in any product or service design project where an idea is just starting to take shape, and spread its wings. Will it be The Next Big Thing? Will it be able to stand up to the barrage of oncoming questions, like: will it resonate with your target audience? How will it work? Is it even feasible?

That’s where storyboards are your friend, and the best way to help your idea spread those wings, and be ready for those questions.

Storyboards are sets of frames with pictures and narrative text, organised as a sequence to be read as a story. They’re very useful for when an idea is too hard or conceptual or expensive to prototype. You can sketch out your idea using a sequence of simple pictures arranged like a comic, to show the context of that idea: who is experiencing the idea, what they do, how they do it, when they do it, and why.

Why storyboarding is so effective for any team project

As far as design asset bang for buck goes, it’s hard to go past storyboards. They not only capture and communicate an experience so fast and so well, they also double as a prototyping tool; the act of drawing a storyboard helps you to understand and test your own ideas.

Storyboards came from the world of film. They bring the various elements of the craft of cinema – such as script, characters, location, and of course the plot – to life in a unified way that others can start to see how it all comes together.

An example of a storyboard I drew to bring an early mobile experience to life — A storyboard I drew to bring an early mobile experience to life

Storyboards are an important way to visualise stories involved in user experience design:

Illustrating an existing experience, often showing a particular problem in the experience, and its negative impact on people
Illustrating an envisioned experience, showing a solution and the benefits of that solution
Showing state differences in products and services where interface designs wouldn’t be enough, such as showing differences based on different times of the day, different locations, or different personas/archetypes

They are also very handy when it comes to envisioning, prototyping and planning other kinds of experiences, like:

Change management envisioning and roll-outs
E-learning content and training videos
Explainer videos and promotion videos
Games
Video advertisements

What storyboards are not

Here’s how storyboards differ from other assets created in the world of product and service design:

Journey maps – journey maps offer a schematic view of an experience from a single user’s perspective, showing how a string of actions leads (or in some cases doesn’t lead) to a goal, and often how that journey feels. Journey maps are useful for visually summarising many different aspects of an experience – such as pain points, opportunities, sentiment – as a single map, in a way that just wouldn’t fit on a storyboard.

Service blueprints – service blueprints are similar to journey maps, but usually replace indications of how the journey feels, with much more information about what the journey includes from a system perspective, covering all user types. This means that what happens behind the scenes (or off-stage) is visually captured as well as what happens from the user’s perspective (on-stage). This can include internal teams, processes and systems, such as customer support resources and approval processes.

User flows – user flows are a schematic view of the experience from a task perspective. They typically show a flowchart of the sequence of actions and decision points linked together, usually outside of time. They capture what happens, rather than how, or how long.

Screenflows – screenflows and user flows are often interchangeable, but screenflows show the experience from the interface perspective. They tend to be sets of simplified screen designs or wireframes. They are useful for understanding how a given task/s is/are achieved across various screens and interface elements on a website, application, or other product, rather than who is doing the actions, or when.

What makes a great storyboard for your project?

Storyboards are best used as instruments of process, not product. In other words, they are best used to stimulate discussion, not seek approval. They are best used as prototypes, sketches only, made to inform others and get feedback about how an idea works, rather than being a fully-formed aesthetically-pleasing product about what the idea is.

A photo of a team at Pixar discussing a movie, surrounded by storyboards — *Director Pete Docter during a meeting for Pixar’s Inside Out. Note the various storyboards around.*

Storyboards should focus on being:

Quick – they take hours – rather than days or weeks – to create

An example of a simple but effective storyboard — *This is a simple storyboard from a team at BBC. Note how rough and ready it is, and yet conveys the story it needs to.*

Cheap – they are created using simple tools like pencil, sticky notes and paper, possibly some pre-made templated elements (rather than needing sophisticated software and training), before needing to spend any great amounts of money.

Another example of a simple storyboard — *A simple storyboard by Bryant Hodson*

Evocative – they should capture your audience’s attention, and help anchor discussion to how to improve the experience, not how to make the solution. In a now-famous move, Airbnb hired Pixar animator Nick Sung to bring specific moments in their customers’ experiences to life (code-named “Snow White”), and posted them around the organisation’s office walls.

An example of a storyboard used in UX strategy at Airbnb — *A single frame and a look at some of the other storyboard frames from Nick Sung, for Airbnb*

Unifying – storyboards are great at giving everyone – from designers to developers to customer support agents to managers – a common language to use, to discuss and improve customer experiences or employee experiences.

An example storyboard with added UX details under each panel — *A storyboard for a fictitious startup called You’re In, by Jordan Husney. Notice how you can arrange other information (in this case potential projects to prioritise) under each frame.*

Minimal – they should focus on the essence of what needs to be communicated and validated. This includes the level of detail and draughtsmanship finesse; when it comes to communicating the idea of a house, a simple blocky rendering of a house is the same as a professionally-drawn house, or a computer-generated image of a house. In cases like these, simple drawings are usually better, because extraneous distracting details can be omitted, e.g. age and style, size, materials.

As author Scott McCloud says, they focus on amplification through simplification.

What you need to create a storyboard

I’ll get into how to draw storyboards in another post, but for now, it’s good to know that you need the following elements to set yourself – and the idea that you want to communicate – up for success:

A user type – Who is your main character?
A goal – Why is the character doing what they’re doing?
An audience – Who will read this storyboard, and what do you want from them? Are you wanting to persuade them about fixing a particular problem? Or for them to provide feedback on a particular solution? Or to empathise with customers in a particular way?
A story – All of these elements come together and are brought to life through the story itself, or a sequence of events that is usually meant to engage your audience’s head (how does it relate to their knowledge and experience), heart (what does it mean to them) and hands (what do you want them to do).

That last element – crafting your story – is the subject of another post too.

How to construct a great story

Get your story straight

Don’t go on the Hero’s Journey

The Freytag story arc

The Presto Sketching story structure