Storyboard

Design deliverable

Storyboards to lay out the key steps of usage scenarios

The storyboard, much like in film or animation, is a tool that UX designers use to help map the user experience of a product or service. It gives designers an overview and surfaces potential problems or areas for improvement. The storyboard can also be used to communicate the design to stakeholders and gather their feedback. Creating a storyboard is a crucial step in the UX design process, because it lets designers think through the user experience from start to finish and surface any potential issue. It also helps designers communicate their ideas to stakeholders and get feedback on the design. If you're working on a UX project, creating a storyboard is an essential piece of the UX design process.

What is a storyboard for?

  • Mapping the user experience of a product or service,
  • Having an overview
  • Surfacing potential problems or areas for improvement
  • Communicating the design to stakeholders and gathering their feedback
  • Letting you think through the user experience from start to finish and surface every friction point
  • Sequencing steps at the key moments of the experience

Why build a storyboard?

  • Assessing usage scenarios with the team or the target users of a project
  • Exploring solutions to friction points in the user journeys
  • Specifying the order of steps in an interaction journey
  • Communicating solutions to project contributors.

How to build a storyboard

01

The scenario

To start, you need to define the main scenario of the storyboard. That lets you focus on the narrative and the ideas you want to illustrate. Thinking about the text before starting to draw nudges you to focus on the important concepts rather than the visual rendering.

02

Journey steps and interactions

Next, you bring in the interactions and how they're sequenced, while accounting for how the user feels. The storyboard highlights the situation the user is in, what they feel at each step, the problem they face, and the response the product or service provides.

03

The frames (or the speech bubbles for comic-book fans)

It's only after this preparation that each step turns into an illustrated frame. You can leave a comment below each frame to give more context, or show the character's thinking with speech bubbles. From there, it's about moving on to the more "design" side by adding details, colours, textures and so on, to make the storyboard as immersive as possible.

Frequently asked questions

A few of our case studies

Co-design workshop

A co-design workshop draws on collective intelligence. These sessions help surface solutions with the project team and/or the end users.

Read more about Co-design workshop

Site map

A site map of a website or app reflects the hierarchical, logical way its pages and features are organised. Proposing a sound site map means choosing a categorisation that fits the mental model users already have.

Read more about Site map

User flow

The user flow is a visual representation that models the paths a user can take when going through a site or an app.

Read more about User flow

Curious to learn more about us?

Everyone talks about user experience, service design, ergonomics...
It's not always clear, and you'd like to find out, or sharpen what you already know.

Let's talk