Storyboarding In User Experience Workshop (at Mobile UX London)

Sarah Doody | Storyboarding In Product Development 1
Storyboarding In Product
Development
@sarahdoody
Sarah Doody
November 20, 2015
sarah@sarahdoody.com
#storytellingUX

Sarah Doody | Storyboarding In Product Development
• (10 min) Discussion: Why we need storytelling in our process. 
• (30 min) Storyboards In Action: Create a storyboard together. 
• (40 min) Your Storyboard: Translate to your product. 
• (10 min) Present / Q&A: Share your storyboards.
OUTLINE FOR TODAY

I’m a user experience designer.
But I realized that above all, I’m a storyteller.

The problem with
our current process.

Which header do you prefer?
Header A
Header B

69
I had mail.

PRODUCT &
DESIGN
TECH BUSINESS
UX

Ever feel like you’re
playing a game of
Telephone?

OBSERVATION
Far too often teams focus
on execution before deﬁning
a product opportunity or
value proposition.

KEY SYMPTOMS
Product Team Users
• Scope creep

• Extended timeline

• Over budget

• Scope reduction
• Chasing tasks

• Burn out

• Declining passion

• Growing frustration
• Confusing ux

• Slow adoption

• No adoption

• No word of mouth

It doesn’t matter how good your
(engineering) team is if they are not
given something worthwhile to build.
Marty Cagan
Inspired: How To Create Products Customers Love

ROOT PROBLEM
We focus on the how and
what of a product, letting
why get left behind.

what howwhy
Product Development Timeline

what howwhy
solutionstory / problem

If I had one hour to save the world
I would spend 45 minutes deﬁning
the problem and only 5 minutes
ﬁnding the solution.
- Einstein

why how
story
what
solution

Why storytelling?

Our brains remember stories.

Neuroscience
of fact and fiction.

Broca’s
area
(language)
Wernicke’s
area
(language)
BRAIN’S RESPONSE TO FACT

Broca’s
area
(language)
Wernicke’s
area
(language)
Frontal
cortex
(emotion)
Motor cortex
(movement)
Sensory cortex
(sensation / touch)
Olfactory
cortex
(smell)
BRAIN’S RESPONSE TO FICTION

Novels (stories) go beyond simulating
reality to give readers an experience
unavailable oﬀ the page:
the opportunity to enter fully into other
people’s thoughts and feelings.
From: Your Brain On Fiction by Annie Murphy Paul (New York Times)

BEYOND ON THE CLICHÉ
Storytelling —not to help us tell people
about our product after it’s built.
Instead as a tool to help us throughout
the product development process.

Storyboarding.

STORYBOARDING BASICS
• Happens before a wireframe is ever created
• Minimizes barrier to entry for collaborators / stakeholders
• Creates a conversation
• Keeps focus on people & solving their problem
• Establishes context
• Serves as an anchor throughout product design process
• Increases chances that everyone remembers because it’s a story

STORYBOARDING STEPS
1. Identify the problem
2. Establish the characters
3. Write out the moments
4. Overlay moments with emotions, actions, thoughts
5. Sketch out each scene of the end to end story

LOST & FOUND.
EXAMPLE PRODUCT

Make it easier for lost children (at
an amusement park) to be found
& reunited with their parents.
STEP 1: PROBLEM
* Child should not need to wear a tracking device.

Jack is 5 years old and has been taught to
not talk to strangers. Jack needs to
establish trust with the person who find
him.
To accomplish this, a park agent should be
dispatched to the person who finds Jack
immediately.
As well, leverage mobile (voice / video) to
connect Jack to his parents before
they are physically reunited.
Jack’s parents need to feel calm,
reassured, and as though quick action is
being taken to help find Jack.
To accomplish this, the app should get
the alert out in as few steps as
possible.
A park agent should be dispatched to
their location immediately upon reporting
the child missing to provide support.
Park goers who receive the missing child
alert need to feel empowered and
equipped with enough information to
find Jack.
Leverage location data to help park goers
understand their proximity to Jack’s last
location.
STEP 2: CHARACTERS
Jack
The Browns Kelly
Missing child Jack’s Parents. Park goer / finder of missing child

