tell me what you do: how storytelling makes you a better designer

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

http://www.apple.com

THE SET-UPAKA The Hook

ACT I

UXWhat

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 HEROS 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 Campbells Heros Journey makes our UX stories more

impactful and relatable to others.

#uxstorywheel

ACT II

THE UXers JOURNEYUX Story Wheel

UX Story Wheel

UX Story Wheel

NeedsGoalsOutcomes

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 UXers 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 users story

Tell the users story

Envision a new users story

3

1



UX Story Wheel

Tell the user a

new storyBuild a new experience

User World

Project World

1

Build a Solution

2

3

Design Intervention

UX Story Wheel

User WorldGet 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


Bridge Design

Artifact

UX Story Wheel

User World

Stakeholders

Project World

You

1

3

2

PersonasJourney Maps

Flows

Analytics

UX Story Wheel

User World

You

Project World

1

3

2

Wireframes

Prototypes & Product

IA

PersonasJourney 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-FILESTell Me What You Do

UX Story Wheel

3 Story Patterns

Buddy Story

Lessons Story

Detective Story

Project World

User World1

2

3

DETECTIVEStory Pattern

PHA

SEA

UD

IEN

CEG

OAL

Your Team

Other TeamsStakeholders

Detective Story


Empathize with User Give Meaning to Info Set Common Vision

Buddy Story

Build a Solution

Your TeamOther Teams

Stakeholders

Lessons

1 2 3

Measure Results

Your TeamStakeholders

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


1

Detective Story Set-Up

UX Story Wheel

Project World

Trigger

Hypothesize & Plan

Investigate

Stakeholders

What, how, why?

Hmm

UX

Detective Story Act I - QuestionUser 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, dont fear the pivots Setbacks and false leads make for

moments of truth and triumph. Acknowledge them.

#uxstorywheel

BUDDYStory Pattern

Detective Story


Buddy Story

Build a Solution


Stakeholders

Lessons

1 2 3

Measure Results


Other Teams



Remember Vision

Understand Reflect

Set New Vision

Your Team


PHA

SEA

UD

IEN

CEG

OAL

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


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

Thats just what I need!

RULE OF THE ROAD #8

Everyone is on a heros 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

LESSONSStory Pattern

Detective Story


Buddy Story

Build a Solution


Stakeholders

Lessons Story

1 2 3

Measure Results


Other Teams



Remember Vision

Understand Reflect

Set New Vision

Your Team


PHA

SEA

UD

IEN

CEG

OAL

And, We Did It Our Way Lessons Story Pattern

UX Story Wheel

User World

Project World

1

2

Measure Results


Lessons Story Set-Up

Build a Solution

3

Engineering Team

Founders

UX

Caw!

UX Story Wheel

Project World

User World1

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


Return Changed

BeforeState

Design Intervention

Product Release

After State

UX Story Wheel

Lessons Story Bridge

Analytics Bottom Line

Usage Stats

Bottom Line

UX Story Wheel

Im

userInsight

& 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


Establish the user as a key character early.

It only gets harder.

#uxstorywheel

EPILOGUE

TBDYOUR STORY


Dont forget your own story. Tell people what YOUR UXers 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 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

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

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 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 Oceans 11: http://www.zecatalist.com/columns/retro-review-oceans-11/ Mrs Doubtfire: http://abc7.com/archive/9507229/

PHOTOS

https://flic.kr/p/aW3w1ghttps://flic.kr/p/5jUQtqhttps://flic.kr/p/5aPvcHhttp://wwwhttp://starwars.wikia.comhttp://www.cinemablend.comhttp://en.wikipedia.org/wiki/Avatar_(2009_film)http://io9.com/why-archeologists-hate-indiana-jones-1636800753http://galleryhip.comhttp://romeodistrictlibrary.org/?attachment_id=4056http://www.zecatalist.com/columns/retro-review-oceans-11/http://abc7.com/archive/9507229/