Storytelling Methods for Experience Design by Anna Dahlström | @annadahlstrom @uxfika Agile Scotland, 11 March 2019 @annadahlstrom
A presentation at Agile Scotland in March 2019 in Edinburgh, UK by Anna Dahlström
Storytelling Methods for Experience Design by Anna Dahlström | @annadahlstrom @uxfika Agile Scotland, 11 March 2019 @annadahlstrom
In all good stories things happen for a reason www.flickr.com/photos/pulpolux/3692396234 @annadahlstrom
Every aspect of the experience should be carefully designed https://www.flickr.com/photos/129843989@N07/34422951152/ @annadahlstrom
Good stories connect with us emotionally Image from Google xxx @annadahlstrom
Every (part of a) product or service tells (part of ) a story Photo by NEW DATA SERVICES on Unsplash @annadahlstrom
https://commons.wikimedia.org/wiki/File:Hero%C2%B4s_Journey.jpg @annadahlstrom
We have a tendency to jump into solution mode Photo by rawpixel on Unsplash @annadahlstrom
Storytelling helps us understand the context www.flickr.com/photos/22309110@N03/35090792306/ @annadahlstrom
“ Historically, stories have always been igniters of action, moving people to do things. ” - Peter Guber www.flickr.com/photos/g-ratphotos/3404474275 @annadahlstrom
“ Experiences matter. Experiences are journeys. Journeys are designed. ” - Strategy + business Photo by Daria Nepriakhina on Unsplash @annadahlstrom
Storytelling methods for experience design Identify & understand the problem space Define & deliver the experience Present & analyse the outcome @annadahlstrom
“ The whole of a story is that which have a beginning, a middle and an end ” - Aristotle Image via Shutterstock @annadahlstrom
z Dramaturgy knowing how to apply & structure elements to tell a story @annadahlstrom
Three act structure PLOT POINT ONE inciting incident PLOT POINT TWO mid point climax confronts the main character tries to solve the problem but don’t yet have the skills the dramatic question is answered Act one Act two Act three Setup Confrontation Resolution @annadahlstrom
Source: www.khanacademy.org/partner-content/pixar/storytelling/story-structure/v/piab-storystructure @annadahlstrom
Source: www.khanacademy.org/partner-content/pixar/storytelling/story-structure/v/piab-storystructure @annadahlstrom
Structure is about what you’re going to tell your audience when @annadahlstrom
Source: http://www.openculture.com/2014/02/kurt-vonnegut-masters-thesis-rejected-by-u-chicago.html @annadahlstrom
The structure of a typical purchase journey Awareness Consideration PLOT POINT ONE 2. Starts to consider inciting incident confronts the main character Purchase PLOT POINT TWO 4. Makes a decision mid point tries to solve the problem but don’t yet have the skills
Map out the experience Awareness Purchase PLOT POINT ONE Delight Feel good Hygiene Consideration PLOT POINT TWO Reads a review PLOT POINT ONE Hears about it Act one Setup PLOT POINT TWO Decides to buy Receives it Looks it up inciting incident Post.. Does more research Compares it to similar products mid point Act two Confrontation Pays for it climax Act three Resolution
Without characters there is no story Borrowed from Google @annadahlstrom
The protagonist + @annadahlstrom
The protagonist + 1. The main characters 2. Supporting characters 3. Sub-plot characters 4. One-string characters @annadahlstrom
Traditionally we think of these @annadahlstrom
The ‘eight sequences’ approach from the early days of film https://www.flickr.com/photos/rhinoneal/4145426172/ @annadahlstrom
A sequence is series of related scenes that are tied together by location and/ or time and/ or overall intent of the hero/ heroine and generally only follows one line of action. Each sequence is a story in and of itself with a beginning, a middle and an end. https://www.flickr.com/photos/rhinoneal/4145426172/ @annadahlstrom
Onboarding: Deciding to sign up → Learning about the app → First use Making a reservation: Researching places → Deciding on a place → Making the reservation @annadahlstrom
Act 1: Beginning Act 2: Middle Act 3: End What’s the conflict? What happens next? What’s the resolution? Awareness Realises need -> Starts to consider -> Decides to look into it Consideration Decides to research -> Compares products -> Makes a decision Purchase Adds to basket -> Registers & starts checkout -> Pays -> Gets a confirmation Stage/ Act @annadahlstrom
Does the page tell a story if you strip away all the styling? Photo by rawpixel on Unsplash @annadahlstrom
” How would I explain to a friend, in a conversation or in an email, this thing/topic/ product/story I am trying to communicate? ” - UX Collective Screenshot UX Collective - Storyframes before wireframes @annadahlstrom
“ I also accompany every page’s spreadsheet with a list of: • mindsets that users bring to these pages • tasks that the page can complete for users • goals that the page must fulfill for the organization ” - Josh Clark, big medium https://bigmedium.com/ideas/only-one-deliverable-matters.html @annadahlstrom
“ I also accompany every page’s spreadsheet with a list of: • mindsets that users bring to these pages • tasks that the page can complete for users • goals that the page must fulfill for the organization ” - Josh Clark, big medium https://bigmedium.com/ideas/only-one-deliverable-matters.html @annadahlstrom
“ I also accompany every page’s spreadsheet with a list of: • mindsets that users bring to these pages • tasks that the page can complete for users • goals that the page must fulfill for the organization ” - Josh Clark, big medium https://bigmedium.com/ideas/only-one-deliverable-matters.html @annadahlstrom
The purpose of this page is to… As a first time visitor* I should be able to… As a returning visitor* I should be able to…
“ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width. ” - Trent Walton @annadahlstrom
“ Great design connect us emotionally to a product. Within milliseconds, we form opinions that influence our engagement and understanding of what we see. ” - Adam Churchill, UIE Photo by John Schnobrich on Unsplash @annadahlstrom
Everything is there for a reason https://www.flickr.com/photos/sfllaw/185059759/ @annadahlstrom
Rail Europe Experience Map Guiding Principles People choose rail travel because it is convenient, easy, and flexible. Rail booking is only one part of people’s larger travel process. People build their travel plans over time. People value service that is respectful, effective and personable. Customer Journey STAGES Research & Planning RAIL EUROPE Shopping Enter trips Research destinations, routes and products Destination pages Review fares Select pass(es) Confirm itinerary Post-Booking, Pre-Travel Delivery options Payment options Review & confirm Change plans Map itinerary (finding pass) The need to map is greater than ever before THINKING FEELING EXPERIENCE place for site seeing and activities? • I’m excited to go to Europe! • Will I be able to see everything I can? • What if I can’t afford this? • I don’t want to make the wrong choice. E-ticket Print at Station Print e-tickets at home View maps Paper tickets arrive in mail Look up timetables Research hotels • I want to get the best price, but I’m willing to pay a little more for first class. • How much will my whole trip cost me? What are my trade-offs? • Are there other activities I can add to my plan? • It’s hard to trust Trip Advisor. Everyone is so negative. • Keeping track of all the different products is confusing. • Am I sure this is the trip I want to take? Follow-up on refunds for booking changes Share photos Get stamp for refund Web Share experience (reviews) Buy additional tickets Web Google searches Share experience Activities, unexpected changes Check ticket status May call if difficulties occur Kayak, compare airfare Blogs & Travel sites • What is the easiest way to get around Europe? • Where do I want to go? • How much time should I/we spend in each Post Travel Live chat for questions DOING Talk with friends Travel Wait for paper tickets to arrive Look up time tables raileurope.com Plan with interactive map Booking • Do I have all the tickets, passes and reservations I need in this booking so I don’t pay more shipping? • Rail Europe is not answering the phone. How else can I get my question answered? • Website experience is easy and friendly! • Frustrated to not know sooner about which tickets are eTickets and which are paper tickets. Not sure my tickets will arrive in time. • Do I have everything I need? • Rail Europe website was easy and friendly, but when an issue came up, I couldn’t get help. • What will I do if my tickets don’t arrive in time? • Stressed that I’m about to leave the country and Rail Europe won’t answer the phone. • Frustrated that Rail Europe won’t ship tickets to Europe. • Happy to receive my tickets in the mail! web/ apps Arrange travel Plan/ confirm activities • I just figured we could grab a train but there are not more trains. What can we do now? • Am I on the right train? If not, what next? • I want to make more travel plans. How do I do that? • I am feeling vulnerable to be in an unknown place in the middle of the night. • Stressed that the train won’t arrive on time for my connection. • Meeting people who want to show us around is fun, serendipitous, and special. Request refunds Mail tickets for refund • Trying to return ticket I was not able to use. Not sure if I’ll get a refund or not. • People are going to love these photos! • Next time, we will explore routes and availability more carefully. • Excited to share my vacation story with my friends. • A bit annoyed to be dealing with ticket refund issues when I just got home. Enjoyability Enjoyability Enjoyability Enjoyability Enjoyability Enjoyability Relevance of Rail Europe Relevance of Rail Europe Relevance of Rail Europe Relevance of Rail Europe Relevance of Rail Europe Relevance of Rail Europe Helpfulness of Rail Europe Helpfulness of Rail Europe Helpfulness of Rail Europe Helpfulness of Rail Europe Helpfulness of Rail Europe Helpfulness of Rail Europe Opportunities GLOBAL PLANNING, SHOPPING, BOOKING POST-BOOK, TRAVEL, POST-TRAVEL Communicate a clear value proposition. Help people get the help they need. Support people in creating their own solutions. Enable people to plan over time. Visualize the trip for planning and booking. Arm customers with information for making decisions. Improve the paper ticket experience. Accommodate planning and booking in Europe too. STAGE: Initial visit STAGES: Global STAGES: Global STAGES: Planning, Shopping STAGES: Planning, Shopping STAGES: Shopping, Booking STAGES: Post-Booking, Travel, Post-Travel STAGE: Traveling Make your customers into better, more savvy travelers. Engage in social media with explicit purposes. Connect planning, shopping and booking on the web. Aggregate shipping with a reasonable timeline. Proactively help people deal with change. Communicate status clearly at all times. STAGES: Global STAGES: Global STAGES: Post-Booking, Traveling STAGES: Post-Booking, Post Travel Source: http://adaptivepath.org/uploads/documents/RailEurope_AdaptivePath_CXMap_FINAL.pdf STAGES: Planning, Shopping, Booking STAGE: Booking @annadahlstrom
Rail Europe Experience Map Guiding Principles People choose rail travel because it is convenient, easy, and flexible. Rail booking is only one part of people’s larger travel process. People build their travel plans over time. People value service that is respectful, effective and personable. Customer Journey STAGES Research & Planning RAIL EUROPE Shopping Enter trips Research destinations, routes and products Destination pages Review fares Select pass(es) Confirm itinerary Post-Booking, Pre-Travel Delivery options Payment options Review & confirm Change plans Print e-tickets at home Web THINKING Google searches Think of the set a bit as this part FEELING EXPERIENCE place for site seeing and activities? • I’m excited to go to Europe! • Will I be able to see everything I can? • What if I can’t afford this? • I don’t want to make the wrong choice. E-ticket Print at Station View maps Paper tickets arrive in mail Look up timetables Research hotels • I want to get the best price, but I’m willing to pay a little more for first class. • How much will my whole trip cost me? What are my trade-offs? • Are there other activities I can add to my plan? • It’s hard to trust Trip Advisor. Everyone is so negative. • Keeping track of all the different products is confusing. • Am I sure this is the trip I want to take? Follow-up on refunds for booking changes Share photos Get stamp for refund Web Share experience (reviews) Buy additional tickets Kayak, compare airfare Blogs & Travel sites Share experience Activities, unexpected changes Check ticket status May call if difficulties occur DOING • What is the easiest way to get around Europe? • Where do I want to go? • How much time should I/we spend in each Post Travel Live chat for questions Map itinerary (finding pass) Talk with friends Travel Wait for paper tickets to arrive Look up time tables raileurope.com Plan with interactive map Booking • Do I have all the tickets, passes and reservations I need in this booking so I don’t pay more shipping? • Rail Europe is not answering the phone. How else can I get my question answered? • Website experience is easy and friendly! • Frustrated to not know sooner about which tickets are eTickets and which are paper tickets. Not sure my tickets will arrive in time. • Do I have everything I need? • Rail Europe website was easy and friendly, but when an issue came up, I couldn’t get help. • What will I do if my tickets don’t arrive in time? • Stressed that I’m about to leave the country and Rail Europe won’t answer the phone. • Frustrated that Rail Europe won’t ship tickets to Europe. • Happy to receive my tickets in the mail! web/ apps Arrange travel Plan/ confirm activities • I just figured we could grab a train but there are not more trains. What can we do now? • Am I on the right train? If not, what next? • I want to make more travel plans. How do I do that? • I am feeling vulnerable to be in an unknown place in the middle of the night. • Stressed that the train won’t arrive on time for my connection. • Meeting people who want to show us around is fun, serendipitous, and special. Request refunds Mail tickets for refund • Trying to return ticket I was not able to use. Not sure if I’ll get a refund or not. • People are going to love these photos! • Next time, we will explore routes and availability more carefully. • Excited to share my vacation story with my friends. • A bit annoyed to be dealing with ticket refund issues when I just got home. Enjoyability Enjoyability Enjoyability Enjoyability Enjoyability Enjoyability Relevance of Rail Europe Relevance of Rail Europe Relevance of Rail Europe Relevance of Rail Europe Relevance of Rail Europe Relevance of Rail Europe Helpfulness of Rail Europe Helpfulness of Rail Europe Helpfulness of Rail Europe Helpfulness of Rail Europe Helpfulness of Rail Europe Helpfulness of Rail Europe Opportunities GLOBAL PLANNING, SHOPPING, BOOKING POST-BOOK, TRAVEL, POST-TRAVEL Communicate a clear value proposition. Help people get the help they need. Support people in creating their own solutions. Enable people to plan over time. Visualize the trip for planning and booking. Arm customers with information for making decisions. Improve the paper ticket experience. Accommodate planning and booking in Europe too. STAGE: Initial visit STAGES: Global STAGES: Global STAGES: Planning, Shopping STAGES: Planning, Shopping STAGES: Shopping, Booking STAGES: Post-Booking, Travel, Post-Travel STAGE: Traveling Make your customers into better, more savvy travelers. Engage in social media with explicit purposes. Connect planning, shopping and booking on the web. Aggregate shipping with a reasonable timeline. Proactively help people deal with change. Communicate status clearly at all times. STAGES: Global STAGES: Global STAGES: Planning, Shopping, Booking STAGE: Booking STAGES: Post-Booking, Traveling STAGES: Post-Booking, Post Travel Source: http://adaptivepath.org/uploads/documents/RailEurope_AdaptivePath_CXMap_FINAL.pdf @annadahlstrom
“The cinema is indeed a matter of both: what’s in and what’s out, not just what’s in; what’s visible and what’s not visible. In other words, it’s more than framings and visual patterns; it’s overtones, sympathies, hauntings. ” - Richard Brody, The New Yorker Photo by Jose Lebron on Unsplash @annadahlstrom
“ We need to storyboard how visual elements come into focus with intention. ” - Kanze Screenshot https://kanze.co/blog/cinematography-in-user-experience-design @annadahlstrom
“ Relevant information is signal whilst irrelevant information is noise ” - NN/g @annadahlstrom
Storytelling methods for experience design Identify & understand the problem space Define & deliver the experience Present & analyse the outcome @annadahlstrom
Everything has a (back)story https://www.flickr.com/photos/antmcneill/7824200774 http://www.boredpanda.com/funny-fake-book-covers-nyc-subway-prank-scott-rogowsky/
Don’t just plan for the ideal Awareness Purchase PLOT POINT ONE Delight Feel good Hygiene Consideration PLOT POINT TWO Reads a review PLOT POINT ONE Hears about it Act one Setup PLOT POINT TWO Decides to buy Receives it Looks it up inciting incident Post.. Does more research Compares it to similar products mid point Act two Confrontation Pays for it climax Act three Resolution
“ How users attend to information on a page depends on their tasks and goals. ” - NN/g Photo by K2_UX on Flickr @annadahlstrom
The aim of every story is to connect emotionally Photo by Fadi Xd on Unsplash @annadahlstrom
The right story to the right people in the right way @annadahlstrom
www.flickr.com/photos/declanjewell/2181100986 @annadahlstrom
Javier Perez via http://the-wonderist.com/2013/11/05/how-to-see-things-with-new-eyes @annadahlstrom
Who are you telling what, how, when and where? Photo by rawpixel on Unsplash @annadahlstrom
And why? Photo by Dylan Gialanella on Unsplash @annadahlstrom
Thank you. Questions? @annadahlstrom @uxfika www.annadahlstrom.com www.flickr.com/photos/katerha/8435321969
Thank you. Questions? @annadahlstrom @uxfika www.annadahlstrom.com
