Storyboards

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,

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.

There are always 3 common storyboard elements, regardless of form: a specific scenario, visuals, and corresponding captions.

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.

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.

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 can be used in many different ways throughout the UX process:

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.

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.

How storyboards fit within the UX design process, and the steps needed to make a successful storyboard to visualize a workflow, customer journey, or user story.

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:

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.

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.

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.)

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.

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.

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.

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:

Storyboards Help Visualize UX Ideas

Storyboard Template (PDF)