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

THE SET-UP AKA The Hook
ACT I

UX
What…
Huh? ?

Why?
But…
Zzzzz
Huh?
UX

Wow!
…and then…
Fun…
Cool!

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

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

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

ACT II THE UXer’s
JOURNEY UX Story Wheel

UX
Story
Wheel

UX Story Wheel Needs Goals
Outcomes Obstacles Delights

UX Story Wheel Trigger Challenge
Awareness Design Intervention Outcome

UX Story Wheel User World
Trigger Challenge Awareness Design Intervention Outcome

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

UX Story Wheel User World
You Project World Design Intervention

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

UX Story Wheel User World
Project World Design Intervention

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

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

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

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

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

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

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

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

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

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

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

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

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

ACT III THE UX-FILES Tell
Me What You Do

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

DETECTIVE
Story Pattern

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

The Case of the User
and the ATM Detective Story Pattern

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

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

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

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

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

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

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

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

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

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

BUDDY
Story Pattern

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

Oceans of Change Orders Buddy
Story Pattern

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

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

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

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

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!

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

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

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

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

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

LESSONS
Story Pattern

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

And, We Did It Our
Way… Lessons Story Pattern

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!

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

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

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

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

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

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

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

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

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

EPILOGUE
TBD
YOUR STORY

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

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

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

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

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

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

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:

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