Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Storyboarding In User Experience Workshop (at Mobile UX London)

4,488 views

Published on

Instead of focusing on storytelling to help us tell customers the story of our product after it's built, can we use storytelling to help our teams work more efficiently during the product development process.

In this workshop, participants were taught why our current product development process is broken, how storytelling helps us work more efficiently, and how storyboarding can provide us with a tool to communicate and create with more clarity and collaboration.

Published in: Design

Storyboarding In User Experience Workshop (at Mobile UX London)

  1. 1. Sarah Doody | Storyboarding In Product Development 1 Storyboarding In Product Development @sarahdoody Sarah Doody November 20, 2015 sarah@sarahdoody.com #storytellingUX
  2. 2. 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
  3. 3. Sarah Doody | Storyboarding In Product Development I’m a user experience designer. But I realized that above all, I’m a storyteller.
  4. 4. Sarah Doody | Storyboarding In Product Development The problem with our current process.
  5. 5. Sarah Doody | Storyboarding In Product Development Which header do you prefer? Header A Header B
  6. 6. Sarah Doody | Storyboarding In Product Development 69 I had mail.
  7. 7. Sarah Doody | Storyboarding In Product Development PRODUCT & DESIGN TECH BUSINESS UX
  8. 8. Sarah Doody | Storyboarding In Product Development Ever feel like you’re playing a game of Telephone?
  9. 9. Sarah Doody | Storyboarding In Product Development OBSERVATION Far too often teams focus on execution before defining a product opportunity or value proposition.
  10. 10. 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
  11. 11. 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
  12. 12. Sarah Doody | Storyboarding In Product Development ROOT PROBLEM We focus on the how and what of a product, letting why get left behind.
  13. 13. Sarah Doody | Storyboarding In Product Development what howwhy Product Development Timeline
  14. 14. Sarah Doody | Storyboarding In Product Development what howwhy solutionstory / problem Product Development Timeline
  15. 15. 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
  16. 16. Sarah Doody | Storyboarding In Product Development why how story Product Development Timeline what solution
  17. 17. Sarah Doody | Storyboarding In Product Development Why storytelling?
  18. 18. Sarah Doody | Storyboarding In Product Development Our brains remember stories.
  19. 19. Sarah Doody | Storyboarding In Product Development Neuroscience of fact and fiction.
  20. 20. Sarah Doody | Storyboarding In Product Development Broca’s area (language) Wernicke’s area (language) BRAIN’S RESPONSE TO FACT
  21. 21. 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
  22. 22. 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)
  23. 23. 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.
  24. 24. Sarah Doody | Storyboarding In Product Development Storyboarding.
  25. 25. 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
  26. 26. 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
  27. 27. Sarah Doody | Storyboarding In Product Development LOST & FOUND. EXAMPLE PRODUCT
  28. 28. 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.
  29. 29. 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 Kelly Missing child Jack’s Parents. Park goer / finder of missing child
  30. 30. 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.
  31. 31. 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.
  32. 32. Sarah Doody | Storyboarding In Product Development STEP 4: STORYBOARD • Scene 1 • Family is at park • Lots of distractions • Crowded • Loud • Outside (sunlight)
  33. 33. Sarah Doody | Storyboarding In Product Development STEP 4: STORYBOARD • Scene 2 • Notice child is missing • First interaction with app
  34. 34. 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.
  35. 35. 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
  36. 36. Sarah Doody | Storyboarding In Product Development STEP 4: STORYBOARD • Scene 5 • Parents are virtually reunited 
 with child • Instructions on what to do next
  37. 37. 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.
  38. 38. Sarah Doody | Storyboarding In Product Development The full storyboard shows the end to end journey from problem to solution.
  39. 39. 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
  40. 40. Sarah Doody | Storyboarding In Product Development Based on the storyboard, the userflow adds more detail around key screens & actions in the app.
  41. 41. 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 Wireframes Prelim wireframes to show userflow, identify key interactions, and spot possible problems or friction points.
  42. 42. 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!!
  43. 43. 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. 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
  44. 44. 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.
  45. 45. 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
  46. 46. Sarah Doody | Storyboarding In Product Development Your Turn.
  47. 47. 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.
  48. 48. Sarah Doody | Storyboarding In Product Development Every great product starts with a great story. What’s yours?
  49. 49. Sarah Doody | Storyboarding In Product Development RECOMMENDED READING
  50. 50. Sarah Doody | Storyboarding In Product Development SAY HELLO :) @sarahdoody Sarah Doody November 20, 2015 sarah@sarahdoody.com #storytellingUX

×