Storyboarding & UX – part 1: an introduction

Related posts:

The fields of user experience and service design typically use storyboarding to sell design solutions. They do this by casting personas in stories, showing the benefits of those solutions. They often look quite polished and professional, and can be daunting to some in these fields to pick up a pencil and try it for themselves. But not only can you draw these scenario storyboards yourself to sell your solutions, you can also use them as a powerful method for devising those solutions in the first place.Storyboards are part of the intriguing world of sequential art, where images are arrayed together to visualise anything from a film to a television commercial, from a video game to a new building. They’re an effective communication device, bringing a vision to life in a way that anyone can grasp and engage with, before investing in producing the real thing.

Storyboarding is also catching on fast as a practice in experience design, because of the way it can combine so many disparate elements — such as personas and their behaviours, requirements and solutions — to achieve those ‘a-HA’ moments we want from team members and clients. Not only can you draw storyboards yourself to sell your solutions, you can also use them as a powerful method for devising those solutions in the first place.

In three articles I will introduce you to the world of storyboarding:

  1. In this first article in the series focuses on storyboards as a medium to help explore solutions to UX issues, as well as communicating these issues and solutions to others;
  2. The second article gives you a detailed look into how to create storyboards, using the skills and materials you already have;
  3. The third article explores how to bring storyboarding into research workshops, to help participants articulate themselves, and to reveal more valuable insights about their experiences and behaviours.

Introducing storyboarding…

I remember watching one of those extras included on a Pixar DVD that showed some animators taking the rest of their team through a sequence in the film as a conceptual storyboard. It was entertaining to watch; it felt like being in the room as each artist took great delight in explaining the sequence to everyone. But what really struck me was the similarity to user experience practice: here was the architect of an experience, pitching an idea to a set of peers, using a story, illustrated by something that everyone could see and relate to. And it occurred to me: why can’t our practice and our use of storyboarding be as moving as that?

Yet another UX silver bullet?

In user experience design we’re familiar with user research techniques like workshops, contextual inquiry, and interviews. We synthesise our research into audience archetypes, user stories and process flows. We communicate our thinking and solutions to our teams and clients with artefacts like personas, flow diagrams, and wireframes. And if we’re feeling really fancy we can even shell out experience prototypes and service blueprints. Somewhere in all of this lies the people for whom we’re designing, what’s going on in their worlds, and how we’re making their lives better. As practitioners in the science and craft of UX, we innately get it, we see the narrative that threads all of these artefacts together – the spirit of the solution breathing through it all, that we want our clients to be captured by.

But clients tend not to be conceptual thinkers like us; they need us to connect the dots. And that’s where storyboards come in. Storyboards – indeed all forms of conceptual illustration – work well because of two truths: firstly that the act of drawing (and even seeing others draw) can help us think, and secondly that images can speak more powerfully than just words by adding extra layers of meaning.

The power of storytelling

Ever since the horses danced across the cave walls of Lascaux, and the Egyptians regaled their monarchs’ triumphs in tomb frescoes, we’ve been telling stories to each other through sequential art, or pictures chained together as a narrative. As Nancy Duarte says in her book Resonate, “Stories are the most powerful delivery tool for information, more powerful and enduring than any other art form”.

The analysis of stories reveals regular patterns that we can use for our own benefit when communicating solutions through storytelling. In the Technique of Drama (1863), Gustav Freytag rationalised stories into five acts: exposition, rising action, climax, falling action (or final suspense and resolution) and dénouement (conclusion).

s

Freytag’s Pyramid, showing the five parts, or acts: Exposition, Rising Action, Climax, Falling Action and Denouement. The diagram seemed a bit dry by itself, so I’ve added a quick story into the pyramid about a guy and his phone that won’t work.

Another common pattern is the Hero’s Journey, a narrative convention made popular by Joseph Campbell in his book The Hero with a Thousand Faces (1949). While it’s important to honour the real experiences of the people for whom we are designing, we can often reframe them – or a persona in a contrived experience – in the role of that hero, on a quest in the structure of the pyramid above.

Harnessing these conventions helps us make our stories resonate more with others, and make complex concepts crystal clear.

