Designing Around Storytelling - Digital Pond, London 06 Feb 2014

24,017 views
21,474 views

Published on

Slides from my talk around storytelling in design at the Digital Pond meet up on 06 Feb 2014
http://www.meetup.com/The-Digital-Pond/events/159211742/

Stories have played an important part in our societies and development through history. In the last few years it's gained attention as a tool for and important aspect in communication, and rightfully so. But it's also an integral part of the design process and at the Digital Pond I talked about why as well as how we can use it, from the start, during definition and development as well as going forwards.

Published in: Design, Sports
9 Comments
141 Likes
Statistics
Notes
No Downloads
Views
Total views
24,017
On SlideShare
0
From Embeds
0
Number of Embeds
4,162
Actions
Shares
0
Downloads
449
Comments
9
Likes
141
Embeds 0
No embeds

No notes for slide

Designing Around Storytelling - Digital Pond, London 06 Feb 2014

  1. Designing around storytelling The power of stories & how they can be used in UX design by Anna Dahlström | @annadahlstrom @UXFika Digital  Pond,  06  Feb  2014 www.flickr.com/photos/katerha/8435321969
  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
  6. Storytelling 
 Storytelling 
 Storytelling
  7. Every brand wants 
 to tell their story www.flickr.com/photos/kelstew/3658900542
  8. “ If you can’t tell it, you can’t sell it. ” - Peter Guber
 www.flickr.com/photos/g-ratphotos/3404474275
  9. “ 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 www.flickr.com/photos/g-ratphotos/3404474275
  10. Stories 
 as persuasion tools
  11. Not just for messaging but also an integral part of the design process www.flickr.com/photos/saucef/7184615025
  12. “ Storytelling is at the heart of everything ” - Steve Levitt
 www.flickr.com/photos/g-ratphotos/3404474275
  13. There is an element 
 of magic involved www.flickr.com/photos/carlosfpardo/6791950592
  14. www.flickr.com/photos/declanjewell/2181100986
  15. ‘ Now you see me.
  16. Javier Perez via http://the-wonderist.com/2013/11/05/how-to-see-things-with-new-eyes
  17. ‘ Now you don’t. ’
  18. Queenie Liao’s ‘Wengenn in Wonderland’ via www.boredpanda.org/wengenn-in-wonderland-sioin-queenie-liao
  19. What do we want our users to see?
 What is the story we want to tell?
  20. Where do we want to take them?
  21. “ Historically, stories have always been igniters 
 of action, moving people to do things. ” - Peter Guber
 www.flickr.com/photos/g-ratphotos/3404474275
  22. Every story 
 takes us on a journey Image via Shutterstock
  23. Storytelling can 
 provide powerful call to actions www.flickr.com/photos/piermario/4188959762
  24. Stories have the ability to motivate, change and create connections Image via Shutterstock
  25. What 
 makes for a good story?
  26. The basic structure of a story A beginning
 A middle
 The end

  27. Dramaturgy 
 knowing how to apply & structure elements to tell a story
  28. How a story is told impacts the human experience of its audience Image via Shutterstock
  29. 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
  30. Three act structure - applied to UCD PLOT POINT ONE 2. Starts to consider
 inciting incident confronts the main character PLOT POINT TWO 4. Makes a decision
 mid point tries to solve the problem but don’t yet have the skills 1. Becomes aware
 3. Looks further into it
 Act one
 Act two
 Setup Confrontation climax the dramatic question is answered 5. Takes action
 / no action
 Act three
 Resolution
  31. I asked my dad for 
 3 principles around good storytelling www.flickr.com/photos/perolofforsberg/6691744587
  32. 01 
 Captures the imagination
  33. “ If you can imagine yourself in a situation, 
 it’s infinitely scarier. ” - Brad Falchuk
 www.flickr.com/photos/g-ratphotos/3404474275
  34. Users need to 
 be able to relate www.flickr.com/photos/estherase/1292315618
  35. We need to understand who they are www.flickr.com/photos/cannedtuna/4852756417
  36. “ I need to understand who has to get what out of the thing I'm designing and I'm only satisfied a visual has been executed well once I'm confident it's telling the right story to the right person in the right way. ” - Steve Whittington
 Design Director 
 Dare www.flickr.com/photos/g-ratphotos/3404474275
  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. “ 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
 www.flickr.com/photos/g-ratphotos/3404474275
  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. Consider non-linear 
 & new forms of storytelling Image via Shutterstock
  45. How 
 do we go about it?
  46. It starts with this PLOT POINT ONE 2. Starts to consider
 inciting incident confronts the main character PLOT POINT TWO 4. Makes a decision
 mid point tries to solve the problem but don’t yet have the skills 1. Becomes aware
 3. Looks further into it
 Act one
 Act two
 Setup Confrontation climax the dramatic question is answered 5. Takes action
 / no action
 Act three
 Resolution
  47. Feel good Delight Identify key points PLOT POINT ONE 2. Starts to consider
 inciting incident confronts the main character PLOT POINT TWO 4. Makes a decision
 mid point tries to solve the problem but don’t yet have the skills 3. Looks further into it
 Act one
 Act two
 the dramatic question is answered 5. Takes action
 / no action
 Hygiene 1. Becomes aware
 climax Setup Confrontation Act three
 Resolution
  48. Look at where 
 you want to delight them www.flickr.com/photos/31878512@N06/4945216951/in/photostream
  49. And also where 
 the biggest barriers may be Image via Shutterstock
  50. Plan for multiple 
 entry & exit points www.flickr.com/photos/danieldslee/6913766642
  51. Identify content, functional & interaction elements to addresses the needs www.flickr.com/photos/angietorres/4564135455
  52. Ensure there is
 a good balance www.flickr.com/photos/17207222@N02/5601758478
  53. Feel good Delight Not appropriate, or realistic PLOT POINT ONE 2. Starts to consider
 confronts the main character Hygiene 1. Becomes aware
 PLOT POINT TWO 4. Makes a decision
 mid point tries to solve the problem but don’t yet have the skills 3. Looks further into it
 climax the dramatic question is answered 5. Takes action
 / no action
 inciting incident Act one
 Setup Act two
 Confrontation Act three
 Resolution
  54. We cannot be at the top all the time www.flickr.com/photos/alexnormand/5992512756
  55. Feel good Delight More realistic PLOT POINT ONE 2. Starts to consider
 inciting incident confronts the main character PLOT POINT TWO 4. Makes a decision
 mid point tries to solve the problem but don’t yet have the skills 3. Looks further into it
 Act one
 Act two
 the dramatic question is answered 5. Takes action
 / no action
 Hygiene 1. Becomes aware
 climax Setup Confrontation Act three
 Resolution
  56. Delivering 
 the right content at the right time
  57. We need to know:
 What we want to say
 What we want our users to do
  58. Users 
 are different www.robotshop.com/blog/where-is-wall-e-1391
  59. Identify 
 content & functionality for each main user
  60. Look at how to tailor views based on 
 who the user is & their behaviour Image via Shutterstock
  61. Context 
 & prior knowledge plays a key role
  62. Tailor messaging 
 & tone of voice www.flickr.com/photos/pgoyette/168076182
  63. Consider location 
 & cultural differences www.flickr.com/photos/scary_mary/5700384580
  64. “ 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
 www.flickr.com/photos/g-ratphotos/3404474275
  65. Make use of different ways to capture & engage the user www.flickr.com/photos/snugglepup/5225953124
  66. Tell a continuos story 
 with delights along the way www.maxfactor.co.uk
  67. Consider & adapt your message across touch points 

  68. Ensure the message 
 is considered & delivered across devices www.flickr.com/photos/visualpunch/7351572896
  69. “ Content needs to be choreographed to 
 ensure the intended message is preserved on any device and at any width “ - Trent Walton www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
  70. “ A good piece of UX has a narrative and clearly tells a story, or at least part of a story on a particular journey. As a designer - everything I do and make is communicating something to someone. ” - Steve Whittington
 Design Director 
 Dare www.flickr.com/photos/g-ratphotos/3404474275
  71. Whoever it is for, 
 we always need to sell it www.flickr.com/photos/jox1989/5143301136
  72. It all start with 
 Once upon a time... www.flickr.com/photos/snugglepup/3317051065
  73. Or maybe
 Once upon a design... www.flickr.com/photos/snugglepup/3317051065
  74. Any questions? www.flickr.com/photos/perolofforsberg/6691744587
  75. Thank you @annadahlstrom @UXFika www.annadahlstrom.com www.flickr.com/photos/katerha/8435321969

×