Storytelling plays a large role in our job as UX professionals. A story captures attention, provides clarity, and inspires teams and stakeholders to take action. There are many ways to visually communicate stories to our teams and stakeholders — UX stories, storyboards, journey maps, and empathy maps being a few examples. In this article we focus on storyboards.
What Is a Storyboard?
You may already be familiar with the concept of storyboards from film, animation, or comic books. While the level of fidelity differs across industries, storyboards always communicate a story through images.
Definition: A storyboard communicates a story through images displayed in a sequence of panels that chronologically maps the story’s main events.
In the world of UX, we use storyboards to provide additional context to our teams and stakeholders. Using images makes the story quick to understand at first glance and easy to remember.
Components of a Storyboard
There are always 3 common storyboard elements, regardless of form: a specific scenario, visuals, and corresponding captions.
1. Scenario
Storyboards are based on a scenario or a user story. The persona or role that corresponds to that scenario is clearly specified at the top of the storyboard. A short text description of the scenario is also included. The description of the scenario or story is clear enough that a team member or stakeholder could understand what is depicted before looking at the visuals. For example: Corporate buyer, James, needs to replenish office supplies.
2. Visuals
Each step in the scenario is represented visually in a sequence. The steps can be sketches, illustrations, or photos. Depending on the purpose of the storyboard and on its audience, these images can be quick, low-fidelity drawings or elaborate, high-fidelity artifacts. Images include details relevant to the story, such as what the user’s environment looks like, speech bubbles with quotes from the user, or a sketch of the screen that the user is interacting with.
3. Captions
Each visual has a corresponding caption. The caption describes the user’s actions, environment, emotional state, device, and so on. Because the image is the primary content in a storyboard, captions are concise and don’t typically exceed two bullet points.
Storyboards vs. Journey Maps
A journey map is a visualization of the process that a customer goes through to achieve a goal. It is fairly complex, and often contains extensive textual information about the different steps of the journey — including not only the user’s actions, thoughts, and emotions, but also insights that can be drawn from different stages of the process. It often presents an overview picture of the experience and serves as an instrument for identifying specific pain points or to foster collaboration and responsibility across different departments in an organization.
In contrast, storyboards are often (but not always) informal and illustrate a sequence of steps graphically, in an easy-to-understand manner. Their primary focus is imagery, with less emphasis on the accompanying text. While the captions are important to the artifact, they don’t give the reader as much context as a journey map.
Storyboards are often used to describe a fragment of the user journey (and several of them may be needed to capture the different branches in the journey). They are an efficient way to establish context and common ground for all the team members working on a specific problem. In contrast to journey maps, which are often a big-picture, broad-use organizational tool used across departments, storyboards are usually (but not always) a detail-oriented, narrow-use tool intended mainly for members of the same team.
Why Use Storyboards?
Storyboards can be used in many different ways throughout the UX process:
Research & Usability Testing
If your team or stakeholders are not involved in usability testing, a storyboard can convey how your participants interacted with the application or site. Summing up a usability test in text only can still be helpful, but visuals can make your story easy to skim and memorable.
Storyboards created from usability tests can include actual quotes from your user, along with images or notes of any telling body language that was exhibited.
Augmenting Journey Maps
Storyboards can enrich journey maps by adding an image of the user‘s context in various stages of interacting with a product. Visualizing a user’s device, office space, and group setting helps your team and stakeholders empathize with your user’s situation.
Prioritization & Common Ground
Visualizing how users will interact with your application can make it easy to understand and remember which features are necessary for your user to complete the scenario and, thus, important to focus on. This knowledge will be shared by the whole team and will ultimately lead to productive conversations about the priority of your efforts.
For example, a team improving a login flow (buttons, autofill, and/or a progression bar) can use the storyboard as a summary and reminder of the existing roadblocks in the process. If the images in the storyboard show that the user was frustrated when clicking the login button, but had no issues entering information manually, the team should prioritize the progression bar over the autofill feature. (Of course, the storyboard is helpful for making these kinds of decisions only under the assumption that it truly reflects users’ behaviors and that the creator did not pick and choose which of these behaviors to include in the graphical representation.)
Discussing the storyboard images as a team will help decide which improvement to focus on, based on a shared understanding of the users and their context. This shared representation of knowledge can be referred to consistently throughout the project. Using the login-flow example, the team now knows that users prefer clear system feedback when they interact with a button and can refer back to this example for the design of future features.
Ideation
Storyboards can be a form of ideation. You can sketch out an idea of how a user may use a feature if it helps to visualize a potential experience or you want to have a better understanding of the user’s environment before starting development. Ideation storyboards should be used as a means of conversation rather than a lasting artifact or prioritization tool, as your scenario will most likely change once you are using real data.
Process: How to Create a Storyboard
Creating a storyboard can feel like a daunting task. However, remember they are most valuable as a low-fidelity artifact and don’t need to take a long time to create.
Effective storyboarding follows 6 key high-level steps:
1. Gather your data
First, determine which data will be used in your storyboard — user interviews, usability tests, or site metrics.
It is possible to do a storyboard without real data if you haven’t collected data yet or you want to use storyboards as a form of ideation.
2. Choose your fidelity level
Keep in mind the goal and the audience of your artifact.
Use sketches to quickly draw a sequence or communicate a scene to your team during a brainstorming meeting. In such ideation meetings, you can even create storyboards collaboratively with sticky notes, to get each team member’s perspective. Start by having a discussion of the timeline and steps the user will take. As you discuss, draw each step on a sticky note and place on a whiteboard or a wall. You can designate one person to draw or multiple people can draw, as long as the discussion is happening as a group. Focus on a single step at a time to keep the discussion global and avoid splitting the group into multiple subgroups with different conversations that must be then consolidated. Having multiple team members present during this process will bring up ideas that a single role won’t necessarily think about. For example, a marketing or business-focused team member may contribute a step (like a trigger for a marketing email or coupon, for example) that the rest of the team didn’t have on the radar. This method also gives you the flexibility to change the sequence of events by rearranging sticky notes (especially if you’re still adjusting the story timeline) without having to redraw the entire storyboard. The goal is to form a shared understanding, rather than a polished, refined artifact.
If you’ve recorded a usability test and are creating a storyboard to distill the information down, use photos or video stills. These types of visuals maximize your time (no sketches needed), while adding authenticity to your storyboard.
Use detailed illustrations created with a program such as Adobe, Sketch, or Powerpoint to present storyboards to clients or as a design deliverable.
Remember: a storyboard is meant to tell a story. Don’t spend too much time finessing the visuals unless you have to.
3. Define the basics
Define the persona and the scenario or user story represented. The scenario should be specific and should correspond to a single user path, so that your storyboard doesn’t split into multiple directions. For complex, multipath scenarios, maintain a 1-to-1 rule — one storyboard per one path that the user takes. You’ll end up with several storyboards, each outlining a different user path. (It’s not a flowchart, it’s a storyline.)
4. Plan out steps
Start by writing out the steps and connecting them with arrows before going straight to the storyboard template. Next, add the emotional state as an icon to each step, as seen below. This technique will help you start to visualize what each visual frame will include.
5. Create visuals and add captions
While you can use advanced illustration skills to create a beautiful comic-book-quality storyboard, they are not a prerequisite for effective storyboards. It’s okay to use stick figures or basic sketches of what you’re trying to convey.
Add captions as bullet points underneath the visuals to describe additional context that is not understood at first glance.
Your storyboard should be in an easy-to-modify format, so that you can make changes in further iterations if necessary. (That is another advantage of low-fidelity sketches or sticky notes.)
While you’re not aiming at publication-quality comic-book art, there are so many similarities between storyboards and comic strips that you can get many ideas for visual storytelling and the visualization of emotions, situations, and actions from Scott McCloud’s classic book Understanding Comics.
6. Distribute & iterate
Distribute your storyboard to your audience, whether it’s your internal team or the stakeholders of the project and ask for feedback. If necessary, iterate over some of these steps to improve the artifact.
Conclusion
As their name suggests, storyboards help us tell stories about our users. When based on real data and combined with other UX activities, they can:
- Take the focus off our internal bias and help us empathize with our users
- Help clients and stakeholders remember specific user scenarios
- Help us understand what drives user behavior
Learn and practice storyboarding in our full-day course Storytelling Throughout the UX Process.
Share this article: