![Page 1: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/1.jpg)
The Power of StoryDesigning with empathy and connection
Whitney QuesenberyWQusability and Center for Civic Design
Twitter @whitneyq
![Page 2: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/2.jpg)
Hi!
User research, usability, accessibility Former theatre designer Storytelling as a way to understand users,
culture, and context in UX design Passionate about civic design New book on accessible UX
How about you?
![Page 3: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/3.jpg)
Kevin Brooks
![Page 4: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/4.jpg)
Couriemail.com.au
Stories connect us
![Page 5: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/5.jpg)
Personas & stories communicate patterns
Stories... Store and transmit
knowledge Communicate culture Explore new ideas
They help us… Share information in
memorable form Understand emotion and
desires
5
![Page 6: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/6.jpg)
Too often, "data" looks like this...
![Page 7: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/7.jpg)
And even when it looks like this...
![Page 8: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/8.jpg)
Or this, it still needs a storyteller
http://www.youtube.com/watch?v=jbkSRLYSojo
![Page 9: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/9.jpg)
Stories let us fill in the gaps
http://serendip.brynmawr.edu/bb/blindspot1.html
![Page 10: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/10.jpg)
Stories create relationships
This is the key relationship
![Page 11: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/11.jpg)
A story is shared by everyone who hears it
![Page 12: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/12.jpg)
Stories are building blocks
Kindersandi.moonfruit.com
![Page 13: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/13.jpg)
Explain patterns of use
![Page 14: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/14.jpg)
Communicate context (and emotion)
Ten minutes is not enough. That's Tanner’s opinion about the time limits on using the computer at school.
Last Friday, he started working on a geography assignment and look up some information about the animals in Africa. He had just gotten started when his turn on the computer was up. He’d like to work on it over the weekend, but can’t access the school library. He prints out a few things, and figures he will retype what he’s done when he gets home.
What a bore.
![Page 15: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/15.jpg)
Show action over time
![Page 16: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/16.jpg)
Narrative weaves the user journey into the structure of a site.
![Page 17: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/17.jpg)
Fill in details and scenarios
Rachel, Enthusiastic dreamer28, finished one year at uni, works in an office Lives in North London with a partner Hasn’t settled down to a plan for her lifeInterested in Social Sciences
FIRST CONTACT WITH THE OU: OU ON TVInsomnia led Rachel to the OU, watching programs on the telly. She starts to enjoy the programmes and thinks about doing something to improve her career. It takes her a long time to act on this idea, but she visits an Open Day.
She spends ages thinking about it, sometimes browsing the web site, but also reading the brochures she has taken from the Open Day.
On her third trip to an Open Day, she finally registers for an Openings course that’s about to begin.
![Page 18: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/18.jpg)
Stories can explore unexpected data
Gina gave us the first clue. She was a nurse manager for the county health system. “I’m on the move all day and I have a huge case load. Patients are always throwing new questions at me. Yesterday, I really struggled to sort out a problem one patient was having with side effects.
I speak a little Spanish, but just couldn’t remember the correct medical term to explain a new adjuvant the doctor wanted to try. It was so 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…”
![Page 19: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/19.jpg)
A lens into the data
![Page 20: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/20.jpg)
What is the impact of search on the user experience?
![Page 21: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/21.jpg)
Search and traffic analysisThe top searches are persistent (and have continued over time
With some seasonal variations
![Page 22: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/22.jpg)
The search logs shows a classic “long tail”eggsonionscabbagevinegarpotatosalmon
![Page 23: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/23.jpg)
![Page 24: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/24.jpg)
We had personas
George Martin Margaret
Jason Abila Rachel
![Page 25: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/25.jpg)
We* can use the personas as a lens into the data
* by “we” I mean Viki Stirling and Sarah Allen the maestros of the analytics who did the work
![Page 26: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/26.jpg)
![Page 27: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/27.jpg)
![Page 28: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/28.jpg)
![Page 29: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/29.jpg)
![Page 30: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/30.jpg)
Consolidating knowledgeJulia’s Journal – JuliaAshtonSayers.blogspot.com
![Page 31: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/31.jpg)
Personas explore tensions in the design space
![Page 32: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/32.jpg)
Quantitative and qualitative data work together
DemographicsJourneyMarket segmentsTask analysisSkillsUsability needsOther sites used
![Page 33: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/33.jpg)
Snapshots reinforce the relationships
![Page 34: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/34.jpg)
How will you tell the story?
Mary and Leonard Trujillo – The Mudhead Gallery
![Page 35: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/35.jpg)
Stories are efficient
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.
![Page 36: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/36.jpg)
Each voice is a perspective
Third Person Second Person First Person
Story is told about someone, looking at them from the outside
Story is a conversation between the storyteller and another person
Story is told from the point of view of the main character
For example:A UX person telling stories about how several different people responded to a prototype.
Persona stories, especially if there is more than one
For example: Feedback to a participant or other stakeholder,
“Interviewing a persona”
Talking directly to users of a product
For example: A UX person telling the story of their own reactions.
Retelling a story from the point of view of the original experience.
Maintains a distance between “us” and “them”
Creates a direct connection and invites the other person to respond.
Invites the audience to look at the story through the eyes of
36
![Page 37: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/37.jpg)
3rd person allows you to explain and interpret
Whose words and thoughts are these? Are these things that Mary would
say or are they our interpretation of all the data and stories that went into the Mary persona?
How can we show when we are using her own words?
Does this story invoke research authority- a “realist tale”?
Mary works as a nurse in a hectic women’s health center for a low-income neighborhood. …Her questions about cancer mostly come from her patients, or from wanting to be sure that she catches any early signs.…She has learned conversational Spanish, so she can talk to her patients for whom this is a first language. …When she looks things up on the Web, she tends to go back to familiar sites
John van Mannen – Tales from the Field
![Page 38: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/38.jpg)
2nd person creates conversation
How can you show the conversation?Interviews maintain a separationConversations can also happen between two personas
Persona by Caroline Jarrett for the Open University
![Page 39: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/39.jpg)
1st person invites identity
You represent the persona and tell the story from their point of view. Lets you “get into the head” of the story (an “impressionist tale”)
OR
First person can tell your story of your experience with the person (a “confessional tale”)
![Page 40: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/40.jpg)
Stories are not a detailed task analysis
Focus on the story Establish the scene with imagery What’s the time-frame? What’s the emotional context
Think about the persona’s perspective How do they see the events or interaction? What words do they use? Style of language? What are the boundaries of the story from their point of
view? (Hint: it might not be your product!)
Don’t use the story to describe the user
![Page 41: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/41.jpg)
Personas and their stories give us...A richer understanding of context Innovation from real needsMore persuasive ideasPeople in the center of the process
Coral reef in Ras Muhamad Nature Park
![Page 42: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/42.jpg)
Screen: Globalgiving.comFor more::http://succeedwithsuccessstories.com/dr-spocks-guide-to-improving-your-charitable-appeals/
Stories create empathy
![Page 43: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/43.jpg)
Stories change how we think
Our experience of the world is shaped by our interpretations of it, the stories we tell ourselves.... so the key to personal transformation is story transformation.- Timothy Wilson, RedirectScreen from Tripit
![Page 44: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/44.jpg)
Personas (and stories) travel thru the UX journey
Specify
Understand
Design
Evaluate
Gather information - both qualitative and quantitative
Reflect the breadth and depth of the audience
Explore current problems and new design ideas
Stories can be a vehicle for evaluation, or a check on usability test participants
![Page 45: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/45.jpg)
A story is successful when it gets repeated
Based on real data
The stories you want told
Generate insights and empathy
& that lead to action!
![Page 46: The power of stories: creating empathy and connection](https://reader033.vdocuments.site/reader033/viewer/2022061103/53efcb248d7f7289708b62f4/html5/thumbnails/46.jpg)
Storytelling for User Experiencewith Kevin BrooksGlobal UXwith Daniel SzucA Web for Everyonewith Sarah Horton
http://rosenfeldmedia.com/books/a-web-for-everyone/