The document discusses how storytelling can make designers better at their jobs. It presents a "UX Story Wheel" model for crafting stories around user experience design projects. The wheel includes elements like the user world, project world, and design interventions. It also describes three common story patterns - detective stories, buddy stories, and lessons stories - that follow archetypes like questioning, investigation, and resolving issues. The presentation ends by sharing 12 "rules of the road" for using stories in UX design work.

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!

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

10. 2. Trigger/
Call to
Action
THE HERO’S
JOURNEY 3. Gaining
Awareness
1. Before
State
6. Return
Changed
5. Ultimate
Test
4. Tests &
Failures
Abyss
Death & Rebirth

12. RULE OF THE ROAD #2
Building on Campbell’s Hero’s
Journey makes our UX stories more
impactful and relatable to others.
#uxstorywheel

13. ACT II
THE UXer’s
JOURNEY
UX Story Wheel

14. UX
Story
Wheel

15. UX
Story
Wheel
Needs
Goals
Outcomes
Obstacles
Delights

16. UX
Story
Wheel
Trigger
Challenge
Awareness
Design
Intervention
Outcome

17. UX
Story
Wheel
User World
Trigger
Challenge
Awareness
Design
Intervention
Outcome

18. UX
Story
Wheel
User World
Stakeholders
You
Teams
Project World
BUSINESS
TECHNOLOGY
Design
Intervention

19. UX
Story
Wheel
User World
You
Project World
Design
Intervention

21. RULE OF THE ROAD #3
The UXer’s Journey means
simultaneously keeping a foot in both
the user story AND the project story.
#uxstorywheel

22. UX
Story
Wheel
User World
Project World
Design
Intervention

23. 1
3
UX
Story
Wheel
User World
Project World
Measure
Results
Understand
the Problem
2Design
Intervention
Build a
Solution

24. UX
Story
Wheel
User World
Project World
Hear the
user’s story
Tell the user’s
story
Envision a
new user’s story
3
1
Understand
the Problem
2Design
Intervention

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

26. UX
Story
Wheel
User World
Get a
reaction
Learn the
right
lessons
Project World
3
Measure
Results
2
1
Design
Intervention

27. RULE OF THE ROAD #4
Your design PROCESS is your
UX story PLOT.
#uxstorywheel

28. UX
Story
Wheel
User World
Stakeholders
Project World
You
1
3
2Design
Intervention

30. Bridge
Design
Artifact
UX
Story
Wheel
User World
Stakeholders
Project World
You
1
3
2

31. Personas
Journey Maps
Flows
Analytics
UX
Story
Wheel
User World
You
Project World
1
3
2
Wireframes
Prototypes
& Product
IA

32. Personas
Journey Maps
Flows
IA
Wireframes
Prototypes
& Product
Analytics
UX
Story
Wheel
User World
Project World
1
3
2
You

33. User World
User
UX
Story
Wheel
Project World
Bridge
Design
Artifact
You

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

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

36. Ground each artifact story in BOTH
the user and project stories.
RULE OF THE ROAD #5
#uxstorywheel

37. ACT III
THE UX-FILES
Tell Me What You Do

38. UX
Story
Wheel
3 Story Patterns
Buddy
Story
Lessons
Story
Detective
Story
Project World
User World
1
2
3

39. DETECTIVE
Story Pattern

40. 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
Reflect
Set New Vision

41. The Case of the User and the ATM
Detective Story Pattern

42. UX
Story
Wheel
Project World
User World
Other Teams
Stakeholders
UX
Users
Understand
the Problem
1
Detective Story Set-Up

43. UX
Story
Wheel
Project World
Trigger
Hypothesize & Plan
Investigate
Stakeholders
What, how, why?
Hmm…
UX
Detective Story Act I - Question
User
World

44. UX
Story
Wheel
Hypothesize & Plan
Investigate
Follow Leads
Setbacks
& Pivots
UX
Doh!
Detective Story Act II - Investigation
Project World
User
World

45. UX
Story
Wheel
Hypothesize & Plan
Investigate
Follow Leads
Setbacks
& Pivots
Aha!
Eureka
Moment!
UX
Detective Story Act II - Investigation
Project World
User
World

46. UX
Story
Wheel
Findings
Brief
UX
Detective Story Act III - Big Reveal
Project World
User
World

47. UX
Story
Wheel
Findings
Brief
UX
Detective Story Epilogue - Outcome
Project World
User
World
Other Teams
Yay!
Stakeholders
Onward!

48. Detective Story Pattern
UX
Story
Wheel
Question Investigation Big Reveal Outcome
Trigger/
Awareness
Tests &
Failures Epic Struggle Return
Changed

49. Detective Story Bridge
UX
Story
Wheel
Other Teams
Stakeholders
Project World
User
World
UX
Findings
Brief
User

50. RULE OF THE ROAD #6
Keep it human (centered).
The more personal a story, the
more universally relatable.
#uxstorywheel