STEP 3: MOMENTS
• Family is at the park, having a good time.
• Parents notice a child is missing.
• Panic! What to do? Alert park agent and / or open park app.
• Other park goers become aware a child is lost.
• Someone spots the child.
• Child is found & safe.
• Parents & child are reunited.

STEP 4: STORYBOARD
• Your turn!
• Get into groups of 5
• Sketch the scenes 
• Don’t include detailed
sketches of app
screens. Focus on the
people.

STEP 4: STORYBOARD
• Scene 1
• Family is at park
• Lots of distractions
• Crowded
• Loud
• Outside (sunlight)

STEP 4: STORYBOARD
• Scene 2
• Notice child is missing
• First interaction with app

STEP 4: STORYBOARD
• Scene 3
• An alert goes out
• Heightened awareness
• Small details of app  
experience are revealed; but  
not designed out.

STEP 4: STORYBOARD
• Scene 4
• Someone spots the child
• Uses app to say child is found
• Notiﬁes park agent

STEP 4: STORYBOARD
• Scene 5
• Parents are virtually reunited  
with child
• Instructions on what to do next

STEP 4: STORYBOARD
As you go, write
down any ideas,
issues, and key
screens that
stand out in the
user ﬂow.

The full
storyboard
shows the end
to end journey
from problem
to solution.

WHAT WOULD COME NEXT?
• Socialize the story for feedback & reaction
• Re-do the storyboard with more ﬁdelity & learnings
• Sketch out the user ﬂow / screen map
• Create wireframes
• Prototype
• Visual design
• Technical development

Based on the
storyboard,
the userﬂow
adds more
detail around
key screens &
actions in the
app.

Carrier
Jack Danielle Add new
Which child is missing?
Carrier
We've sent a KinPoint alert to park guests
and employees to let them know Jack is
missing.
What's Next
1. Stay where you are incase Jack finds his
way back to you.
2. A Disney rep is on their way to your
Add photos Edit details
Cancel Alert
Improve Jack's alert page by adding photos
and details:
Carrier
Kinpoint Missing Child Alert
Jack, a 5 year old boy, has been reported
missing at Disney. Last seen at Rainforest
Cafe in Downtown Disney. Jack has
blonde hair and blue eyes.
Close View details
Carrier
Jack
Last seen in Downtown Disney at the
Rainforest Cafe, less than 500 feet from you.
Report Jack As Found
Carrier
We've let Jack's parents know your location.
It's important that you stay where you are
until Jack's parents reach you.
Help everyone feel at ease.
Call or FaceTime Jack's parents so he can
let them know he's ok.
Call FaceTime
Carrier
We've sent a KinPoint alert to park guests
and employees to let them know Jack is
missing.
What's Next
1. Stay where you are incase Jack finds his
way back to you.
2. A Disney rep is on their way to your
location to offer support and answer any
questions.
3. Turn the volume up on your phone so you
don't miss the notification when Jack is
found.
KinPoint Alert
Someone reported they've found Jack!
To view their location and make contact
with them view the
Close View details
Carrier
Confirm Jack as reunited
Someone's reported they found Jack!
You should make your way to Jack and the
person who found him. Here is Jack's location:
Call FaceTime
Call or FaceTime the person who has Jack to
make contact and put Jack at ease.
Carrier
Kinpoint Missing Child Update
The alert for missing child Jack has been
cancelled. His parents have confirmed
that they have been reunited with him.
Thanks for your help!
Dismiss
Report missing Next steps
Alert to park goers Alert details Found, next steps
Found alert to parents Found details
Found alert to park goers
Wireframes
Prelim wireframes to
show userflow, identify
key interactions, and
spot possible problems
or friction points.

Reporting a missing child
Jack Danielle Add New
Provide some more details to help people find Jack.
Add
photos Edit
detailsLast
seen
We’ve sent a KinPoint alter to employees
and park guests.
We’ve also dispatched an employee to
your location to support you and answer
any questions.
Please,
stay
where
you
are
incase

