Download to read offline
Uploaded byTrip O'Dell
Design and Darkmatter, Connecting Storytelling with Business Outcomes
The document emphasizes the importance of storytelling in design and the creation of successful products, framing design as the 'dark matter' essential to user experience. It discusses the significance of connecting with users through narrative while employing cognitive theories related to memory and learning to enhance design processes. Additionally, it outlines principles and methodologies used in product development at Amazon, highlighting the need for an inclusive and customer-centric approach to problem-solving.
More Related Content
Similar to Design and Darkmatter, Connecting Storytelling with Business Outcomes
Design and Darkmatter, Connecting Storytelling with Business Outcomes
- 1. Founder, Dark MatterSeattle www.darkmatter.design TRIP O’DELL (@tripodell) DESIGN AND DARK MATTER CONNECTING STORYTELLING AND OUTCOMES
- 2. Agenda • Darkmatter anddesign • Cognition story, play and learning • Amazon and the working backwards process (welcome to fight club) • Strategy storyboards 2
- 3. Why Dark Matter? (besidessounding cool)
- 4. –Henry Wadsworth Longfellow “Thesky is filled with stars, invisible by day.”
- 5.
- 6. Design is the“Dark Matter” of Product Experience
- 7. Design includes allthe rejected decisions, invisible iteration, trial and error, collaboration, instinct and insight that forms the basis of successuful products.
- 8. The best designbrings together form, function, context, culture, perceived utility, and value.
- 9. Good design solvesproblems in ways that reinforce our values and how we expect the world to work
- 10. Poorly designed experiencesdo not conform to our expectations.
- 11. Let me tellyou a story…
- 12. How did Iget here?
- 13. 13 (BEING AWESOME) (stuff happened) 20072005 (morestuff) Today Continued trend of Future awesomeness1995 patents FTW! (Clearly he’s brilliant) Internationa l Conference Speaker (Global Finalist!) C Round $1 Billion Valuation An outsider’s view of my career
- 15. Highlights • Led productdesign for Adobe’s consumer desktop and first cloud services • Led design for the second world’s second largest email platform , cloud storage and sharing scenarios in Windows 7 and Windows 8 • Led design across the entire Audible customer experience driving hundreds of millions of dollars in growth • Led services for Fire OS, Education, and developed the vision and strategy for Amazon Spark and Inspire • Led the launch of IOT, Shopping, Alexa Skills Framework and Communications domains (50% of what Alexa does) • Scaled Last Mile Delivery at Amazon from a two-city pilot to an $11.b Billion portfolio in 18 months, driving down delivery costs, in some cases by billions of dollars. 15
- 16. TODAY 1995 Congressional intern (unpaid) Speech writer “Marketingguy” Jesuit Volunteer/Teacher Grad school 1.0 Teacher (again) Computer salesman Grad school (redux) Waiter/door to door meat salesman Creative Director (failing startup) First Child Lead UX Designer Senior UX Designer Design Leadership Staff UX Designer Third Child (Yay benefits) The twists and turns tell a better story
- 17. We live ina world that isn’t designed to work very well for people like me.
- 18. 18 Title Text DYSLEXIC I hatedschool Reading, writing, math and organizing Trip Explaining, thinking, storytelling and problem solving Trip Four degrees of “Stupid and lazy”
- 20. 20 Title Text I “learnedto Learn“ by using Technology in novel ways
- 21. “Type a quotehere.” –Aristotle “Where your talents and the needs of the world meet, there lies your vocation”
- 22. 22 Title Text I becamea teacher and coach
- 23.
- 24. 24 Title Text Red CloudVolunteers, 1998 - 2000
- 25.
- 26. 26 Title Text I alsodrove school bus (this one) Holy Rosary Mission, Founded 1888 Red Cloud Indian School
- 29. 29 Title Text Navy Veteran Avidphotographer Amazing mom Filmmaker Program Director, UCLA PHD Candidate Media Spokesperson Standing Rock Protests Environmental Sustainability Expert Community Leader Standing Rock Activist Graphic Artist Avid Photographer Nurse Amazing Mom
- 30. 30 Title Text Graphic Artist Award-winningtraditional musician/vocalist Designer Fine Artist Radio Host Podcaster Community Leader Nature Photographer Amazing Father Podcaster Community Political Leader Food Sovereignty Activist
- 31. 31 (BEING AWESOME) (stuff happened) 20072005 (morestuff) Today Continued trend of Future awesomeness1995 patents FTW! (Clearly he’s brilliant) Internationa l Conference Speaker (Global Finalist!) C Round $1 Billion Valuation The details are messy
- 32. Which is whymy talents led me to design
- 33. Designers can havemassive impact in the world
- 34. 34 I design technologyand solve problems that make life a little better for people.
- 35. I do alot of storytelling in my job
- 36. Storytelling is auniquely human behavior. It is how we learn. It is the basis of all art, science, language, culture, and learning.
- 39.
- 40.
- 43. “Once Upon aTime…” (The Story of How People Learn)
- 44. — Rabbi Shemuelben Nachmani, as quoted in the Talmudic tractate Berakhot (55b.) “We do not see things as they are. We see things as we are.”
- 45. We “construct” ourunderstanding of the world through stories
- 46. Swiss Psychologist AndPhilosopher Jean Piaget (1896 - 1980) “Play is the work of childhood.”
- 48. Constructivist Theory • Childrenare born to learn through play. • Children have no sense of the self, or others at birth. That awareness develops in time along with empathy • Knowledge is stored in “schemas” (mental models) that are revised through further discovery (play) or culturally (modeling or stories) • The brain experiences story as if it were reality (Reeves & Nass) • We encode that knowledge episodically, and recall it through stories. • His theories continue to influence the fields of cognitive psychology, human development, education, and computer science (especially deep machine learning, Natural Language processing, and AI) 48
- 49. Central Executive Episodic Buffer Phonological Store Visuospatial Sketchpad Procedural Memory Declarative Memory MEMORY AND COGNITION •Task management • Focused thought • Complexity • Experience • Flow state Short term memory Long term memory
- 50. - Jean Piaget “Intelligenceis what you use when you don't know what to do.”
- 51. Central Executive Episodic Buffer Phonological Store Visuospatial Sketchpad Procedural Memory Declarative Memory TWO SYSTEMS OFTHINKING Central Executive Episodic Buffer Phonological Store Visuospatial Sketchpad Procedural Memory Declarative Memory • Reactive/ Fast/ Impulsive • Limbic system Examples: Riding a bike Answering phone with “hello” • Slow / Considered / Disciplined • Frontal Lobe / Executive Function Examples: Learning to ride a bike Navigating unfamiliar social setting System 1 System 2 FAST (EASY) SLOW (STRESSFUL)
- 52. Episodic memory • Weuse stories to remember and explain the world. • All stories are knowledge compression, all media is a way to transmit story • The world is “like us”, and confirms to our expectations until it proves otherwise • We are constantly revising stories as we learn • Cultural references (slang, quotes, and metaphors) compress and explain new ideas. • Stories are the basis of empathy
- 53. - Jean Piaget “Playis the answer to how anything new comes about.”
- 54. –Johnny Appleseed “Type aquote here.” Play is deeply collaborative and fluid
- 55. “the Magic Circle”Theory 55 Soccer Pitch (Fine, “Football”) Real Life “GOOOAAAALLL!” Kicked Ball in Net “Nice Kick”
- 56. Free play vsgames - Different kinds of magic 56 Game or Sport Formal Rules Constraints, Limited Participants, Unambiguous Boundaries. Mostly Time-Bound. Officiated Play Informal Boundaries, Goals, Rules, Constraints Are Constantly Negotiated. “I’m Done Being a Princess. Now We’re Sharks! Lets Find Pirates To Eat. Outcome-Oriented Generative
- 57. This is your brainon story
- 58. 58 Front Back Left Right Semantic Memory (facts,procedure, calculation) Episodic memory (story, context, emotion) Corpus calousum Coordinating activity
- 59. 59 This is yourbrain enjoying a story This is your brain not enjoying a story Listening to stories
- 60. 60 Left hemisphere isn’tconnecting facts to context. Notice low activation in right hemisphere Creating stories… (and also lying) Why brainstorming doesn’t work Higher activation across both hemispheres
- 61. Why does knowingabout story, play and learning matter to designing better products?
- 62. If you wantto build a better future, you must first invite your partners to the circle of play and make them full participants in the storytelling
- 63. If design wantsmore than the“seat at the table” with crayons and the “special” menu…
- 65. 65 “You and mecould write a bad romance” - Lady Gaga
- 66.
- 67. So, how didI end up at Amazon? The culture has a certain reputation…
- 68. How my jesuiteducation prepared me for this this ought to be good…
- 69. Missionary + Mercenary “100%Peculiar” Missionary + Mercenary
- 70.
- 71.
- 72.
- 73. Leadership principles • CustomerObsession • Ownership • Invent and Simplify • Are Right, A Lot • Learn and Be Curious • Hire and Develop the Best • Insist on the Highest Standards 73 • Think Big • Bias for Action Frugality • Earn Trust • Dive Deep • Have Backbone; Disagree and Commit • Deliver Results
- 74. 74 Amazon has itsown ethos and ethics. For long-time Amazonians, those ethics become part of your daily conversational shorthand
- 75.
- 77. The Amazon WorkingBackwards Process
- 78. “Start With theCustomer and Work Backward” “There is nothing worse than a sharp image of a fuzzy concept.”
- 79. The Press Release/FAQ •Tell a story of what the product is and what it does for customers • Describe the customer problem • How does the product solve the problem • Fictional Quotes from customers • 1 -2 pages Page • Use FAQs to ask uncomfortable questions other will have. • Answer them if you can/admit when you can’t and follow up • Use data
- 80. The Press Release/FAQ Tella story of what the product is and what it does for customers Describe the customer problem How does the product solve the problem Fictional Quotes from customers 1 -2 pages Page 80 PR/FAQ Reviews: “Welcome to fight club…”
- 81. Mercilessly candid andoften combative 81 PR/FAQ Formal Rules Constraints, Limited Participants, Unambiguous Boundaries. Mostly Time-Bound. Officiated Outcome-Oriented
- 82. Data myopia + Role-based monoculture + ProcessDoctrine vs choosing better tools + Limited trust = “Frupidity” “Bias for chaos” pyrrhic victories vs impact
- 83. The Press Release≠ Working Backwards • Tell a story of what the product is and what it does for customers • Describe the customer problem • How does the product solve the problem? • Fictional Quotes from customers. What will they say about it? • 1-2 Pages • Use FAQs to ask uncomfortable questions other will have. Answer them if you can/Use data • The PR/FAQ is often a bad tool for the complex scenarios they solve
- 84. The purpose ofa working backwards artifact • Who, what, when, where, why, how much? • Fast • Cheap • Disposable • All ideas are bad at first. Don’t fall in love • Honest - answers the hard questions, admits when an answer isn’t known • Accommodates both the mercenary and missionary needs of the culture
- 85. Working Backwards withStrategic Storyboards 85
- 86. Why Storyboards? • Muchricher way to communicate complex ideas with layers of information • Better at time shifting, multiple user scenarios, location changes, putting ideas in context • Fast, cheap and easy to iterate • Superior to mockups, written documents, spreadsheets, wireframes, workflow diagrams, journey maps • Faster, cheaper and easy for ANYONE to create.
- 87. CXIXD “Product” ServiceUXUI Ourjob is changing faster than job titles Human - centered problem solving as a core business competency
- 89.
- 90. It’s hardly an“enterprise” offering.. 90
- 91. Wicked problems, killertool 91
- 92.
- 93.
- 97.
- 98. 98 James is anew dad who signed up for Amazon Flex to supplement his family’s income. But He almost always has to stay up until 12am, when blocks are released for the next day, to get work that fits into his schedule. A few days later, james gets an emaiL detailing the new offer-based scheduling process for flex. Ugh. How do these blocks get taken so fast?! James likes the idea of being notified for offers, especially when they seem to be customized to his schedule. 12:03 AM Finally, I Might be able to get a good night’s sleep… James immediately receives a notification for new offers. He quickly learns that these offers come and go fast but that they also give him the flexibility to find more work on demand. With Offers, Flex works around James’ Family’s schedule and his work life, providing him with more reliable opportunities to make extra money when he needs it. 9:13 PM He loves the flexibility of driving with Amazon. James has a hard time balancing his growing family responsibilities with getting delivery blocks. After updating his app, He easily changes his preferences to better fit the times he can make deliveries.
- 99.
- 100.
- 101. Pitfalls • Focus ona scenario, not every feature • Multiple scenarios = multiple storyboards • Show, don’t tell - every layer of information is important • Don’t shape the story around a business case (TV commercial) tell a realistic story about people • Have more than one hero. There can be many actors, but follow the protagonist • Each storyboard is a complete arc with a beginning, middle and end • Keep is simple - 1 story, 1 page
- 102. Trip’s Hall ofShame
- 103. The TV Commercial •Hotmal circa. 2010 • Too long • Focuses on a feature/business case • Reactions are not realistic • Distracting details • Took way too long (Pixton)
- 104. The Novel • Audiblecirca. 2012 • Too long • Characters were stereotypes • Too long to set up problem
- 105. The optimist • AmazonAlexa 2015 • Rosy Scenario/No FAQ callouts • Focuses on feature, not customer • “Why would they do this”
- 108. Communicate in depth- think in layers 1.(optional) Mental state/Background 2.Character/Action (image) 3.Narrator / Description of action 4.Character mental reaction 5.Dialog 6.Environmental sounds 7.Footnotes/Distracting details 108
- 109. Billion dollar baby •Amazon Flex 2016 • Convinced Execs to make billion dollar changes to a labor economy Better: • Sets problem in first two frames • Uses visuals to set context • Easy to follow cuts between characters • Focused scenario • Puts UI change in context along with telling why
- 110. 110 Title Text Last MileDelivery is the most challenging portion of a logistics supply chain 53%
- 111. Last Mile DeliveryJourney Map Driver Recruitment, on boarding and, training. International labor requirements, banking, insurance, Tax, and background checks Availability, scheduling, offers, delivery pools, pricing and payments On road navigation, modes of transport, waypoints, geofencing, Last 100 feet navigation Locker redirect, parking, building access, interior navigation, customer instructions Arrival at station, check in, route assignment, waypoints, staging, geofencing, scan, sort and load. Delivery execution Locker, Key, vehicles, India Buyback, program specific delivery flows, locker redirect, pickup Patterns and systems: Argon/ Titan pattern library, web views Offline scenarios and India delivery scenarios Fraud detection, “carrots and sticks” compliance and incentives On-boarding Marketplace Scan and load On road Car door to doorstep Delivery execution Systems International Incentives
- 112.
- 113. 113 James is anew dad who signed up for Amazon Flex to supplement his family’s income. But He almost always has to stay up until 12am, when blocks are released for the next day, to get work that fits into his schedule. A few days later, james gets an emaiL detailing the new offer-based scheduling process for flex. Ugh. How do these blocks get taken so fast?! James likes the idea of being notified for offers, especially when they seem to be customized to his schedule. 12:03 AM Finally, I Might be able to get a good night’s sleep… James immediately receives a notification for new offers. He quickly learns that these offers come and go fast but that they also give him the flexibility to find more work on demand. With Offers, Flex works around James’ Family’s schedule and his work life, providing him with more reliable opportunities to make extra money when he needs it. 9:13 PM He loves the flexibility of driving with Amazon. James has a hard time balancing his growing family responsibilities with getting delivery blocks. After updating his app, He easily changes his preferences to better fit the times he can make deliveries.
- 114. 114 Supply and Demand:The internet is smarter than your company The original work assignment system was broken from the start and led to a nearly constant race condition and “block hoarding” by a small group of drivers gaming the system with innovative hacks. Courtesy Youtube user (and former Flex Driver) Tim McDaniel https://www.youtube.com/watch?v=-b9pGV57jY8
- 116. Breakthrough • Amazon Flex2017 Better: • Focused, real, focused on problems • Very rapid - 2 hours of work • Shows user journey
- 118. Today • Varsity Tutors2018 Better: • Use of background to show mental state • Attribute speech from device to switch between users • More film-like in zooms to details, treating audio and visuals as distinct. • Always clear who’s speaking (color/ character associations) • User actions are described in narrative layer
- 121. Start with thecustomer
- 122. Define the experience(not the solution)
- 123. Simplify and makeit real. Consider technical, environmental, and business realities. Accept customer behavioral realities
- 124. Tell a story,not a TV commercial. NO UNICORN FARTS
- 125. Do’s • Story arcfirst , pictures second, dialog and details last. • Communicate in depth, using layers. Show, don’t tell • Set context and problem in first two frames. • Build Characters (not segments or personas). Consistent faces, names, details. • 1 scenario, 1 page. Show a complete arc • Use footnotes for business meta-points. More than 4 and you’re over-complicating. • Communicate reactions: body language, phatic (“hmm”, “ahhh” ), and emotive symbols (“!??”, “❤”) • Use backgrounds, environmental sounds to communicate action • Distinguish speakers working left to right. Devices sound different than people. 125
- 126. Don’ts • Focus onpeople NOT Tech (interfaces, devices, etc). People have problems, tech solves or creates problems • Fall in love with the details of characters stories. • Add distracting detail. “JUST ENOUGH” to get the idea across. • Reuse the same images (if possible). Change crop, zoom, angle and point of view to keep it fresh. 126
- 127. “We are allpeers before the object” (Product design is a team sport)
- 128. If you wanta real seat at the big kid’s table…
- 129. –Johnny Appleseed “Type aquote here.” Use an inclusive tool set to create an environment where “deep play” and creative collaboration can exist
- 130. Full inclusion meansan equal spot , participation (and accountability ) in the storytelling…that includes “hands on”
- 131. Charrettes work -“Google Sprints” ,“Design thinking” and workshops do not. (my opinion) 131
- 132.
- 133.
- 134. Steps in process •Define the problem, THEN the solution • Set the vision for the end state of the solution and the outcomes. What are the key points you want to call attention to? Write them down in priority order. • Create the scenario and story arc. What images will you need to tell that story? • Create a shot list (then double it). Be sure to get different angles and reactions from every actor. • Avoid using internet images (its a black hole on a deadline). • Do your initial layout of images for the main points • Layer in dialog and narration • Refine images, edit down, “kill your darlings” 134
- 135. Divide and conquer •Outline of the end to end scenario • Locations (don’t forget establishing shots) • Characters • Devices/Other requirements • Generate shot rough shot list • Make 1 person in charge of all photos • Get multiple for each scene, different angles • Don’t go crazy, you can always go back/ reshoot • Initial Layout • Use narrative blocks to roughly map the action • Add in the photos • Rough in dialog. • Revise • What words can be cut? • What frames can be cut or consolidated? 135
- 136. Founder, Dark MatterSeattle www.darkmatter.design TRIP O’DELL (@tripodell) THANKS!