Visual Storytelling in UX with Storyboards
Turn user stories into storyboards to make them more emotional, authentic, and clear.
By Nor Sanavongsay, UX Designer at Workday
Visual narrative, also referred to as visual storytelling, is telling a story through photography, illustration, or motion pictures. There are many uses of visual narratives, including storyboards. While storyboards have been used widely in the animation and film industry since the early 1900s, it’s only been around in UX since the 2010s. Storyboards in UX are used to plan for design and development of products and make user problems more relatable.
The Origin of Storyboards
In the 1920s, Georges Méliès, a French special effects pioneer, was one of the first to use storyboards and pre-production art to visualize the effects he planned to shoot before his shooting took place. The storyboarding process that is popular today was developed at Walt Disney Animation Studios in the 1930s for their animated films. Storyboarding became popular in live-action film production around the 1940s. Gone with the Wind was one of the first live-action films that was storyboarded from start to finish. Every shot of the film was laid out in storyboard format before a single scene was shot on film. Commonly known as “shooting boards,” a storyboard’s main purpose was to help visualize the sequence of events before shooting to minimize time on set.
At the Walt Disney Animation Studios, the illustrations started out as thumbnails in the margins of a script to help visualize gags. Then, individual panels were made to show each part of a scene pinned to a large bulletin board (that’s why it’s called storyboard), so that the entire scene could be studied at the same time. These panels allowed for easy manipulation of sequences, and for the artists to describe and act out the scenes to each other. In time, these tiny drawings helped transform the story and evolved into the storyboards we know today.
In today’s modern world, a storyboard is a sequence of illustrations or images that can be used for pre-visualizing a screenplay, live-action film, animation, motion graphics, or interactive media.
Benefits of Storyboarding in UX
Storyboarding is a tool in UX that allows product owners to visually explore a user’s problem or pain point, a proposed solution, and a benefit to the user. Product owners place ideas on storyboards and rearrange the stories to discuss possible solutions. The discussion around the story is more important than what’s written at this point. This format enables you to get feedback quickly from a participant (end user, decision maker, or stakeholder) and then iterate on the idea. A storyboarding exercise can help spark new and creative ideas.
Illustrate User Motivations
User Stories are a simple way to describe how your product helps someone achieve their needs. They are sometimes called a “problem statement” and typically follow this format:
As a <who>, I want <what> so that I can <why>.
This results in having a purpose (or user motivation) for the story, where we can then illustrate from. Use this purpose to frame the main story you’ll be making storyboards from. Just having the who, what, and why figured out is enough to start your story. However, in a more complete story, we find out if the person using our product had difficulties, how they overcame the problems with our product, and whether or not they ended up in a better place than before they used our product.
Communicate Effectively
Stories are the most effective way to communicate ideas among humans. It’s ingrained in our psyche and we’re wired for stories. Visual stories such as storyboards put the human aspect up front. It materializes all the data and research findings into a more relatable format. Storyboarding is a great way to get people from all backgrounds in development, product management, and design to communicate and visualize the same idea using storytelling methods.
Test Different Scenarios Quickly
Sketching out ideas in a storyboard format allows for the testing of multiple story concepts at the same time at little to no cost of development. Designers can test out different scenarios quickly and move on to other solutions. Encourage candid feedback by showing a concept in lower fidelity.
Pitch Story Ideas
Product owners can pitch their ideas in a team-based activity, much like the Disney way of pitching a story, through panels of sketches pinned to a board. This can inspire new ideas from other team members during the critiquing session. This will result in better collaboration and gathering a clearer picture of what needs to be designed. Teams can also see quickly what the users may encounter in certain situations.
A storyboard is an incredibly valuable tool during the ideation process. We can use it to shape the user’s journey, and string user stories together with other various research findings. It’s best used for participatory design where all the product owners (stakeholders, UX Design + Research, developers) solicit feedback early and iterate before designing or building in high fidelity.
Making Storyboards from User Stories
Story Structure
The story structure for storyboards in UX should be simple. A good story structure contains a clear beginning, middle, and ending. Focus on one goal for the main character throughout the entire narrative of the story. Your audience should have a clear understanding of the outcome of the story in three stages:
- Introduce characters and situation
- Show problem and how it’s resolved
- End with a clear outcome.
In the following example from Workday, we took those three stages and structured a narrative around someone named Gavin who wants to give feedback to a colleague on Workday from another platform. We expanded on those three stages to make the story more emotional, authentic, and clear. How can our users give feedback anywhere they’re connected to Workday? Let’s outline it:
- Gavin is listening to Jordan’s presentation that they worked on together. (Introduce characters and situation)
- Gavin gives Jordan feedback in Google Hangouts. (How problem was resolved)
- Jordan is happy to receive feedback from her protegé and feels delighted to be connected to his workplace anywhere she goes. (Clear outcome)
We then take this outline and draw out the panels. We can either condense or expand the narrative as needed for the story to be complete. We added an extra frame to show more detail on how Gavin is submitting his feedback in Google Hangouts.
Three Main Elements of a Storyboard
1) Story
What is the story and the character who will play the main role? The main character could be the persona that corresponds to that scenario. Use the three stages as a guide for your outline to introduce characters and situation, the problem and how it’s resolved, and have a clear outcome.
2) Visuals
Each panel is presented with its own visual to enhance the caption and show one main idea at a time. These could be sketches, illustrations, or photos. The audience or purpose of the storyboard determines its fidelity. The images may include the environment the character’s in, a sketch of the UI being used, or word balloons, if necessary.
3) Captions
Below each individual frame is the caption that tells the story. The visual should do the heavy lifting of telling the story, but the caption is there to enhance what’s going on in the panels. Captions should be straight to the point. Don’t repeat what’s going on in the visuals; instead explain what is happening. For example, instead of “she picks up her phone,” say “she calls a cab.” The picture already shows that she’s using her phone.
Tips on Making Your Own Storyboards
Different Drawing Styles
Storyboards come in many varying styles depending on how skillful the artist is. AirBnb hired a Pixar artist to storyboard their user journey recently, and the panels were beautifully made. But a storyboard doesn’t have to be Pixar-level impressive. You can easily tell a story with stick figures, too. It doesn’t matter how well-drawn the images are on the panels; what matters is that the story is clear.
Visual Storytelling Techniques
In my blog post, How to Use Children’s Book Storytelling Techniques in Presentations, I touch on how to use visual storytelling. But to summarize: keep the visuals simple, complement the written text and don’t repeat it, only put things on the scene that help the story, and show one main idea per scene. Allow the audience to experience the story through actions and feelings rather than telling them what’s happening in the scene.
Final Thoughts
We’ve gone through the history of storyboards and showed some examples so that you can integrate storyboards into your planning stages. Now it’s your turn to make user stories more human-centric, easy to understand, and easy to follow. There’s no right or wrong way to use storyboards in UX as it’s a relatively new concept. Check out my upcoming post to learn how Workday Design built an internal Storyboard Kit to help us make storyboards more quickly.
