Storyboarding & UX – part 2: creating your own

Related posts:

When thinking about storyboarding, most people fixate on their ability — or perceived inability — to draw. What is far more important is working out the point you wish to make with your storyboard, and the actual story that will carry that point from your storyboard across the room and into the hearts and minds of your audience. In this article explores the value of establishing a reason for the storyboard first, and then how you can create a storyboard using the thinking you’re already using and the skills you already have.

Get your story straight

During a recent move, I discovered a whole book filled to the brim with comics that I had drawn during my primary school years. They were typical fare: myself and my schoolmates cast as a band of affable brigands, lurching from one side of the galaxy to the other having all sorts of unlikely and – let’s be honest – highly illogical adventures. In reading them as an adult I realised how rich they were in character development, but how hopeless they were in plot: truly, they rambled all over the place.

Establish if a storyboard is the best way to tell your story

If you’ve read this far, I assume you’ve bought into the value of storyboarding as an exercise to help you think and create, or as communication technique. But to ensure that your storyboard is an instrument of ideation or persuasion, rather than just light entertainment — like my childhood comics — it is worth comparing it to other means of getting your message across.

If everyone involved already has a solid shared understanding of the issue at hand, and if everyone has a shared sense of urgency for the same solution to be implemented, then the time for a storyboard has probably passed. In all other cases, a storyboard should be effective.

What’s your point?

It’s essential that you’re clear on what message your storyboard is to communicate. If you’re using it as a thinking exercise, knowing exactly who your character is, and what goal is to be achieved will give a better outcome. There’s something to be said for aimless fluid brainstorming, but ideas generation, scrutiny and validation will be more efficient if you have these elements ready.

If you’re using storyboarding as a communication exercise, ensure you have a compelling message to communicate first, for example:

  • An existing user experience problem to be solved
  • An impact on user experience caused by an existing situation, or if something isn’t fixed
  • A desired user experience based on a particular solution

Work out your story structure

If we’re to construct visual representations of stories to communicate customer issues or solutions to others, there’s some preparation to be done to make them logical, understandable and convincing in their arguments.

Much thinking and analysis has been conducted about stories and storytelling, yielding different theories, methods and structures. The first article in this series referenced the Hero’s Journey and Freytag’s Pyramid as being a useful place to start for translating an issue or solution into a story. The earliest recorded analysis of story (‘Poetics’) was by none other than Aristotle, and Jeroen van Geel’s interpretation of Aristotle’s ordered framework for interactive products is also really useful for applying to structuring a storyboard’s story.

The elements most important for storyboards are:

  • Character – the specific customer or persona involved in your plot. Their behaviours,     appearance, and expectations, as well as any decisions they make along the way, are very important;
  • Script – (or Diction, in Aristotle’s framework) this covers the character’s internal train of thought, as well as what they say and what others around them say. Revealing what is going on in your character’s mind is integral to a successful illustration of their experience in the storyboard;
  • Scene – (or Theme) the scenario that our character finds him/herself in. It could be a single room, or switch across several environments and channels, or even just within a single website;
  • Plot – the narrative that unfolds in your storyboard should focus on a goal for the character, and the key moments involved in achieving – or not achieving – that goal (more of this below). It should start with a specific trigger and end with either the benefit of the solution, or a problem that the character is left with. Try using Freytag’s Pyramid (from the first article) in structuring your plot.

To help your story to be powerful and enduring, here are some points to think about:

  • Authenticity – make your character and their scene, script and plot as real as you can, and your audience will empathise with him/her. Bring out your character’s back-story, speech patterns, and any rough edges. Also, ensure that the way you represent the story has its own internal logic. In other words, in the world of this story, it has to ‘make sense’ for your audience to take your message seriously.
  • Moments – there are     always several touchpoints or events in an experience where     triggers, decisions, actions, changes in emotional state, and behaviour reinforcement occur. Think about your character and plot in terms of these ‘moments’; whatever particular moments you come up with are great to illustrate.
  • Emotion – it’s essential to communicate the emotional state of your character     throughout their experience. Even simple iconography like smiley faces and angry faces can add the character and emotion your story needs to come alive in the hearts and minds of your audience.

Steps for drawing your storyboard

Just like setting out to design interfaces with a blank piece of paper, starting the storyboard can be a little daunting, especially if you’re not confident in your drawing ability. However confident you are, these steps can help you turn out a better scenario storyboard.

Try text or boxes and arrows first

If you’re more used to visualising with the boxes and arrows of process rather than a comic-style format, that’s fine: go with that first. Or if you’d rather write it out in point form, that’s fine too. The main thing is to break the story up into the trigger, moments, the decisions the character makes along the way, and end with the benefit or the problem.

First pass at a storyboard, just writing out the sequence of moments first.

Get your storyboard in touch with its emotions

If you’re following the process above, try just adding emoticons to each step, to help others get a feel for what’s going on inside the character’s head. Remember to illustrate any reactions to pain points along the way; what is the character expecting to happen, and how does the result affect him/her when it happens that way or not? Try drawing in each emotional state as a simple expression, or even drawing a whole set of different expressions, then scan, copy, print, cut them out, and stick them on.