Jack
makes
his
way
back
to
you.
Missing child alert is
triggered with just one tap.
Alert DetailsClose
Jack is 5 years old, blonde hair, blue
eyes, 3’6” and 42 lbs. Last seen at
Rainforest Cafe in Downtown Disney.
View: Parents View: Park Goers View: Parents
1 2 3
1
On confirmation screen,
parents can add more
information such as photos,
last location, and details
about the child.
Park goers & employees are
alerted via push notification.
Possibly consider text
messages as well.
2
3
The Browns have just
realized Jack is missing!!

Alert DetailsClose
Jack is 5 years old, blonde hair, blue
eyes, 3’6” and 42 lbs. Last seen at
Rainforest Cafe in Downtown Disney.
MISSING
Jack
Brown
3 years old
blonde hair
blue eyes
Last
seen

at
Rainforest
Cafe,
Downtown
Disney
Photos Details
I found the child
Alert
issued
at
2:05pm
Saturday, October 26 2013
Name
Age
Height
Weight
Jack Brown
5 years old
3’ 6”
42 pounds
Identifying
features
Wears dark rimmed glasses
Photos Details
I found the child
Photos Details
I found the child
Alerting park goers of missing child
Photos tab Details tabView: Park Goers View: Park Goers
Jack is likely on foot & can’t travel far. Therefore location is
extremely important.
The goal of the alert detail screen is to give people a photo of
Jack and context between Jack’s location and their location in
the park.
Addition photos and details are accessible from tabs below the
map.
Kelly is at Disney and receives a KinPoint alert

Report a child as found
Provide some more details to help people find Jack.
Add
photos Edit
detailsLast
seen
We’ve sent a KinPoint alter to employees
and park guests.
We’ve also dispatched an employee to
your location to support you and answer
any questions.
Please,
stay
where
you
are
incase

Jack
makes
his
way
back
to
you.
KinPoint Alert
View DetailsClose
Someone reported they’ve found Jack!
To view the location and make contact
with them click to view the alert details.
Someone has reported they found Jack!
Please make your way to Jack and the
person who found him are waiting. Here is
their location:
YOU
Jack
is
0.15
miles
from
you
Call or Facetime Jack to help put him at ease.
Place
call
Once
reunited,
confirm
Jack
is
found
Facetime
When the finder reports
child as found, a
confirmation screen
provides further
information and options to
call or Facetime the child’s
parents.
The detail screen for
parents shows a map to the
child’s location with options
to call or Facetime.
View: Park Goers View: Parents View: Parents
We let Jack’s parents know your location,
they’re on their way.
Please stay where you are until Jack’s
parents reach you.
YOU
Jack’s
parents
are
0.15
miles
from
you.
Call or Facetime Jack’s parents to help put
everyone at ease.
Place
call Facetime
1
1
2 3
Parents are alerted by a
push notification. Also
consider text messaging.
2
4
3
4
When parents confirm child
as found, an alert goes out
canceling the missing child
notice.

• A sketch is a communication aid, not an art project

• Adjust the ﬁdelity for the audience

• Focus on the people, not details of product screens

• Increase number of frames with each version of the storyboard

• Identify emotion, thoughts, & key actions

• Invite others into the process; use it as an entry point

• Consider the environment & other factors

• Use the story as a constant throughout the design process
STORYBOARDING TIPS

Your Turn.

• Go through the storyboarding steps for your product

• If you don’t have a product, collaborate with someone

• Or re-do the lost child app storyboard with more detail

• Or choose from one of these two ideas:
STORYBOARDING YOUR PRODUCT
Idea 1
A product that helps physical
therapy patients remember and do
their exercises to get better faster.
Idea 2
Re-imagine the security screening
process at the airport to speed it up
and make it more eﬃcient.

Every great product starts
with a great story.
What’s yours?

Storyboarding In User Experience Workshop (at Mobile UX London)

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Storyboarding In User Experience Workshop (at Mobile UX London)

Similaire à Storyboarding In User Experience Workshop (at Mobile UX London) (20)

Dernier

Dernier (20)

Storyboarding In User Experience Workshop (at Mobile UX London)