Scenario Comics

Convey your users’ stories as they encounter everyday problems and use your product or site to overcome them.

Tell your users’ stories

There’s more to the experience than an interface. Scenarios can help you explore and understand your users’ environments, emotions, and motivations as they face the problems you are working to help them solve.

Scenario Comics help you convey those stories visually so that stakeholders, clients, and team members get a glimpse into the user’s life and empathize with them more easily.

Start with the persona

1 2 3 4 Animation: Eight different characters cycle through showcasing various emotions, outfits, hair styles, and skin colors: An asian woman with long black hair smiles broadly, a pale man with a faux hawk wears VR goggles and looks nauseous, a black woman with braids and glasses has a big smile as she closes her eyes in glee, an older gentleman with a bald head and beard looks very angry, a redheaded woman with medium length hair looks sad, a tanned man with messy hair and glasses looks shocked, a light brown woman with big curly hair and a headband looks slightly worried, and a Middle Eastern man wearing a turban and a long beard is blushing and winking.
  1. Tons of hair styles

    Choose from long, medium, or short hair styles — even various coverings — to give each persona a distinct look.

  2. Diverse

    Select from a wide range of skin and hair colors to accurately portray just the right persona.

  1. Emotional

    Mix and match distinct facial elements for a nearly infinite range of emotions.

  2. Fashionable

    Dress your personas up or down with a generous wardrobe of inner and outerwear in a rainbow of colors.

Set the scene

A person with a pink mohawk wearing a grey hoodie is standing in front of a plain light purple background with an angled block of light at the top.

Our hero of the pink mohawk and grey hoodie has gone outside to stand in front of a city skyline.

Getting hungry, our pink-mohawked chef-to-be is excited to explore the culinary arts in a kitchen.

In a surprise twist, our magenta-mohawked hero explores the hangar of a SpaceX space shuttle (from a copyright-free stock photo on Pexels).

Add some touchpoints

A brown hand holding a phone. The phone's screen reads 'Add your own mockups'.

Add your own mockups to devices to explore how personas interact with your product.

A white arm is held up showing a watch with a blue band. The watch screen says 'Change skin colors'.

Change skin and clothing colors (including watch bands) to match your personas.

A dark brown left hand holds the edge of a tablet in landscape orientation. The screen reads 'Add gestures' while a right hand points at the screen with one finger.

Choose from different gestures to illustrate how personas interact with your product.

An aluminum laptop shows a screenshot of the UX Compendium site.

Show how your site, app, or product might look on a laptop or desktop computer.

A black Amazon Echo has the blue activity ring lit up as if listening or talking.
Voice Assistants

Depict talking with voice assistants of various flavors to explore conversational design.

A black TV monitor shows a screenshot of the UX Compendium site.

Even capture how your personas might interact with a television interface.

And voilà

Panel 1: A dark-skinned woman thinks to herself 'Dang, we're out of paper towels.'
Panel 2: She says aloud, 'Hey Siri, remind me to get some paper towels when I'm at the store later.'
Panel 3: A HomePod responds, 'Okay, I'll remind you next time you go to the store.'
Panel 4: In the store while looking at her shopping cart, a Ding sounds.
Panel 5: Holding her watch up, she sees a reminder to get some paper towels.
Panel 6: The woman, still in the store, smiles and says, 'Phew! I almost forgot. Thanks Siri!

Like what you see?

There’s more where that came from. Lots more! The UX Compendium is a cohesive collection of useful templates and libraries for Sketch to round out your design process beyond the UI.

Buy it now Learn more

Explore the rest