Slides from the half-day workshop on using stories in user experience from UXLX

1. Storytelling
for User Experience
A half-day workshop
Whitney Quesenbery
WQusability
@whitneyq

2. Hi!
 User researcher
 Theatre designer
 Storytelling as a way to understand user,
culture, and context in UX design
 Researcher in new UI technologies
 Performance storyteller
 Storytelling as a pivotal part of the creation,
performance, and design process.
 How about you?

3. Stories
connect
us
Stories
make
UX
personal.
They
remind
us
that
everything
we
make
is
made
for
a
real
person.
@ianeverdell

4. We all tell stories
You already know what a
story is…
...but you may not know how
to use stories effectively in
your work.
4

5. Claude Shannon was wrong*
Stories are not a broadcast transmission. **
* At least about stories.
** Both of these pictures are wrong
5

6. Stories create relationships
Story
Storyteller Audience
6

7. A story is shared by everyone who hears it
First the storyteller shapes
the story
As they listen, the audience
members form an image of the
story in their own minds.
7

8. The audience is part of the story
The storyteller
and the audience
affect each other
and shape the
story they create.
The most important
relationship is
between the audience
and the story.
8

9. Stories close a gap
User
Story as
collected When you retell a story,
you make a connection
between your
colleagues and the
person you heard the
Story as
UX person
re-told
story from.
Our colleagues
(audience)
9

10. Stories communicate efficiently
Tanner was deep into a Skatepunkz game—all
the way up to level 12—when he got a buddy
message from his friend, Steve, with a question
about his homework.
He looked up with a start. Almost bedtime and
his homework was still not done. Mom or Dad
would be in any minute.
 What can we learn about Tanner from
this short story?
10

11. Storytelling
in
UX
A
good
story
will
evoke
emo>on.
We
humans
remember
emo>ons
best.
@mike_me_up

12. Storytelling is already part of UX
Collecting stories helps us
understand people and Understand
goals, context....
Finding themes and
patterns is the first step in
identifying requirements
Evaluate Success? Specify
Usability evaluation is
a way of trying the
story out to see if it
works for other Design
people, too. Design tells a new story that
changes something about the world
12

13. Storytelling is already part of UX…
We just don’t call them stories
User research
Ethnography
Understand Personas
Contextual inquiry
Site visits Affinity analysis
Card sorting
Stories we share
Evaluate through the user Specify
experience
Usability Testing
Walk-throughs
Analytics Scenarios
Design Storyboards
Wireframes
Prototypes
13

14. Stories have many purposes in UX
 Meeting the users
 Illustrating user needs
 Points of pain
 Brainstorming
 Success stories
 Design exploration
 Evaluation task
14

15. Stories
start
with
listening
Storytelling
is
a
two-­‐way
mirror.
You
see
yourself
reflected
in
the
experience
of
others.
@nathangibbs

16. FIGURE 2-6
Each person hears a story in their own way
If it was easy to get
info about the next
bus, she would not
What’s her rush?
have to worry.
London trains run well
into the evening, even if
there are only 2 an hour
…After the show,
Jane couldn’t decide
whether to take a taxi or a
bus across town…She really
didn’t want to miss the
10:45pm train…
I bet she doesn’t want to
miss it. On my line, there’s
only one train after 9pm.
Miss that, and you’re
sleeping in the station.
16

17. Listening Exercise
 Two roles: listener and speaker
Decide who will go first.
 Speaker’s job - tell the other person about something
(we’ll tell you what)
 Listener’s job - just listen.
Don’t have to talk, interrupt or fill silences
Tell the other person about a time when everything
seemed to go right... or wrong.
17

18. Be an active listener
 Show that you are aware of the other person
 Be quiet. Give the person time to think as
well as to talk.
 Use verbal and non-verbal gestures to “take
your turn” in the conversation without
redirecting it.
 Show warmth and caring about what you are
hearing.
 Reflect back what you hear, when
appropriate, by responding to what you
heard or restating
18

19. User
Story as
Ask the questions
collected that encourage stories
“Have you ever [done something]?”
“How often do you [do that thing]?”
“What makes you decide to [do that thing]?”
“Where do you [do that thing]?”
+
Story as
UX person
“When was the
re-told last time you [did that thing]?”
Our colleagues
(audience)
+ “Tell me about that.”
(and really listen)
19

20. Listen for juicy fragments
Any time you listen to someone you can collect stories
Look for stories that….
 You hear from more than one source.
 Have a lot of action detail.
 Have details that illuminate user data
 Surprise or contradict common beliefs
 And are clear, simple, and compelling.
20

21. Unexpected stories...
 Use data to set
