Storyboards Basics

Introduction to Storyboarding

What is Storyboarding?

In UX design, a storyboard is a series of panels or frames that visually describe and explore a user’s experience with a product. Storyboarding is a tool for ideation that helps you outline an ideal flow for your design.

Think of storyboards as a tool to visualize potential solutions to problems the user is facing. They create a strong visual connection between the insights you uncovered during research and the flow of the experience.

Note

Visual Storytelling: Telling a story through visuals is often more effective than using words. Storyboards help you work through the flow of the experience and act as a visual aid to explain your ideas to stakeholders.

Key Elements of Storyboards

A real product might have many screens, but your storyboard should focus on just the most important parts of a user’s experience with the product. Every storyboard contains four key elements:

The Four Elements

Character

The user in your story - who they are and what they’re trying to accomplish

Scene

Helps us imagine the user’s environment and context where they’re located

Plot

Describes the benefit or solution of the design - what problem gets solved

Narrative

Describes the user’s need or problem and how the design will solve this problem

Storyboard Template Structure

The standard storyboard template includes three main components:

Template Components

• Scenario: A short sentence that helps us understand the user and their problem we’re solving
• Visuals: Guide us through the user’s experience with the app or service - this is where you’ll actually sketch
• Captions: Combine the visuals and scenario by describing how the user interacts with the product

Tip

Pro Tip: Captions are useful for interactions that may be difficult to sketch out visually. They help describe complex interactions or transitions that can’t be easily drawn.

From Problem Statement to Storyboard

Here’s how to transform a problem statement into a storyboard:

Example: Workout Class App

Problem Statement: Amal is an athlete who needs a way to sign up for workout classes because the class he wants to participate in fills up fast.

Goal Statement: Help users who are athletes sign up for workout classes early and quickly.

Six-Panel Storyboard Example

1. Panel 1: Amal is at the gym and frustrated because he can’t get a spot in today’s workout class
2. Panel 2: Amal is sitting on his couch and opens an app on his phone
3. Panel 3: Amal looks at a calendar and selects the date he wants to schedule a workout class
4. Panel 4: Amal selects a specific workout class from available options
5. Panel 5: Amal taps a confirmation button to confirm his class booking
6. Panel 6: Amal is smiling as he attends his successfully booked workout class

Benefits of Storyboarding

For Design Process

• Visualizes Solutions: Helps you work through the flow of the experience
• Stakeholder Communication: Acts as a visual aid to explain your ideas to stakeholders
• User Focus: Keeps the user’s needs and experience at the center of your design decisions

For Team Collaboration

• Shared Understanding: Creates a common vision of the user experience
• Problem Solving: Helps identify potential issues before moving to wireframes
• Iteration Tool: Easy to modify and explore different approaches

When to Use Storyboards

Storyboards are particularly useful when you need to:

• Transition from understanding user problems to exploring solutions
• Communicate design ideas to stakeholders who need to visualize the user experience
• Bridge the gap between research insights and design concepts
• Plan the user journey before creating detailed wireframes

Design Phase

Remember that storyboards represent the transition from the problem the user is facing to coming up with ideas for solutions you can provide as UX designers. They help you think through not just what the user will do, but why they need your solution and how it will benefit them.

Storyboards set the foundation for creating wireframes by helping you understand the complete user journey and the most critical screens or interactions your product will need to support.