UX Storyboarding

For many (myself included, before embarking on this course), the word “Storyboard” leads us to think of tools that are used in Film & Animation, panels that look like comics, perhaps to illustrate or visualise a scene in a fictional story. In this post I would like to consolidate my learning introduction to storyboarding as a UX tool, used for a number of purposes in the software development process, and User-centric design. In the following 10 weeks or so, I will eventually be creating my own storyboard and project plan for a project pitch of an interactive Web App following a client brief.

Uses of UX Storyboard

There are several uses of  storyboards in real-world User centric design. Firstly, it can be used as a technique to record or document User testing. Drawings and visuals can be used to chronologically illustrate the User navigating through a system / program, noting any pain points and body language. What the User says can be quoted as accompanying captions. 

Secondly, storyboards can be a way of augmenting Journey Maps. In the first term of this course, we learnt about User stories and journey maps- A journey map is a visualisation of the process a User takes to complete a task, in the five phases of Consider, Explore, Compare, Test and Negotiate. “Coupling a journey map with a storyboard can provide insight to your story” (ref: https://www.nngroup.com/articles/storyboards-visualize-ideas/) and help the researcher further empathise with the User. In comparison to a journey map alone, the storyboard is more informal and perhaps a faster and more generic way of capturing the User journey.

When working in a team, storyboarding can be a way of communication between team members, prioritising and finding common ground. The use of storyboard images is an effective way of recording important discussion points and prioritising pain points in a product. Extracting one part of the User journey in a storyboard, is an efficient means of focusing on one problem at a time, for a team of designers to fix. 

The last identifiable use of storyboards in UX is Ideation- which will primarily be how I will be using my storyboard in this project pitch. I will be using storyboards as a way of projecting the potential experience of my web app, or how I would like people to use my web app, giving me insight into the User’s needs, every step of the way. This is using storyboards to visualise a future scenario. Storyboards can also be used in the ideation phase, in analysing competitors by storyboarding user experience of existing, similar-function apps (current scenario).

Common Elements in a UX Storyboard

The core ingredients in most UX storyboards are:

1. A scenario (ie. User Task).
2. Persona
3. Visuals
4. Captions

Types of UX Storyboards

The three types of UX Storyboarding are:

1. Text-based Storyboard

This is a great way of starting a storyboard as jotting down text with pen and paper is immediate and quick. I find that this will be good start for me to draft out a storyboard that can be polished further for the pitch.

2. Image-based Storyboard

There are many examples of beautifully illustrated storyboards. Most striking are the ones used in animation. A UX storyboard does not need to be fully, artistically illustrated but should one be inclined to, pictures go a long way in narrating a story and its nuances.

3. Image & Text Storyboard

This is perhaps the best, most common happy-medium storyboards used in UX combining images and accompanying text captions.

UI Storyboards

Lastly, storyboards can be used to narrate the process of navigating through an app from a User Interface (UI) interface perspective. This is a useful way to sketch out, design and functions of an app for prototyping. UI Storyboards often look like one of the following two: