3 Simple Steps for Your User Experience (UX) Storyboards

Pictures are worth a thousand words. Using sequential illustrations with dialogue copy or narrative, storyboards are a great way to demonstrate the user experience through a few key images without needing to be text heavy.

This post will share 3 simple steps to create your own user experience (UX) storyboards as part of a UX research project.

storyboards1

Here are the three steps to UX storyboarding:

  • Setting the scene – the context 
  • Drawing the scenes
  • Layout

1.   Setting the scene

Firstly you have to take the users’ stories and turn them into a succinct idea that can be conveyed via a comic strip approach.  Pulling out the important and interesting points that help inform the reader.

stories

The raw diary entry written by the participant. The key points are highlighted and the key concept(s) being shown is decided upon.

scene

This is a breakdown of the user story into title, thoughts and emotion per scene.

 

2.   Drawing

The easiest and most common drawing tool is pen and paper. This simple approach allows you to sketch the initial idea for each scene, which can then be drawn up on computer with other design programs such as Comic Life, Adobe Illustrator and Photoshop.

handsketches

 

Comic Life allow users to use preset layouts, thought bubbles and speeches. It inserts your drawing assets into a comic strip, making the whole comic strip process quick and easy.

comic

 

Adobe Illustrator is a vector base programmes which gives you the freedom to change the comic strip as freely as you want.

illustrator

You don’t have to be a brilliant artist to draw a comic strip. You can draw stick men instead of realistic people, or an animated face and can equally get the same results.

stressed person overlay

stressed person

A realistic stressed person with the equivalent stick man approach

Here is an example of assets I collected of people using the tablet and laptop from google images, which I can then trace over as simple outlines and collage together at a later date.

assets

Having props drawn out, allows them to be used again and again in different scenes without needing to draw them from scratch. Below is a pre-made drawing of a mobile phone and hands. On the right, is the same mobile phone and hands but adapted for the storyboard.

assetsmobile    samemobilephone

 

Consider the use of line weights, emphasise the main items in the story with a thicker line and brush strokes. Left shows a scene using a variety of line weights. Thicker lines showing the big speech bubble and the iPad. The left, shows the same scene but in one line weight, which makes the drawing very flat.

lineweights

Adding speech bubbles and thought bubbles gives narrative.

3.   Sequential Layout

Readers naturally read from left-to-right and top-to-bottom.

lefttorightgrid

Gutters in between the boxes also help guide the reader.

layoutgrids

Examples of other potential layouts and their readability

 

If you try to be fancy with sizing of the boxes you can confuse the user.

confusedlayout

With these 3 steps, you should have the starting point for a great storyboard. But remember, you need to be clear about what you are trying to convey before you start the process to avoid wasting time creating assets that you don’t need. Happy drawing everyone!

Share:

Get help with shaping your customer experience.

From basic questions to complex queries about your approach to strategy, research or design, we're here to help.

Service design & UX insights direct to your inbox
Got a project in mind?
Get in touch