← Go Back

Storyboard

What is a storyboard?

A storyboard is a sequence of images or frames that show key moments in a user’s experience, like a comic strip. Each frame shows a step in the scenario: who, where, what they do, and often what they think or feel. Storyboards make a user journey or scenario concrete and easy to share.

Use it when: you need to communicate a scenario or user journey to stakeholders or the team in a quick, visual way. Good for design sprints, design thinking (e.g. Define or Ideate), and aligning on context before wireframes or prototypes.

Copy/paste checklist (one storyboard)

  • [ ] Scenario – One clear situation (e.g. “First-time user completes sign-up and creates first project”).
  • [ ] 4–8 frames – Key moments only; not every click. Each frame = one moment in time.
  • [ ] Who, where, what – User (or persona), context (place, device), and action in each frame.
  • [ ] Emotion or thought – Optional: caption or thought bubble so the story shows motivation or pain.
  • [ ] Outcome – Last frame shows success (or failure) so the story has a clear end.
  • Simple visuals – Stick figures and boxes are fine; clarity over polish.

Why storyboards matter

  • Make scenarios and user journeys easy to grasp without reading long docs.
  • Build empathy by showing context and emotion, not only steps.
  • Align the team and stakeholders on “what we’re designing for” before detail.
  • Support design sprints and design thinking as a shared reference.

What a good storyboard includes

Checklist

  • [ ] One scenario – One user, one goal, one path. Don’t mix multiple stories in one board.
  • [ ] Clear sequence – Frames read left-to-right (or top-to-bottom); order is obvious.
  • [ ] Context – Where and when (e.g. “At home, Sunday evening”); device or channel if it matters.
  • [ ] Emotion or tension – At least one frame that shows what the user feels or what’s at stake.
  • [ ] Actionable – The team can use it to agree the scenario before wireframing or prototyping.
  • [ ] Quick to create – Sketches are fine; avoid over-polishing.

Common formats

  • Linear: 4–8 frames in a row. Use for one path (e.g. happy path or one persona).
  • With branches: Optional second row or callout for “what if” (e.g. error, alternative). Use when the alternative path matters.
  • Comic style: Panels with character, speech/thought, and action. Use when you want to emphasise emotion and dialogue.

Examples

Example (the realistic one)

Scenario: “New user signs up and creates first project.” Frames: (1) At laptop, sees landing page; thought: “I need to get this done by Friday.” (2) Clicks “Start free trial”; sign-up form. (3) Submits; loading. (4) Sees empty dashboard; hint: “Create your first project.” (5) Creates project “Website redesign”; smile. (6) Sees project in list; thought: “Now I can add tasks.” Use: You use this in a design sprint to agree the scenario before sketching solutions, or in design thinking to communicate the Define output. Then you wireframe or prototype the key screens.

Common pitfalls

  • Too many frames: 20 panels; nobody reads it. → Do this instead: 4–8 key moments; skip the rest or put them in a user journey doc.
  • No context or emotion: Only UI screens. → Do this instead: Show who, where, and at least one moment of feeling or tension.
  • Perfect artwork: Time spent on drawing instead of the story. → Do this instead: Stick figures and boxes; focus on sequence and meaning.
  • Never used: Storyboard sits in a deck. → Do this instead: Use it in a kick-off, design sprint, or review so it drives wireframes or prototypes.
  • Mixed scenarios: Two users or two goals in one board. → Do this instead: One scenario per storyboard; do a second board for another path or persona.
  • Storyboard vs user journey: A user journey is often a row or grid (stages, touchpoints, emotions); a storyboard is a visual sequence of frames. Both tell the user’s story; storyboard is more “comic strip,” journey map more “table.”
  • Storyboard vs user flow: User flow is the path through the product (screens, steps); a storyboard adds context and emotion and can include off-screen moments.
  • Storyboard vs prototype: Prototype is interactive; a storyboard is static. Use storyboard to agree the scenario; use prototype to test the flow.
  • User journey – storyboard is one way to visualise it.
  • Design sprint – storyboards can set the scenario before sketching.
  • Design thinking – storyboard can communicate Define or Test scenarios.
  • Persona – the “who” in the storyboard.
  • User flow – the product path the storyboard may illustrate.
  • Empathy map – emotion in the storyboard can come from empathy work.
  • Wireframe and prototype – next step after agreeing the story.

Next step

Pick one scenario (e.g. “First-time user reaches first value”). Draw 4–6 frames: who, where, what happens, and one moment of emotion or tension. Share it in a kick-off or design sprint and use it to align on the scenario before wireframing or prototyping. Read User journey to connect storyboards to journey mapping.

Related Terms