The same sequence of moments as before, but with added emoticons, to help get a sense of what’s going on for Penny’s emotional state.

Roll camera

By now you should have a sense of the steps involved in your story. Flesh out your storyboard by translating each step – or moment – into a storyboard frame. Allow yourself room for the other familiar aspects of sequential art:

  • Storyteller commentary – the text that sometimes     appears at the top of frames to advance the narrative (“Meanwhile…”)
  • Speech and thought bubbles – position these under any commentary, and consider how your audiences will read them (e.g. western audiences read left-to-right, top-down)
  • Character(s) and scene –     show just enough to indicate what’s significant to your story

The same sequence as before, but roughly translated as frames in a storyboard. The emphasis at this point is just telling the story, starting with Penny’s goal and ending with the state that the situation has left Penny in.

Go back over your storyboard and think about how you can use the character’s pose, and the space in each frame to emphasise each moment, and how your character is feeling about it.

Second pass at the storyboard. Some of the text has been tightened up, and drawing technique is used to bring out more of the story, e.g. using the ‘weight’ of the search results to emphasise the volume of information, and the clock faces to show the passing of time.

End well

Make sure your storyboard leaves your audience with no doubt about the outcome of the story. Are you describing an unfavourable existing situation? End with the full weight of the problem. Are you selling a solution? End with the benefits of that solution to your character.

The same storyboard, but embellished with some extra weight of ink to increase contrast, and colour.

Storyboarding styles and techniques

You don’t need to be good at drawing

The good news is that you don’t need to be good at drawing before you start drawing scenario storyboards. Although experience in drawing helps, the main thing is to make the character, their goal, and what happens in their experience as clear as possible. How you render this is up to you and your skills and taste, but in the case of storyboards, less is definitely more. Like many UX artefacts, we need to know when enough detail and finessing is enough.

Storyboard fidelity

Think about your storyboarding style and technique as a point on a spectrum of fidelity, or level of abstraction. Scott McCloud explains that comics sit on a resemblance/meaning continuum, from full realistic to iconic images, with an increasing amount of abstraction. Low fidelity means schematic boxes, circles and stick figures, and high fidelity means photographic reality.

A visual example of the sort of resemblance/meaning spectrum that Scott McCloud describes. The example above obviously only represents part of this spectrum – there’s nothing approaching photographic reality – but this is the visual territory I regard for storyboards. Note: I haven’t included stick figures, because I just can’t bring myself to draw something like that, when a simple schematic figure (far left) does the trick.

There’s no harm in aiming for the more schematic end; it’s amazing what just stick figures and dialogue can communicate, as readers of xkcd and Cyanide & Happiness know all too well.
To help you aim for the right point on the scale, think about:

  • What suits your audience – is it just for yourself and your team, or for the client? Is the client conservative, or open to something more comical or whimsical?
  • What suits your story – the story you’re illustrating might command a certain visual character and tone that needs to be further along the scale than a schematic style
  • What suits your ability – consider your own level of ability, but aim higher; you’ll be     surprised at what you can achieve

Showing your storyboards to others

Storyboards deserve to be up for everyone to see. How you do this obviously depends on the project context and what your client can handle, but here are some ideas:

  • Project walls – Mark out an area on a wall in your workplace to stick up the sketches,     schematics and storyboards generated throughout your project. At Digital Eskimo, each project has a dedicated project wall,     which stimulates thinking and solution generation.
  • Presentations – Prepare the room in which you will conduct your client presentations by sticking up the storyboards, then walk your audience through each one. Be prepared to allow plenty of time to do this, including handling questions. You’ll know your storyboards are effective when they provoke plenty of discussion.
  • PowerPoint and Keynote decks – By their nature, storyboards can get quite long. They will probably be too long if you try to reduce their size to fit in a PowerPoint/Keynote slide, but you can slice them into several sections and include a key at the top of each slide.
  • Intranets and wikis – Try embedding your storyboards in intranet/wiki web pages. This is one time where horizontal scrolling is actually OK.

Go tell your story

The next article will focus on using storyboarding as an activity in research workshops, to gain insights from others about issues relevant to your project.

In the meantime, set yourself the challenge of trying scenario storyboarding to help you ‘think out’ a user experience solution for a given character and a given goal, and see what ideas it helps you form. Or set yourself the challenge of illustrating a given persona, their goals and their background as a storyboard, then use it as part of a client presentation.

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.

6 comments on this article

  1. Pingback: Johnny Holland Mag: Storyboarding & UX – part 2: creating your own: When thinking about storyboar… #UX #IA #IxD |

  2. val on

    thank you for both recent articles on storyboarding. inspiring.

  3. Anindita on

    Thanks for this series. I have not had the confidence to draw an actual storyboard to convince my clients and have stuck to good old messenger icons and emoticons to do the job. I was surprised as to how easily your step by step instruction actually led me to a storyboard that my mother glanced over my shoulder and interpreted, no hand holding required.

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

  5. Pingback: Strategy that sticks | AnneMarie Lock

  6. Ashish Chopra on

    Hi Johnny, Thanks for sharing such a descriptive article on story boarding… :) could you please share some useful resources on the web to checkout for sharpening skills in drawing poses, bubbles etc as you did above.