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

[email protected]

#storytellingUX

http://www.sarahdoody.com

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 defining

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 defining

the problem and only 5 minutes finding 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 off 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)

http://www.nytimes.com/2012/03/18/opinion/sunday/the-neuroscience-of-your-brain-on-fiction.html


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 KellyMissing 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

• Notifies 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 flow.


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 fidelity & learnings

• Sketch out the user flow / screen map

• Create wireframes

• Prototype

• Visual design

• Technical development


Based on the storyboard, the userflow 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

WireframesPrelim 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.

MISSINGJack Brown3 years oldblonde hairblue eyes

Last seen at Rainforest Cafe, Downtown Disney

Photos Details

I found the child

Alert issued at 2:05pmSaturday, 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

43

4When 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 fidelity 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 efficient.


Every great product starts with a great story.

What’s yours?

storyboarding in user experience workshop (at mobile ux london)

Design