Sarah Doody | Storyboarding In Product Development 1
Storyboarding In Product Development
@sarahdoody
Sarah Doody November 20, 2015
#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
Sarah Doody | Storyboarding In Product Development
I’m a user experience designer.But I realized that above all, I’m a storyteller.
Sarah Doody | Storyboarding In Product Development
Ever feel like you’re playing a game of
Telephone?
Sarah Doody | Storyboarding In Product Development
OBSERVATION
Far too often teams focus on execution before defining
a product opportunity or value proposition.
Sarah Doody | Storyboarding In Product Development
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
Sarah Doody | Storyboarding In Product Development
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
Sarah Doody | Storyboarding In Product Development
ROOT PROBLEM
We focus on the how and what of a product, letting
why get left behind.
Sarah Doody | Storyboarding In Product Development
what howwhy
solutionstory / problem
Product Development Timeline
Sarah Doody | Storyboarding In Product Development
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
Sarah Doody | Storyboarding In Product Development
why how
story
Product Development Timeline
what
solution
Sarah Doody | Storyboarding In Product Development
Broca’s area
(language)Wernicke’s
area (language)
BRAIN’S RESPONSE TO FACT
Sarah Doody | Storyboarding In Product Development
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
Sarah Doody | Storyboarding In Product Development
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)
Sarah Doody | Storyboarding In Product Development
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.
Sarah Doody | Storyboarding In Product Development
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
Sarah Doody | Storyboarding In Product Development
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
Sarah Doody | Storyboarding In Product Development
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.
Sarah Doody | Storyboarding In Product Development
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
Sarah Doody | Storyboarding In Product Development
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.
Sarah Doody | Storyboarding In Product Development
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.
Sarah Doody | Storyboarding In Product Development
STEP 4: STORYBOARD
• Scene 1
• Family is at park
• Lots of distractions
• Crowded
• Loud
• Outside (sunlight)
Sarah Doody | Storyboarding In Product Development
STEP 4: STORYBOARD
• Scene 2
• Notice child is missing
• First interaction with app
Sarah Doody | Storyboarding In Product Development
STEP 4: STORYBOARD
• Scene 3
• An alert goes out
• Heightened awareness
• Small details of app experience are revealed; but not designed out.
Sarah Doody | Storyboarding In Product Development
STEP 4: STORYBOARD
• Scene 4
• Someone spots the child
• Uses app to say child is found
• Notifies park agent
Sarah Doody | Storyboarding In Product Development
STEP 4: STORYBOARD
• Scene 5• Parents are virtually reunited with child
• Instructions on what to do next
Sarah Doody | Storyboarding In Product Development
STEP 4: STORYBOARD
As you go, write down any ideas, issues, and key screens that stand out in the user flow.
Sarah Doody | Storyboarding In Product Development
The full storyboard
shows the end to end journey from problem to solution.
Sarah Doody | Storyboarding In Product Development
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
Sarah Doody | Storyboarding In Product Development
Based on the storyboard, the userflow adds more
detail around key screens & actions in the
app.
Sarah Doody | Storyboarding In Product Development
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.
Kinpoint Missing Child Alert
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!!
Kinpoint Missing Child Alert
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.
Sarah Doody | Storyboarding In Product Development
• 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
Sarah Doody | Storyboarding In Product Development
• 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.
Sarah Doody | Storyboarding In Product Development
Every great product starts with a great story.
What’s yours?
Sarah Doody | Storyboarding In Product Development
SAY HELLO :)
@sarahdoody
Sarah Doody November 20, 2015
#storytellingUX
Top Related