UX Prototyping
Story Mapping

Mick McQuaid



Story Mapping

Cover of Jeff Patton's 2014 book, User Story Mapping, depicting a bird

A basic story map

People stand in front of a story map, a series of steps with details underneath

Giving instructions doesn’t always go well

A cake decorated with the actual instructions to decorate the cake

Here are some instructions

  • Customer: Hello, I’d like to order a cake.
  • Employee: Sure, what would you like written on it?
  • Customer: Could you write “So long, Alicia” in purple?
  • Employee: Sure.
  • Customer: And put stars around it?
  • Employee: No problem. I’ve written this up, and will hand it to my cake decorator right away. We’ll have it for you in the morning.

And here is the result

A cake decorated with the instructions instead of the result of the instructions

We need some way to get on the same page

A cartoon depicts people with different ideas converging after blackboarding

A productive conversation with supporting artifacts

A conversation where people share an idea and have notes and pictures on the wall, supporting the conversation

A basic change-the-world model

Patton's diagram of current state and outcome state

A more refined change-the-world model

Patton's refined diagram of current state and outcome state

A yet more refined change-the-world model

Patton's more refined diagram of current state and outcome state

An early story map by the author and a collaborator

A person kneels on the floor behind an enormous number of post-its, arranged in rows and columns

Flow of the early story map

Same photo as before but annotated with story flow from left to right

One branch of the early story map

Same photo as before but annotated with one story branch

Annotated early story map

Same photo as before but fully annotated


Another story map

A story map depicting different users at different stages

Organizing details into three product release slices

Two designers organize detail post-its into three layers corresponding to three product releases

Story maps support a conversation that builds shared understanding

  • The map is a prop, not an outcome
  • Maximize outcomes, minimize output
  • Prioritize outcomes, not features


Difference between scenarios and storyboards

  • The scenario is the concept
  • The storyboard is the implementation
  • Both words are often used interchangeably

How to use scenarios

  • represent the story of the work
  • represent a successful process
  • inject the personas into their work
  • illustrate what you found from contextual inquiry

types of scenario frames


  • Readable like a comic strip
  • One step per frame
  • Rough user interfaces
  • Manual actions
  • Cartoons of people

Evaluate the scenario

  • include words where a stranger would not understand
  • show storyboard to someone: ask what it says
  • check for
    • confusion
    • inconsistencies
    • too much detail


  • avoid design choices
  • avoid cut and paste artwork
  • use hand drawn pictures
  • show a progression
  • tell a story

More advice

example: from Nielsen Norman group


let’s do a storyboard in Figma

divide up canvas like a comic book page

set a timeline

  • amount of time to decide what each panel will convey
    • 10 min to plan
  • amount of time to spend on each panel
    • 5 × 4 = 20 min on four panels ✓


  • start at beginning
  • then add the end
  • finally, fill in the middle

storyboard topic

  • use a project idea if you have one
  • else … use Luigi!
  • Mick wants to buy from Luigi
  • can be a case or strap


  • Mick is concerned about appearance of camera in case or with strap
  • Mick is concerned about size and placement of straps when carried
  • Mick is concerned about comparative prices
  • Mick is impressed by aura Luigi has among photogs

remember the blank panels?

after feedback, they tried again


Aaseng, Maury, Bob Berry, Jim Campbell, Dana Muise, and Joe Oesterle. 2020. Art of Comic Book Drawing, the. Mission Viejo, CA: Quarto Publishing Group.
Costola, Sergio. 2022. Commedia Dell’arte Scenarios. New York, NY: Routledge.
McCloud, Scott. 2006. Making Comics: Storytelling Secrets of Comics, Manga and Graphic Novels. Harper Paperbacks.
Patton, Jeff. 2014. User Story Mapping. Sebastopol, CA: O’Reilly Media.
Simon, Mark. 2007. Storyboards: Motion in Art. Burlington, MA: Focal Press.



This slideshow was produced using quarto

Fonts are League Gothic and Lato