51. RULE OF THE ROAD #7
Baby, don’t fear the pivots…
Setbacks and false leads make for
moments of truth and triumph.
Acknowledge them.
#uxstorywheel

52. BUDDY
Story Pattern

53. 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
Reflect
Set New Vision
Your Team
Other Teams
Stakeholders
PHASEAUDIENCEGOAL

54. Oceans of Change Orders
Buddy Story Pattern

55. UX
Story
Wheel
Project World
User World
UX
Other Vendors
Our Team
Client StakeholdersBuild a
Solution
2
Buddy Story Set-Up

56. UX
Story
Wheel
Project
World
User
World
Buddy Story Act I - Unlikely Team
Finish
Line
Our Team Other Vendors

57. UX
Story
Wheel
Project
World
User
World
Buddy Story Act II - Petty Rivalry
Finish
Line
Our Team Other Vendors
Petty
Conflict Them!
Us!

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

59. 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!

60. Buddy Story Pattern
UX
Story
Wheel
Unlikely
Team
Petty
Rivalry
Bigger
Adversary
Super
Team
Trigger/
Awareness
Tests &
Failures Epic Struggle Return
Changed

61. UX
Story
Wheel
Buddy Story Bridge
Project
World
User
World
Wireframes
UX
User
Everyone Else

62. UX
Story
Wheel
Buddy Story Bridge
Wireframes
Persona
I love that!
Persona
Nice!
Persona
That’s just
what I need!

63. RULE OF THE ROAD #8
Everyone is on a hero’s journey.
Recognize the other characters
in your stories.
#uxstorywheel

64. RULE OF THE ROAD #9
Innovation is a risky adventure.
The outcome is unknown.
Acknowledge risk in your stories.
#uxstorywheel

65. LESSONS
Story Pattern

66. 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
Reflect
Set New Vision
Your Team
Other Teams
Stakeholders
PHASEAUDIENCEGOAL

67. And, We Did It Our Way…
Lessons Story Pattern

68. 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!

69. UX
Story
Wheel
Project World
User World
1
Lessons Story Act I - Before State
?
?
Engineering Team
Founders
UX
?

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

71. UX
Story
Wheel
Project World
User World
Lessons Story Act III - Product Release
Founders
3
Measure
Results
meUX
Engineering Team
?

72. UX
Story
Wheel
Project World
User World
Lessons Story Epilogue - After State
Founders
3
Measure
Results
meUX
?
?
?
Engineering Team

73. Lessons Story Pattern
UX
Story
Wheel
Trigger/
Awareness
Tests &
Failures Epic Struggle Return
Changed
Before
State
Design
Intervention
Product
Release
After
State

74. UX
Story
Wheel
Lessons Story Bridge
Analytics Bottom Line
Usage Stats
Bottom Line

75. UX
Story
Wheel
Im
user
Insight
& Meaning
Big Idea
Wow!
Lessons Story Bridge
Next StepsAnalytics

76. RULE OF THE ROAD #10
Take the entire UX Story Wheel
into account when forming lessons.
#uxstorywheel

77. RULE OF THE ROAD #11
Establish the user as a key
character early.
It only gets harder.
#uxstorywheel

78. EPILOGUE
TBD
YOUR STORY

79. RULE OF THE ROAD #12
Don’t forget your own story.
Tell people what YOUR UXer’s Journey
looks like.
#uxstorywheel

80. UX!
Oh, I get it…
Wow! Cool.

81. 150 SPEAR ST, STE. 1500 SF, CA 94105
415.339.1979 | www.springstudio.com | @SpringUX
THANK YOU
MARY WHARMBY | @marywharmby

82. Make your own
UX Story Wheel at home
with our EZ printable template!
Follow:
@marywharmby or #uxstorywheel
for details.
COMING SOON

83. 1. People will hear a story whether you tell it or not. Tell the story you
want people to hear.
2. Building on Campbell’s Hero’s Journey makes our UX stories more
impactful and relatable to others.
3. The UXer’s 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, don’t fear the pivots… Setbacks and false leads make for
moments of truth and triumph. Acknowledge them.
#uxstorywheel
RULES OF THE ROAD

84. 7. Keep it human (centered). The more personal a story, the more
universally relatable.
8. Everyone is on a hero’s 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. Don’t forget your own story. Tell people what YOUR UXer’s Journey
looks like.
#uxstorywheel
RULES OF THE ROAD

85. INSPIRATION & REFERENCES
Characters, Emotion & Viewpoint, Nancy Kress, 2005, Writer’s 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, Writer’s 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 influenced by the work
of many others, most notably:

86. Story Circle: https://flic.kr/p/aW3w1g
Bar: https://flic.kr/p/5jUQtq
Office: https://flic.kr/p/5aPvcH
Cave Painting: https://flic.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-film-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_film)
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
Ocean’s 11: http://www.zecatalist.com/columns/retro-review-oceans-11/
Mrs Doubtfire: http://abc7.com/archive/9507229/
PHOTOS