2learn

Storyboarding

What it is

A storyboard sketches a user’s sequence of steps as a short comic: a row of panels, each with a caption saying what the person is doing and thinking. It is drawn before the interface exists, and its subject is the person, not the screen.

Why it matters

A flow diagram shows boxes and arrows; nobody can tell from it whether the third step is reasonable, or where the person is standing, or what happens when the phone rings. A storyboard makes the sequence concrete enough for a group to disagree with — the cheapest moment to discover that the step everyone agreed on does not fit the situation. It is also the fastest way to show a non-designer, an executive or a client what a change actually means for someone’s day.

Core ideas

Draw the person, not the screen

Keep the human in every panel. The interface can be a rectangle in their hand; the interesting content is where they are, what they are holding and what interrupts them.

Panel 1  Picker at the end of an aisle, terminal two aisles away.
Panel 2  Checks the clipboard. Hands full of two boxes.
Panel 3  Phone in pocket, gloves on — cannot type.
Panel 4  Walks back to the terminal again. 40 seconds gone.

The problem is visible in panel 3 without a word of explanation.

One panel per step, in the user’s order

Panels follow the person’s timeline, not the system’s. If the person repeats a step, draw it twice — the repetition is the finding.

Caption what changes, not what is drawn

Each caption states the user’s goal or the obstacle at that moment. Avoid narrating the drawing (“a man stands in a warehouse”).

Six to eight panels is the useful length

Fewer and the sequence is vague; more and the group stops reading. Split into two storyboards rather than extending one.

Draw it with the group

Storyboarding works best as an activity, not a deliverable: give everyone a pen and four panels, then compare. Disagreements about the picture are disagreements about the flow, and that is exactly the argument worth having early.

Practice

Storyboard one broken routine

Choose a task you have watched someone perform. Draw six panels of what actually happens, captions in the user’s words, including the interruption or workaround that shows the problem.

Done when: someone who has never seen the product can point at the panel where the task goes wrong.

Storyboard a proposed change

Draw the same six panels again with your change in place. Keep the person and the surroundings identical so the only difference is the design decision.

Done when: the before and after boards differ in exactly the steps you intended to change and nowhere else.

Common mistakes

  • Storyboarding the interface instead of the person — the board becomes a low-fidelity screen flow and the context disappears; fix: draw where they are standing and what they are holding.
  • Labels instead of captions — “Screen 2” says nothing about the user’s goal; fix: write what the person is trying to do or what stopped them.
  • Twenty panels — the group stops reading and the detail hides the problem; fix: cut to six or eight, split if you need more.
  • Polished drawing — effort in the artwork discourages revision; fix: keep it to stick figures and rectangles, drawn in one sitting.
  • Drawing it alone and presenting it — the group treats it as a finished decision and argues about the drawing; fix: hand out pens and draw it together.

Go deeper

Worked examples

Analytics cookies are set only if you allow them. Nothing is loaded, and nothing is sent, until you choose.