Tell Me What You Do - How Storytelling Can Transform Artifacts Into Engagement - Mary Wharmby
86
TELL ME WHAT YOU DO How Storytelling Makes You a Better Designer MARY WHARMBY UX Design Director, Spring Studio @marywharmby | #uxstorywheel Presented to UXPA 2015 San Diego, CA
Tell Me What You Do - How Storytelling Can Transform Artifacts Into Engagement - Mary Wharmby
1. TELL ME WHAT YOU DO How Storytelling Makes You a Better
Designer MARY WHARMBY UX Design Director, Spring Studio
@marywharmby | #uxstorywheel Presented to UXPA 2015 San Diego,
CA
2. THE SET-UP AKA The Hook ACT I
3. UX What Huh? ?
4. Why? But Zzzzz Huh? UX
5. Wow! and then Fun Cool!
6. RULE OF THE ROAD #1 People will hear a story whether you
tell it or not. Tell the story you want people to hear
#uxstorywheel
7. 2. Trigger/ Call to Action THE HEROS JOURNEY 3. Gaining
Awareness 1. Before State 6. Return Changed 5. Ultimate Test 4.
Tests & Failures Abyss Death & Rebirth
8. RULE OF THE ROAD #2 Building on Campbells Heros Journey
makes our UX stories more impactful and relatable to others.
#uxstorywheel
9. ACT II THE UXers JOURNEY UX Story Wheel
10. UX Story Wheel
11. UX Story Wheel Needs Goals Outcomes Obstacles Delights
12. UX Story Wheel Trigger Challenge Awareness Design
Intervention Outcome
13. UX Story Wheel User World Trigger Challenge Awareness
Design Intervention Outcome
14. UX Story Wheel User World Stakeholders You Teams Project
World BUSINESS TECHNOLOGY Design Intervention
15. UX Story Wheel User World You Project World Design
Intervention
16. RULE OF THE ROAD #3 The UXers Journey means simultaneously
keeping a foot in both the user story AND the project story.
#uxstorywheel
17. UX Story Wheel User World Project World Design
Intervention
18. 1 3 UX Story Wheel User World Project World Measure Results
Understand the Problem 2Design Intervention Build a Solution
19. UX Story Wheel User World Project World Hear the users
story Tell the users story Envision a new users story 3 1
Understand the Problem 2Design Intervention
20. UX Story Wheel Tell the user a new story Build a new
experience User World Project World 1 Build a Solution 2 3 Design
Intervention
21. UX Story Wheel User World Get a reaction Learn the right
lessons Project World 3 Measure Results 2 1 Design
Intervention
22. RULE OF THE ROAD #4 Your design PROCESS is your UX story
PLOT. #uxstorywheel
23. UX Story Wheel User World Stakeholders Project World You 1
3 2Design Intervention
24. Bridge Design Artifact UX Story Wheel User World
Stakeholders Project World You 1 3 2
25. Personas Journey Maps Flows Analytics UX Story Wheel User
World You Project World 1 3 2 Wireframes Prototypes & Product
IA
26. Personas Journey Maps Flows IA Wireframes Prototypes &
Product Analytics UX Story Wheel User World Project World 1 3 2
You
27. User World User UX Story Wheel Project World Bridge Design
Artifact You
28. User UX Story Wheel Current Journey User Goals & Needs
Opportunities Personas & Journey Maps Project World Bridge
Design Artifact You Product Vision Business Needs Roadmap / Next
Steps User World
29. User UX Story Wheel Product Vision Business Needs Roadmap /
Next Steps Project World Bridge Design Artifact You Personas &
Journey Maps Current Journey User Goals & Needs Opportunities
User World
30. Ground each artifact story in BOTH the user and project
stories. RULE OF THE ROAD #5 #uxstorywheel
31. ACT III THE UX-FILES Tell Me What You Do
32. UX Story Wheel 3 Story Patterns Buddy Story Lessons Story
Detective Story Project World User World 1 2 3
33. DETECTIVE Story Pattern
34. PHASEAUDIENCEGOAL Your Team Other Teams Stakeholders
Detective Story Understand the Problem Empathize with User Give
Meaning to Info Set Common Vision Buddy Story Build a Solution Your
Team Other Teams Stakeholders Lessons 1 2 3 Measure Results Your
Team Stakeholders Other Teams Foster Teamwork Motivate Remember
Vision Understand Reect Set New Vision
35. The Case of the User and the ATM Detective Story
Pattern
36. UX Story Wheel Project World User World Other Teams
Stakeholders UX Users Understand the Problem 1 Detective Story
Set-Up
37. UX Story Wheel Project World Trigger Hypothesize & Plan
Investigate Stakeholders What, how, why? Hmm UX Detective Story Act
I - Question User World
38. UX Story Wheel Hypothesize & Plan Investigate Follow
Leads Setbacks & Pivots UX Doh! Detective Story Act II -
Investigation Project World User World
39. UX Story Wheel Hypothesize & Plan Investigate Follow
Leads Setbacks & Pivots Aha! Eureka Moment! UX Detective Story
Act II - Investigation Project World User World
40. UX Story Wheel Findings Brief UX Detective Story Act III -
Big Reveal Project World User World
41. UX Story Wheel Findings Brief UX Detective Story Epilogue -
Outcome Project World User World Other Teams Yay! Stakeholders
Onward!
42. Detective Story Pattern UX Story Wheel Question
Investigation Big Reveal Outcome Trigger/ Awareness Tests &
Failures Epic Struggle Return Changed
43. Detective Story Bridge UX Story Wheel Other Teams
Stakeholders Project World User World UX Findings Brief User
44. RULE OF THE ROAD #6 Keep it human (centered). The more
personal a story, the more universally relatable.
#uxstorywheel
45. RULE OF THE ROAD #7 Baby, dont fear the pivots Setbacks and
false leads make for moments of truth and triumph. Acknowledge
them. #uxstorywheel
46. BUDDY Story Pattern
47. Detective Story Understand the Problem Buddy Story Build a
Solution Your Team Other Teams Stakeholders Lessons 1 2 3 Measure
Results Your Team Stakeholders Other Teams Empathize with User Give
Meaning to Info Set Common Vision Foster Teamwork Motivate Remember
Vision Understand Reect Set New Vision Your Team Other Teams
Stakeholders PHASEAUDIENCEGOAL
48. Oceans of Change Orders Buddy Story Pattern
49. UX Story Wheel Project World User World UX Other Vendors
Our Team Client StakeholdersBuild a Solution 2 Buddy Story
Set-Up
50. UX Story Wheel Project World User World Buddy Story Act I -
Unlikely Team Finish Line Our Team Other Vendors
51. UX Story Wheel Project World User World Buddy Story Act II
- Petty Rivalry Finish Line Our Team Other Vendors Petty Conict
Them! Us!
52. UX Story Wheel Project World User World Buddy Story Act III
- Bigger Adversary Finish Line Our Team Other Vendors Yikes! Ah-oh!
Acts of God & Man
53. UX Story Wheel Project World User World Buddy Story
Epilogue - Super Team Finish Line Our Team Other Vendors User
Hand-Offs Insight Hand-OffHero! Hero! Onward!
54. Buddy Story Pattern UX Story Wheel Unlikely Team Petty
Rivalry Bigger Adversary Super Team Trigger/ Awareness Tests &
Failures Epic Struggle Return Changed
55. UX Story Wheel Buddy Story Bridge Project World User World
Wireframes UX User Everyone Else
56. UX Story Wheel Buddy Story Bridge Wireframes Persona I love
that! Persona Nice! Persona Thats just what I need!
57. RULE OF THE ROAD #8 Everyone is on a heros journey.
Recognize the other characters in your stories. #uxstorywheel
58. RULE OF THE ROAD #9 Innovation is a risky adventure. The
outcome is unknown. Acknowledge risk in your stories.
#uxstorywheel
59. LESSONS Story Pattern
60. Detective Story Understand the Problem Buddy Story Build a
Solution Your Team Other Teams Stakeholders Lessons Story 1 2 3
Measure Results Your Team Stakeholders Other Teams Empathize with
User Give Meaning to Info Set Common Vision Foster Teamwork
Motivate Remember Vision Understand Reect Set New Vision Your Team
Other Teams Stakeholders PHASEAUDIENCEGOAL
61. And, We Did It Our Way Lessons Story Pattern
62. UX Story Wheel User World Project World 1 2 Measure Results
Understand the Problem Lessons Story Set-Up Build a Solution 3
Engineering Team Founders UX Caw!
63. UX Story Wheel Project World User World 1 Lessons Story Act
I - Before State ? ? Engineering Team Founders UX ?
64. UX Story Wheel Project World User World Build a Solution
Tell the user a new story Build a new experience 2 Lessons Story
Act II - Design Intervention Engineering Team Founders Design
Intervention meUX
65. UX Story Wheel Project World User World Lessons Story Act
III - Product Release Founders 3 Measure Results meUX Engineering
Team ?
66. UX Story Wheel Project World User World Lessons Story
Epilogue - After State Founders 3 Measure Results meUX ? ? ?
Engineering Team
67. Lessons Story Pattern UX Story Wheel Trigger/ Awareness
Tests & Failures Epic Struggle Return Changed Before State
Design Intervention Product Release After State
68. UX Story Wheel Lessons Story Bridge Analytics Bottom Line
Usage Stats Bottom Line
69. UX Story Wheel Im user Insight & Meaning Big Idea Wow!
Lessons Story Bridge Next StepsAnalytics
70. RULE OF THE ROAD #10 Take the entire UX Story Wheel into
account when forming lessons. #uxstorywheel
71. RULE OF THE ROAD #11 Establish the user as a key character
early. It only gets harder. #uxstorywheel
72. EPILOGUE TBD YOUR STORY
73. RULE OF THE ROAD #12 Dont forget your own story. Tell
people what YOUR UXers Journey looks like. #uxstorywheel
74. UX! Oh, I get it Wow! Cool.
75. 150 SPEAR ST, STE. 1500 SF, CA 94105 415.339.1979 |
www.springstudio.com | @SpringUX THANK YOU MARY WHARMBY |
@marywharmby
76. Make your own UX Story Wheel at home with our EZ printable
template! Follow: @marywharmby or #uxstorywheel for details. COMING
SOON
77. 1. People will hear a story whether you tell it or not.
Tell the story you want people to hear. 2. Building on Campbells
Heros Journey makes our UX stories more impactful and relatable to
others. 3. The UXers Journey means simultaneously keeping a foot in
both the user story AND the project story. 4. Your design PROCESS
is your UX Journey PLOT. 5. Ground each artifact story in BOTH the
user and project stories. 6. Baby, dont fear the pivots Setbacks
and false leads make for moments of truth and triumph. Acknowledge
them. #uxstorywheel RULES OF THE ROAD
78. 7. Keep it human (centered). The more personal a story, the
more universally relatable. 8. Everyone is on a heros journey.
Recognize the other characters in your stories. 9. Innovation is a
risky adventure. The outcome is unknown. Acknowledge risk in your
stories. 10. Take the entire UX Story Wheel into account when
forming lessons. 11. Establish the user as a key character early.
It only gets harder. 12. Dont forget your own story. Tell people
what YOUR UXers Journey looks like. #uxstorywheel RULES OF THE
ROAD
79. INSPIRATION & REFERENCES Characters, Emotion &
Viewpoint, Nancy Kress, 2005, Writers Digest Books Customer Journey
Mapping, 2012, Chris Risdon & Todd Wilkens (for their brilliant
Indiana Jones analogy) Five Indispensable Skills for UX Mastery,
Jared Spool, 2010, User Interface Engineering Plot & Structure,
James Scott Bell, 2004, Writers Digest Books The Power of Myth,
Joseph Campbell with Bill Moyers, 1988, Doubleday Resonate: Present
Visual Stories that Transform Audiences, Nancy Duarte, 2010, John
Wiley & Sons, Inc. Story, Robert McKee, 1997, Harper Collins
Storytelling for User Experience, Whitney Quesenbery & Kevin
Brooks, 2010, Rosenfeld Media UX Portfolios: How to tell your
story, Patrick Neeman & Troy Parke, 2010, Slideshare Special
thanks to my very patient colleagues at Spring Studio and
Sketchnote Mornings for their helpful feedback. This talk was
informed and inuenced by the work of many others, most
notably:
80. Story Circle: https://ic.kr/p/aW3w1g Bar:
https://ic.kr/p/5jUQtq Ofce: https://ic.kr/p/5aPvcH Cave Painting:
https://ic.kr/p/d9jBg Joseph Campbell:
http://www.starwars.wikia.com Star Wars: www.cinemablend.com Wizard
of Oz:
http://www.fanpop.com/clubs/the-wizard-of-oz/images/2028395/title/wizard-oz-caps-screencap
Rocky:
http://oppositelock.kinja.com/were-watching-rocky-in-lm-studies-tomorrow-1444676988
Its a Wonderful Life:
http://en.wikipedia.org/wiki/It's_a_Wonderful_Life Avatar:
http://en.wikipedia.org/wiki/Avatar_(2009_lm) Indiana Jones
(jungle):
http://io9.com/why-archeologists-hate-indiana-jones-1636800753
Indiana Jones (classroom):
http://www.themarysue.com/indiana-jones-mystery-solved/ Indiana
Jones (artifact): galleryhip.com Sherlock Holmes:
http://romeodistrictlibrary.org/?attachment_id=4056 Oceans 11:
http://www.zecatalist.com/columns/retro-review-oceans-11/ Mrs
Doubtre: http://abc7.com/archive/9507229/ PHOTOS