Info & Interaction Design, Scenarios

Mick McQuaid


Week SIX


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

  1. amount of time to decide what each panel will convey
  2. amount of time to spend on each panel

10 min to plan

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

Up next, Framer and Penpot tutorials


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.
Simon, Mark. 2007. Storyboards: Motion in Art. Burlington, MA: Focal Press.



This slideshow was produced using quarto

Fonts are League Gothic and Lato