There are lots of other ways for using storytelling to help design and communicate better experiences. Francisco Inchauste and Cindy Chastain have written marvellous descriptions about how approaching UX with storytelling inspires design concepts and brings teams closer together around a clearer picture of what’s being designed.

The history of storyboarding

Nowhere is storytelling through images more obvious than in comics and graphic novels. The venerable Scott McCloud is a master of the medium and his books are an excellent place to start if you’re into communicating stories through sequential art.

This art form is essentially storyboards as end product, rather than the means to specify the end product. What’s particularly inspiring about comics is the way they use text and pictorial expression to immerse us in the world of the characters. Indeed, comics exploit all our senses, “to be an art of the invisible”, as Scott McCloud says in Understanding Comics.

Storyboarding has of course been central to motion picture production. The Walt Disney studio is credited with popularising storyboards, using sketches of frames as far back as the 1920s. What’s interesting is that storyboarding was always very much a team-based activity: each scene would be drawn on separate sheets of paper, pinned together on a board to form the storyboard, and then presented and critiqued with the director and/or peers.

Disney Story Supervisor Joe Ranft pitching storyboards from Tim Burton's "The Nightmare Before Christmas." (via Jim Hill Media, copyright Disney Enterprises, Inc. All rights reserved)

Many studios such as Pixar rely heavily on storyboarding in conception stages as well as production. What might come as a surprise to many is that Pixar does not begin new movies with a script; instead the story is fleshed out under the director’s leadership through storyboarding. In some cases, storyboards become the ‘source of truth’ for production rather than just for pre-visualisation: the Wachowski brothers (of Matrix trilogy fame) were (in)famous for not letting cinematography deviate from the storyboard. This slideshow by Catherine Lewis offers a glimpse of how close the final cut is to their storyboards.

Stories in pictures for UX

The ‘pitch and critique’ technique is familiar to many in user experience design, but this isn’t the only similarity between film storyboarding practice and UX practice. Both disciplines rely heavily on an iterative approach. Pixar cofounder and President Ed Catmull and Pixar’s directors find it better to fix problems than to prevent errors. “My strategy has always been: be wrong as fast as we can,” says Andrew Stanton, Director of Finding Nemo and WALL-E, “Which basically means, we’re gonna screw up, let’s just admit that. Let’s not be afraid of that.”

In a way, storyboarding has always been the low-fidelity prototype of film, bringing together the elements of script, plot, scene, and characters. And just like the sorts of prototypes favoured in UX, film storyboards are useful for directors to visualise the solution, define where investment is needed for various resources, and foresee potential issues. Some studios even work storyboards together as reels — or animatics — with temporary voices, sound and music.

If you often find yourself in the role of visualiser for your client, teasing out their requirements and reflecting them to ensure a shared understanding, you’re not alone. Directors rely on storyboard artists to do exactly that. Indeed, there is an interpreter role that the storyboarder plays, becoming just as part of the instrument of visualising as the storyboard itself. As J Todd Anderson explains, about working with the Coen Brothers, “I go inside their heads, try to understand what they are thinking, and put it on paper. I always try to make the drawings theirs, not mine.”

So it makes a lot of sense for user experience designers to use storyboarding as a practice. Storyboards bring our solutions to life, so that clients can walk in the shoes of their customers/staff/community, and see solutions as we see them. But more than that, we should seek not only to inform; we should seek to move our clients, to affect them at such a level that they really do connect with the characters, just like film storyboards can allow.

There are a few specific uses for storyboarding for UX to explore in detail: helping us to think, helping others to communicate to us, and helping us to communicate to others.

Storyboarding helps us think

As a modelling tool, storyboarding helps us string together personas, user stories and various constraints. It helps to almost literallu walk through a scenario as a persona and see the triggers that occur, the channels that are used, the process that is followed and decisions that have to be made along the way. In effect, we can wind up a persona, then let him/her go, and watch what happens by sketching it out.

More than that, the action of sketching out role-play tests our concepts, lets us experiment at little or no cost, allows for fluid team-based brainstorming, reveals more ideas, and scrutinises them for authenticity.