We were ready to be disappointed.
up the story
Nurses were more interested in people
Merge demographic
than technology. and other statistics
with a human
They used the Web, of course, but didn’t situation
see social media as work. Only a few of
them had phones that did more than
make phone calls. Some didn’t even have
Web access except at home.
So we were taken by surprise when one
nurse after another got enthusiastic
about some concept sketches for mobile
health sites.
21

22. Unexpected stories
Gina gave us the first tidbit. She was a  Character
nurse manager for the county health The persona creates
the perspective and
system. “I’m on the move all day and I
relationship
have a huge case load. Patients are
always throwing new questions at me.
Yesterday, I really struggled to sort out a  Imagery
Suggests the
problem one patient was having with emotional
side effects. I speak a little Spanish, but connections
just couldn’t remember the correct
medical term to explain a new adjuvant  Context
the doctor wanted to try. It was so Set up the problem
frustrating.”
She pointed at the sketch. “I don’t have
a phone that will do all that - yet, but if
it’s really that simple…”
22

23. Stories
introduce
us
to
people
Storytelling
is
how
we
make
sense
of
the
world:
re-­‐imagining
our
everyday
lives
as
an
experience
to
be
shared
with
others.
@otrops

24. Stories turn a profile
into a persona
Aged 30-45
45% married with children
65% college educated
Use the web 3-5 times a week
Elizabeth, 32 years old
Married to Joe, has a 5-year old son,
Justin
Attended State College, and manages
her class alumni site
Uses Google as her home page, and
reads CNN online
Used the web to find the name of a
local official
24

25. Create a story that introduces a user or
explains a user need
 Start from an experience in your work.
Think about a specific person or event.
Maybe it changed your own thinking
Maybe a story about ...
 How someone used your product
 A need they didn’t even know they had
 A delightful experience
 A painful experience
 Use the Story Basics cards to gather
your ideas about the story
 Craft story you can tell in ~ 2 minutes
that introduces that person
25

26. Sharing your story
 Share your story with someone else
 Find a partner.
Each of you will tell your story to the other person
And respond with an appreciation
 I’ll call ‘time’
 If you finish before the timer, just wait.
If you don’t get done in time, wrap up as quickly
as you can.
26

27. First story feedback
 How did that go
 Story tellers:
Were you able to tell the story you wanted to tell?
 Story listeners:
What did you learn from the story?
Did the story you heard suggest another story?
 Can you retell the story you heard?
 Is it easier to remember a complex situation when it’s part of a story?
27

28. What makes a good story?
Stories have
 Time and place
 Characters
 Events
But they also have
 Emotions
 Imagery
 Interaction
28

29. Add context and imagery
 Find a new partner
 Pick 2-3 cards from
these groups to
see what ideas
they spark for ways
to add them to
your story.
 Share your stories
(just like last time)
29

30. Feedback
 How did that go?
 How does it feel to have a UX story include imagery and emotion?
 How do you include points of emotional connection when you tell a story
in a business setting?
 What do you remember most from the stories you heard?

30

31. Stories
can
be
told
many
ways
Storytelling
is
a
two-­‐way
mirror.
You
see
yourself
reflected
in
the
experience
of
others.
@nathangibbs

32. Story structures and perspectives
 Some stories are a simple narrative
 Prescriptive structure
 Framing structures create contrast
 Me - Them - Me
 Here - There - Here
 Now - Then - Now
 Stories can explain a situation or set a context
 Layered
 Contextual interlude
 Journeys show obstacles overcome
 A hero’s journey
32

33. The hero’s journey
33

34. Change perspective or structure
 Use the Story Structure cards
 Which structure matches the story
best?
 With a partner, try telling the
same story twice, from two
different perspectives.
34

35. Feedback
 How does the story change when the perspective changes?
 Does it have a different meaning?
 Did you want to tell it in a new way?
 Who is the hero of the story?
35

36. From
stories
to
innova>on
Stories
help
us
empathize
and
experience
another
person’s
condi>on.
Stories
appeal
to
our
emo>ons
and
drive
us
to
ac>on.
@balchenn

37. Stories can spark innovation
They can start from...
 Stories you hear during from (or
about) users
 Explore new perspectives on a
problem or goal
 Personas
 Show their behavior in new
situations
 Data
 Explore the story behind the data
 Juicy fragments
 Explain the unexpected
37

38. Juicy fragments can grow into a story
le
“When I’m ts of p e op
waiting eeing lo form. It
f or a bu s, I
wi “I love s tro plat
a way to kn sh I had e
on the m eans a train w
ill
ow when m
it will arriv
e.” usually n.”
o
a rrive so
“When the
bu
nning late, I can
drive marked, I a s stop isn’t well
“If I’m ru ain.” lways worr
y whether I
if I’m go ing to miss the tr in the right
place.” ’m
38

39. Stories explore situations and context
 Context
