IA & wireframing

Storyboards

Colton Schweitzer
October 14, 2020
“At our studio, we don’t write our stories, we draw them.” –Walt Disney

What makes some leaders so memorable and others not so much? What’s the difference between an excellent public speaker and a bad one? 

While it can be attributed to a multitude of factors, all great leaders and public speakers have one thing in common. They are fantastic storytellers. 

Stories reach audience’s hearts and minds. Great stories are powerful and memorable. In fact, a story is 22 times more memorable than a straight fact. This is where a storyboard comes in handy.

So what is a storyboard?

Storyboards are basic sketches or images in a specific sequence that tell a story, usually in a fairly informal manner. 

They were originally used in film, animation, and comics. They helped filmmakers visualize concepts before filming. 

Their primary focus is imagery with supportive text to convey ideas. Storyboards are used in UX as a tool to help you and your team build empathy for the user and visualize a user’s experience with your product. 

A scenario is a part of a storyboard. It’s the setup. A scenario introduces the persona, the context, goal(s), and the problem(s). 

A storyboard builds on the scenario by taking the story from the beginning, where the problem is introduced, to the end, showing how the problem gets solved. It’s not about showing the UI of the product. It’s about showing the high-level relationship between the persona and the product and their emotions throughout the process. Storyboards are effective because visual representations quickly capture the audience’s attention and make it easier to understand complex ideas.

As a UX designer, storyboards help you get a sense of what the user is going through so that you can design more objectively and provide solutions that are tailored and meaningful. 

Depending on the project, the quality of the storyboard can vary greatly. The main idea is to get the concept of the story across.

Here are some of the common uses of storyboards:

To better understand how people will use your product.

To empathize with what the user is going through.

And to gain feedback on an idea during a user interview. 

There are four elements to a UX storyboard: 

1. The scenario.

2. The location where it takes place.

3. The drawings or pictures. These are the sketches of the story in the right order. 

4. Supporting text. 

Some people are very talented artists and can draw beautiful storyboards. If like us, you still draw like a 5-years old, that’s okay. Storyboards aren’t a beauty contest. They’re a tool to get closer to and empathize with users. What matters is the story itself. The drawings are just the way to visualize it.

Back to vault

206

Back to vault

206

What is UX?

2
Getting started

Why is UX important?

3
Getting started

What is the UX process?

4
Getting started

What is design thinking?

5
Getting started

What do UX designers do?

6
Getting started

UX vs UI

7
Getting started

Do UX designers need to know how to code?

8
Getting started

Recommended UX books

9
Getting started

UX university programs: Pros & cons

12
Getting started

UX bootcamps: Pros & cons

13
Getting started

6 brutal truths aspiring UX designers don't want to hear

14
Getting started

Difference Between Graphic Designer vs UX Designer vs UI Designer

15
Getting started

Intro to research & understanding

101
Research & understanding

Finding a problem to solve

102
Research & understanding

SWOT analysis

103
Research & understanding

Competitive analysis

104
Research & understanding

Heuristic evaluation (usability evaluation)

105
Research & understanding

Task analysis

106
Research & understanding

Stakeholder interview

107
Research & understanding

Framing the problem

108
Research & understanding

Research plan

109
Research & understanding

Survey

110
Research & understanding

User interview

111
Research & understanding

Card sorting

112
Research & understanding

Customer journey map

113
Research & understanding

Empathy map

114
Research & understanding

Affinity diagram

115
Research & understanding

Personas

116
Research & understanding

Contextual inquiry

117
Research & understanding

Diary study

120
Research & understanding

Eye tracking

121
Research & understanding

Intro to IA

201
IA & wireframing

Layout + CRAP

203
IA & wireframing

Site map

204
IA & wireframing

Scenarios

205
IA & wireframing

Storyboards

206
IA & wireframing

Low vs high-fidelity

207
IA & wireframing

Sketching

208
IA & wireframing

Wireframes

209
IA & wireframing

User flows

210
IA & wireframing

Intro to usability testing

301
Prototyping & usability testing

Usability testing plan

302
Prototyping & usability testing

Prototypes

304
Prototyping & usability testing

Research report

305
Prototyping & usability testing

Typography basics

401
Visual design & handoff

Color basics

402
Visual design & handoff

Color accessibility

403
Visual design & handoff

Pixels vs points

404
Visual design & handoff

Layout + 8pt grid system

405
Visual design & handoff

Design system

406
Visual design & handoff

UX writing

408
Visual design & handoff

"Final" usability test

409
Visual design & handoff

UX portfolio basics

501
UX portfolio

Your portfolio is just another UX project

502
UX portfolio

Choosing a site builder for your UX portfolio

503
UX portfolio

UX portfolio inspiration

504
UX portfolio

5 tips for junior UXers asking for portfolio feedback

505
UX portfolio