Designing Around Storytelling - Breaking Borders, Reading 18 August 2015
224 likes•16,331 views
The document explores the importance of storytelling in UX design, emphasizing how narratives can influence user attitudes, motivate actions, and enhance user experience. It outlines key elements of effective storytelling, including structure, surprise, and user relatability, and suggests methods for integrating storytelling into design processes. The document also discusses tailoring experiences to different user segments and ensuring consistency across various touchpoints and devices.
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015
- 1. www.flickr.com/photos/katerha/8435321969 Designing around storytelling The power of stories & how they can be used in UX design by Anna Dahlström | @annadahlstrom Breaking Borders, Reading 18 August 2015
- 2. Once upon a time in a city called ‘Lund’... xxxxwww.flickr.com/photos/ulfk/7976687420
- 3. There where plenty of story time www.flickr.com/photos/excomedia/sets/72157622519563566with/5233990438
- 4. We travelled through those stories www.flickr.com/photos/conorkeller/7860288604
- 5. “ We are as a species addicted to stories. ” - The Storytelling Animal by Jonathan Gottschall www.flickr.com/photos/namkeng/3209117837
- 7. www.flickr.com/photos/g-ratphotos/3404474275 “ If you can’t tell it, you can’t sell it. ” - Peter Guber
- 8. www.flickr.com/photos/g-ratphotos/3404474275 “ Results repeatedly shows that our attitudes, fears, hopes, and values are strongly influenced by story. In fact, fiction seems to be more effective at changing beliefs than writing that is specifically designed to persuade through argument and evidence." Entering fictional worlds radically alters the way information is processed. ” - FastCompany, Why storytelling is the ultimate weapon
- 9. Stories as persuasion tools
- 10. www.flickr.com/photos/saucef/7184615025 Not just for messaging but also an integral part of the design process
- 11. www.flickr.com/photos/g-ratphotos/3404474275 “ Storytelling is at the heart of everything ” - Steve Levitt
- 12. www.flickr.com/photos/carlosfpardo/6791950592 Stories capture our imagination & shows us something new
- 14. ‘ Now you see me. ’
- 15. Javier Perez via http://the-wonderist.com/2013/11/05/how-to-see-things-with-new-eyes
- 16. ‘ Now you don’t. ’
- 17. Queenie Liao’s ‘Wengenn in Wonderland’ via www.boredpanda.org/wengenn-in-wonderland-sioin-queenie-liao
- 18. What do we want our users to see? What is the story we want to tell?
- 19. Where do we want to take them?
- 20. www.flickr.com/photos/carlosfpardo/6791950592 “ I like to think of putting someone in a situation where they can use the item, so they can really imagine themselves doing it. ” - Elle on how to write product copy for glimt.it
- 21. www.flickr.com/photos/carlosfpardo/6791950592 “ This copy makes me imagine actually sitting in the garden with a Cosmopolitan and a great book. ” - Elle on writing copy about a deck chair
- 22. www.flickr.com/photos/g-ratphotos/3404474275 “ Historically, stories have always been igniters of action, moving people to do things. ” - Peter Guber
- 23. Every story takes us on a journey Image via Shutterstock
- 24. Storytelling can provide powerful call to actions www.flickr.com/photos/piermario/4188959762
- 25. Stories have the ability to motivate, change and create connections Image via Shutterstock
- 26. What makes for a good story?
- 27. The end The basic structure of a story A beginning A middle
- 28. Dramaturgy knowing how to apply & structure elements to tell a story
- 29. How a story is told impacts the human experience of its audience Image via Shutterstock
- 30. Act three Three act structure Act one Setup Resolution Act two Confrontation inciting incident mid point climax confronts the main character tries to solve the problem but don’t yet have the skills the dramatic question is answered PLOT POINT ONE PLOT POINT TWO
- 31. Three act structure - applied to UCD Setup ResolutionConfrontation inciting incident mid point climax confronts the main character tries to solve the problem but don’t yet have the skills the dramatic question is answered PLOT POINT ONE PLOT POINT TWO 1. Becomes aware 5. Takes action / no action 4. Makes a decision 3. Looks further into it 2. Starts to consider Act three Act one Act two
- 32. www.flickr.com/photos/perolofforsberg/6691744587 I asked my dad for 3 principles around good storytelling
- 33. 01 Captures the imagination
- 34. www.flickr.com/photos/g-ratphotos/3404474275 “ If you can imagine yourself in a situation, it’s infinitely scarier. ” - Brad Falchuk
- 35. Users need to be able to relate www.flickr.com/photos/estherase/1292315618
- 36. We need to understand who they are www.flickr.com/photos/cannedtuna/4852756417
- 37. 02 The dynamic of the story
- 38. What are the events & people that tie it all together www.flickr.com/photos/erin_ryan/2584551310
- 39. The ever important ”red thread” www.flickr.com/photos/pulpolux/3692396234
- 40. 03 An element of surprise
- 41. www.flickr.com/photos/g-ratphotos/3404474275 “ In general there should be a basic idea of where the story is going, but not for every character. You don't know who's going to die and who's going to start becoming more important. Big picture-wise, there’s a basic idea, but you need some surprises too. It’s like driving from New York to LA: you know you’re going to get to LA, but there’s 10 different routes you could take. ” - Brad Falchuck
- 42. Include an element of surprise & exploration www.flickr.com/photos/conorkeller/4028043294
- 43. Let users find their way around your content www.flickr.com/photos/conorkeller/3879321839
- 44. Image via Shutterstock Consider non-linear & new forms of storytelling
- 45. Image via Shutterstock NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/
- 46. NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/
- 47. NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/
- 50. Into the Arctic - http://www.thefwa.com/shortlist/into-the-arctic-greenpeace
- 51. Into the Arctic - http://www.thefwa.com/shortlist/into-the-arctic-greenpeace
- 52. How do we go about it?
- 53. It starts with this Setup ResolutionConfrontation inciting incident mid point climax confronts the main character tries to solve the problem but don’t yet have the skills the dramatic question is answered PLOT POINT ONE PLOT POINT TWO 1. Becomes aware 5. Takes action / no action 4. Makes a decision 3. Looks further into it 2. Starts to consider Act three Act one Act two
- 54. Identify the product lifecycle & its stages Setup ResolutionConfrontation inciting incident mid point climax confronts the main character tries to solve the problem but don’t yet have the skills the dramatic question is answered PLOT POINT ONE PLOT POINT TWO 1. Becomes aware 5. Takes action / no action 4. Makes a decision 3. Looks further into it 2. Starts to consider Act three Act one Act two Awareness Consideration Purchase Post..
- 55. Awareness Consideration Purchase Post.. 1. Becomes aware 5. Takes action / no action 4. Makes a decision 3. Looks further into it 2. Starts to consider Act three Act one Act two Map the experience Setup ResolutionConfrontation inciting incident mid point climax confronts the main character tries to solve the problem but don’t yet have the skills the dramatic question is answered PLOT POINT ONE PLOT POINT TWO HygieneFeelgoodDelight
- 56. Image via Shutterstock Identify where the biggest barriers may be
- 57. www.flickr.com/photos/31878512@N06/4945216951/in/photostream Look at where you want to delight them
- 58. Plan for multiple entry & exit points www.flickr.com/photos/danieldslee/6913766642
- 59. Define content, functional & interaction elements to addresses the needs www.flickr.com/photos/angietorres/4564135455
- 60. Ensure there is a good balance www.flickr.com/photos/17207222@N02/5601758478
- 61. Awareness Consideration Purchase Post.. 1. Becomes aware 5. Takes action / no action 4. Makes a decision 3. Looks further into it 2. Starts to consider Act three Act one Act two When doing this… Setup ResolutionConfrontation inciting incident mid point climax confronts the main character tries to solve the problem but don’t yet have the skills the dramatic question is answered PLOT POINT ONE PLOT POINT TWO HygieneFeelgoodDelight
- 62. 1. Becomes aware 5. Takes action / no action 4. Makes a decision 3. Looks further into it 2. Starts to consider Act three Act one Act two …avoid ending up with this Setup ResolutionConfrontation inciting incident mid point climax confronts the main character tries to solve the problem but don’t yet have the skills the dramatic question is answered PLOT POINT ONE PLOT POINT TWO HygieneFeelgoodDelight
- 63. We cannot be at the top all the time www.flickr.com/photos/alexnormand/5992512756
- 64. 1. Becomes aware 5. Takes action / no action 4. Makes a decision 3. Looks further into it 2. Starts to consider Act three Act one Act two More realistic Setup ResolutionConfrontation inciting incident mid point climax confronts the main character tries to solve the problem but don’t yet have the skills the dramatic question is answered PLOT POINT ONE PLOT POINT TWO HygieneFeelgoodDelight
- 65. Awareness Work with experience goals & life cyclesHygieneFeelgoodDelight Consideration Purchase Post purchase The site knows me & what I want
- 66. Delivering the right content at the right time
- 67. We need to know: What we want to say What we want our users to do
- 69. Identify content & functionality for each main user
- 70. Image via Shutterstock Look at how to tailor views based on who the user is & their behaviour
- 71. Context & prior knowledge plays a key role
- 72. www.flickr.com/photos/pgoyette/168076182 Tailor messaging & tone of voice
- 73. Consider location & cultural differences www.flickr.com/photos/scary_mary/5700384580
- 74. www.flickr.com/photos/g-ratphotos/3404474275 “ Visit intent is likely to vary between these two segments. For example, new visitors are less likely to trust your brand and understand the key benefits to shopping with you. ” - Econsultancy
- 75. Make use of different ways to capture & engage the user www.flickr.com/photos/snugglepup/5225953124
- 76. Tell a continuos story with delights along the way www.maxfactor.co.uk
- 77. Consider & adapt your message across touch points
- 78. www.flickr.com/photos/visualpunch/7351572896 Ensure the message is considered & delivered across devices
- 79. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/ “ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width “ - Trent Walton
- 80. www.flickr.com/photos/jox1989/5143301136 Whatever we create & whoever it is for, we want people to do something
- 81. It all start with Once upon a time... www.flickr.com/photos/snugglepup/3317051065
- 82. Or maybe Once upon a design... www.flickr.com/photos/snugglepup/3317051065
- 83. www.flickr.com/photos/katerha/8435321969 Thank you. Questions? @annadahlstrom @glimtit www.annadahlstrom.com