Part of an initial sketched role-play looking into how a particular persona would go about diagnosing an issue with their mobile phone. The key here is quickly mapping out an experience to expose questions, decisions, and problems that would need to be solved along the way.

Storyboarding helps us to understand existing scenarios, a well as test hypotheses for potential scenarios.

Storyboarding helps others communicate their experience

Storyboarding makes for a very engaging and thought-provoking activity in research workshops. It’s often easier (and more fun) for people to articulate their experiences relevant to a particular objective in a workshop, by storyboarding it. This will be the topic of the third article: Storyboarding: using storyboarding as a workshop activity.

Storyboarding helps others understand

There are times where it’s crucial that clients feel the full weight of their customers’ issues with their products and/services, before galloping into solution mode. Storyboards are an evocative way of expressing these sorts of issues, whether or not clients have known them for a long time, or are seeing them for the first time. Often many of these issues are derived from research, and can be a bit dry and esoteric if presented only as words and charts. Presenting them as a story, with pictures of people in places, with real behaviours and real reactions puts the heart of the issue back in to our communications.

We are hardwired to respond to stories: our innate sense of curiosity draws us in, we engage more when we can sense a meaningful achievement about to be had, and we empathise with characters who have real-life challenges similar to our own. Indeed, when we listen to a story, we can enter what some call a ‘storylistening trance’. Among the documented characteristics involved in this fascinating altered state of consciousness include realism (the sense that the story environment or characters are real or alive) and ‘placeness’ (the sense that the listener ‘goes somewhere’ into another space).

Stories, represented as storyboards, link our facts and ideas with our audience’s experiences and emotions; their imagination fills in the spaces we create, providing a far more engaging, memorable and persuasive experience.

And when it is time to be in solution mode, expressing our solutions as storyboards is an efficient, and equally entertaining way to gain a shared understanding of a proposed approach, especially if presented in contrast to the existing experience.

Next up: a practical guide

The next article in this series will explore how you can create storyboards to help others understand issues and solutions using the skills you already have.

Ben Crothers

Ben is design strategist at Digital Eskimo and owner of Catch Media. He is passionate about fostering empathy and creativity in others, and the power of design to change lives rather than just the decor. When not asking questions and dreaming up ways of using his kids’ toys as protoyping tools, he gets into photography, oil painting and drawing.

10 comments on this article

  1. Pingback: » Storyboarding & UX – part 1: an introduction Johnny Holland – It’s all about interaction » Blog Archive | UXWeb.info

  2. I have 2 points to discuss around storyboards:

    One, I believe in the effectiveness of storyboarding in UX. However I think as UX practitioners we often abandon the technique prematurely for more familiar means of communicating design like flowcharts, screen mocks, presentations due to the fact that ironically lot of designers are afraid to draw!

    Second, I agree with your notion that clients typically are not conceptual thinkers like us and storytelling is lot more resonant with non-designers however engineers and product managers in cross-functional teams do get flowcharts and diagrams. In some ways, UX design artifacts share similar characteristics as engineering artifacts like use cases and flowcharts.

  3. Pingback: Storyboarding on UX Design « rastplatznotizen.

  4. Pingback: Storyboarding & UX – part 1, 2 and 3 | webdesign FBAUL

  5. @Deepak two points well made. I agree that often we (UX, design and development) will go with what’s most familiar, because – let’s face it – it’s often mentally taxing enough to wrestle with the particular issues in a project, let alone spending time thinking about how best to communicate outcomes with others.

    But I think there’s some neat ways of starting with the more familiar — e.g. flowcharts — and using those as a start for a storyboard. So in effect, a storyboard can be shown literally above the storyboard, where certain sections of the storyboard could visually line up with sections of the flowchart. Worth a try?

  6. Pingback: Selling your UX approach with storyboarding | Catch Media

  7. Pingback: Sketching A New Mobile Web | Tenth Geek

  8. Pingback: Sketching A New Mobile Web | Artistique Mode

  9. Pingback: Improving UX with Customer Journey Maps

  10. Pingback: Improving UX with Customer Journey Maps | Designer Brisbane blog