There is nothing more frustrating than
Set up the problem
waiting for the bus. On a suburban road.
In the snow.
 Character
The persona creates
Sandra didn’t like snow much anyway, the perspective and
but she liked standing at her bus stop relationship
even less, with snow oozing into her
boots and cars splashing ice at her.
 Imagery
Suggests the
Had she missed it? Was it right around emotional
the corner? Was it even running with all connections
this snow?
Was anything going to get her to work
on time today?
39

40. Stories explore situations and context (2)
 Context
Much as Ian loved staying out with his
Different setting
friends until the pubs closed, he hated
getting back home late at night.
 Character
Different person and
Was the train still running, or did he situation
have to trudge over to the stop for the
night bus -- 5 blocks that seemed much
longer after a few beers.  Same basic problem
And there was the tedium of watching
the bus wind through the streets.
40

41. Stories start brainstorming
Signs on the platform
with when the train will
arrive.
Text message with
the time the next
bus will arrive.
App that taps into transit
information for bus or train
locations.
Website with Bus checks off its
information arrival on the
schedule.
41

42. A new ending to Sandra’s story
After she’d waited for a few minutes,  Sets up a possible
Sandra brushed enough snow off the sign solution
to be able to read the stop number.
She had the RideFind number in her
phone’s contact list, so all she had to do
was enter the number of the bus stop into a
text message.
A couple of seconds later, the reply came
back. The bus was 10 minutes away,
running late. She’d get to work this
morning.
Sign for a
service in
Washington DC
42

43. Craft stories for brainstorming
 Start from a juicy fragment,
analysis data, or a usability
problem
 Construct a story that sets up the
context...
but does not provide a solution.
 Be sure you ground the story with
a character (or persona), a context
(place, time, situation), a
motivation, and a problem.
43

44. Feedback
 What happens if you write the story for a different persona?
 Or change
 a starting assumption
 technology enablers
 rules or other constraints
44

45. Incorpora>ng
stories
into
UX
deliverables
Every
interac>on
is
a
story,
with
the
user
as
the
"star."
This
appeals
to
our
human
need
to
be
at
the
center
of
every
experience.
@dgelman

46. There are many ways to tell a story
 Elevator stories
 Stories you tell around a table
 Written stories
 Presenting a report
 Comic or storyboard
 Visual collage
 In a formal presentation
46

47. Illustrate problems as a story
47

48. Show the interaction as a storyboard or comic
48

49. Weave stories into your reports
49

50. Stories
as
usability
test
tasks
Stories
make
things
meaningful,
moving
and
memorable.
@iaexperience

51. Stories can be test scenarios
 Test scenarios let the
participant “finish the story”
 They create a realistic
context because they are
based on real stories.
 They give you a range of
stories and perspectives to
draw on.
51

52. Stories for evaluation create a starting point
 You can create a story that provides the motivation, but
allows variation in how the scenario is completed
Another person just got promoted  Motivation
ahead of you. You know you are good at Create a story for
your job but notice that everyone else motivation, or build one
has a degree in business. You are based on what you know
about them
thinking about whether this is a good
option for you.
 Goals
What questions do you need to answer Let them identify their
goals in this scenario
first?
(OK). Let’s see if the local college has a  And then, get them started
program that will work for you. in meeting their goals
52

53. Create a usability test scenario
 Start from one of your stories, and
turn it into a test scenario
 What is the basic scenario you want
the participant to complete?
 How much can the scenario vary
based on their specific interests?
 Are there different motivations or starting
points?
 Are there many things they can find, use or
buy that they can choose from?
 How much variation is there in how the
scenario can be completed?
53

54. Stories
can
make
your
UX
work
richer
and
more
persuasive
Stories
take
our
audience
on
a
journey
and
enable
leaps
of
faith.
@MarkErhardt

55. Stories use pull, not push, to persuade
They let your audience think
about something (new)…
In a realistic situation
With a compelling character
and perspective
And imagine how it will solve a
problem
55

56. A story is successful when it gets repeated
Think carefully about what
stories you want retold.
Look for stories that are
 Based on real data
 The stories you want told
 Generate insights and empathy
56

57. Stories add depth to UX work
If you craft and use stories in a conscious way, you will
 Add a richer understanding of users to your design process
 Find new design ideas more easily
 Be more persuasive about innovative ideas
 Enhance the usability work you are already doing
 Bring people into the center of the process
57

58. Thank you
Storytelling for User Experience:
Crafting stories for better design
Whitney Quesenbery & Kevin Brooks
whitneyq@wqusability.com
brooks@media.mit.edu
Blog and book site
www.rosenfeldmedia.com/books/storytelling/
Illustrations by Calvin C. Chan available at
www.flickr.com/photos/rosenfeldmedia/
58