All language subtitles for 07 - Understand the two types of storyboards.en

Hi again. Let's continue

our discussion about storyboards.

Remember, storyboards are
often used to outline movies.

In the film world, storyboards
are used before a movie is

created to show how

each scene of the movie will
play out for a character.

In the UX world,
storyboards are similar.

They show how each scene of
the journey will play out

for a user as they
interact with the product.

Now, things are about
to get interesting.

There are actually two
types of storyboards.

Keeping movies in mind,

these two types of
storyboards are

called big picture and close-up.

First, let's discuss a
big-picture storyboard,

which focuses on the
user experience.

Big picture storyboards think

about how people
will use the product

throughout their day and why
that product will be useful.

This helps you understand
the entire user experience,

including the
different challenges,

potential pain points, and types

of interactions the
user will encounter.

Take a moment to think about

a movie you watched recently.

Maybe it was an action-packed
superhero movie

or a thoughtful romantic comedy.

Each panel of the big
picture storyboard captures

a part of the character's actions

that push the story forward.

Again, it's similar in UX design.

Each panel of a
big-picture storyboard

captures a part of the user's
journey with a product.

Let's revisit our
dog walking app.

Remember our problem
statement was:

Drew is a pet owner in a
small town who needs to

find and schedule a dog walker

because they work
the night shift.

Our goal statement
was: Help users with

pets find and schedule dog
walkers easily and quickly.

Let's create a storyboard to

describe how Drew
gets from the problem

they're currently facing to

the goal when using our product.

Remember, we want to include

emotion in our big
picture storyboard.

First, the user leaves
their house in the evening,

heading to their job as a nurse.

Their dog is left at home
overnight for ten hours,

so we see the dog
with a sad face.

Then as the user is
driving to work,

they think of their dog at home.

The user remembers
that they forgot to

take their dog for
a walk that day. Whoops!

Later while the
user is on a break at work,

they grab their phone and
open the dog walking app.

The app shows the faces of

local dog walkers who are eager
to meet the user's pooch.

The user feels relieved
knowing that someone

might be able to bring
their dog for a walk.

In the app, there's a
clock icon and the user

selects a time for

the dog walker to come
into their house.

There's also a calendar
icon to schedule

the dog walker on
a regular basis.

The user clicks the Confirm
button to finish scheduling.

Their dog will be
so happy to have

some company and go for a walk.

Finally, the user returns
back to work and is smiling,

feeling happy that their
dog will be well taken care

of and will get more
exercise in the future.

Notice that this big
picture storyboard

is focused on how and why.

Think about questions like,

How will the user

use our dog walking app?

Why will the app be useful?

And why will the user be
delighted by the app?

Like a good movie,

a big picture storyboard can

show the emotional engagement

that a user will have with
our app or with any product.

Understanding how a user
feels while experiencing

your product is an essential
part of the design process.

You have the hang of a
big-picture storyboard.

Let's transition to

the second type of
storyboards: close-up.

In a close-up storyboard,

the sketches in
each panel focus on

the product instead of on

the user experiencing
that product.

While big-picture storyboards

focus on the how and the why,

close-up storyboards
focus on the what.

Think about questions like,

What happens on each
screen of the product?

What does the user do to

transition from one
screen to another?

And after you've created
the storyboard,

what are potential
problems with the flow?

Keep in mind, we
only need to pick

a few key screens to sketch in

order to demonstrate
the product experience.

It's not necessary to
do a detailed click-by-click

play of every
part of your product.

Let's think about our
dog walking app again.

In a close-up storyboard,

you'll include the same screens

that a user will experience.

First, the user taps the icon on

their phone's home screen to
open the dog walking app.

Next, the user enters

their email address and
password to log into the app.

The user navigates to the
settings page of the app to

share the location at

their house for the
dog walker to visit.

Then the user returns to
the homepage and taps

the clock icon to select a time

for the dog walker to
come to their house.

The user also taps
the calendar icon to

schedule the dog walker
on a regular basis.

Finally, the user presses

the Confirm button to finish
scheduling the dog walker.

What did you notice about how

this close-up storyboard was

different from the big
picture storyboard?

The close-up storyboard
is less about emotion,

since we're not
focused on the user.

Instead, the close-up
storyboard is focused

on the practicalities
of the design itself.

So how do you decide which
type of storyboard to use?

To decide, it's helpful to think

about this stage of the
design process you're in.

If you're early in
the design process,

you might want to present
your high-level ideas to

stakeholders to get them
excited and bought in.

In this case, a big-picture
storyboard makes sense.

so your team can
focus on the user,

their needs, and their
experience with your product.

On the other hand, a
close-up storyboard is more

useful after your initial
design directions

have been explored.

Since a close-up
storyboard focuses

on the details
within your product,

like screens of an app,

this type of storyboard
can help you think through

practical ideas about
improving the product.

One more thing. In many cases,

you might want to create

both a big-picture and
a close-up storyboard.

There are also ways to bring

both types of
storyboards together.

For example, in this storyboard

about Amal booking
a workout class,

we change the focus
from the user to

their specific interactions
within the app.

That's okay. As UX designers,

it's good to have

a flexible and creative approach

to explaining your ideas.

So try experimenting with both
styles. And that's a wrap!

You now know about two
types of storyboards:

big picture and close-up.

Keep your storyboards close by,

because later on we'll use
the sketches we created in

this close-up storyboard
to draw wireframes.

Next up, we'll learn the
basics of wireframes.

Keep up the great work.