Your SlideShare is downloading. ×
0
www.flickr.com/photos/katerha/8435321969
Designing around storytelling
The power of stories & how they can be used in UX d...
Once upon a time
in a city called ‘Lund’...
xxxxwww.flickr.com/photos/ulfk/7976687420
There where 

plenty of story time
www.flickr.com/photos/excomedia/sets/72157622519563566with/5233990438
We travelled 

through those stories
www.flickr.com/photos/conorkeller/7860288604
“ We are as a species addicted to stories. ”
- The Storytelling Animal by Jonathan Gottschall

www.flickr.com/photos/namke...
Storytelling 

Storytelling 

Storytelling
www.flickr.com/photos/g-ratphotos/3404474275
“ If you can’t tell it, you can’t sell it. ”
- Peter Guber

www.flickr.com/photos/g-ratphotos/3404474275
“ Results repeatedly shows that our attitudes, fears,
hopes, and values are s...
Stories 
as persuasion tools
www.flickr.com/photos/saucef/7184615025
Not just for messaging but also
an integral part of the design process
www.flickr.com/photos/g-ratphotos/3404474275
“ Storytelling is at the heart of everything ”
- Steve Levitt

www.flickr.com/photos/carlosfpardo/6791950592
Stories capture our imagination 

& shows us something new
www.flickr.com/photos/declanjewell/2181100986
‘ Now you see me. ’
Javier Perez via http://the-wonderist.com/2013/11/05/how-to-see-things-with-new-eyes
‘ Now you don’t. ’
Queenie Liao’s ‘Wengenn in Wonderland’ via www.boredpanda.org/wengenn-in-wonderland-sioin-queenie-liao
What do we want our users to see?

What is the story we want to tell?
Where do we want to take them?
www.flickr.com/photos/g-ratphotos/3404474275
“ Historically, stories have always been igniters 

of action, moving people ...
Every story 

takes us on a journey
Image via Shutterstock
Storytelling can 

provide powerful call to actions
www.flickr.com/photos/piermario/4188959762
Stories have the ability to motivate,
change and create connections
Image via Shutterstock
What 
makes for a good story?
The end

The basic structure of a story
A beginning
 A middle

Dramaturgy 
knowing how to apply & structure
elements to tell a story
How a story is told impacts
the human experience of its audience
Image via Shutterstock
Act three

Three act structure
Act one

Setup Resolution
Act two

Confrontation
inciting
incident mid point climax
confron...
Three act structure - applied to UCD
Setup ResolutionConfrontation
inciting
incident mid point climax
confronts the main
c...
www.flickr.com/photos/perolofforsberg/6691744587
I asked my dad for 

3 principles around good storytelling
01 
Captures the imagination
www.flickr.com/photos/g-ratphotos/3404474275
“ If you can imagine yourself in a situation, 

it’s infinitely scarier. ”
- ...
Users need to 

be able to relate
www.flickr.com/photos/estherase/1292315618
We need to
understand who they are
www.flickr.com/photos/cannedtuna/4852756417
02 
The dynamic of the story
What are the events

& people that tie it all together
www.flickr.com/photos/erin_ryan/2584551310
The ever important

red thread
www.flickr.com/photos/pulpolux/3692396234
03 
An element of surprise
www.flickr.com/photos/g-ratphotos/3404474275
“ In general there should be a basic idea of where
the story is going, but no...
Include an element of 

surprise & exploration
www.flickr.com/photos/conorkeller/4028043294
Let users 

find their way around your content
www.flickr.com/photos/conorkeller/3879321839
Image via Shutterstock
Consider non-linear 

& new forms of storytelling
Image via Shutterstock
NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/
Image via Shutterstock
NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/
NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/
Medium -https://medium.com
Medium -https://medium.com
Into the Arctic - http://www.intothearctic.gp/en/
Into the Arctic - http://www.intothearctic.gp/en/
Glimt - http://glimt.it/
How 
do we go about it?
It starts with this
Setup ResolutionConfrontation
inciting
incident mid point climax
confronts the main
character
tries to...
Identify the product lifecycle & its stages
Setup ResolutionConfrontation
inciting
incident mid point climax
confronts the...
Awareness Consideration Purchase Post..
1. Becomes aware

5. Takes action

/ no action

4. Makes a decision

3. Looks furt...
Image via Shutterstock
Identify where 

the biggest barriers may be
www.flickr.com/photos/31878512@N06/4945216951/in/photostream
Look at where 

you want to delight them
Plan for multiple 

entry & exit points
www.flickr.com/photos/danieldslee/6913766642
Define content, functional & interaction
elements to addresses the needs
www.flickr.com/photos/angietorres/4564135455
Ensure there is

a good balance
www.flickr.com/photos/17207222@N02/5601758478
Awareness Consideration Purchase Post..
1. Becomes aware

5. Takes action

/ no action

4. Makes a decision

3. Looks furt...
1. Becomes aware

5. Takes action

/ no action

4. Makes a decision

3. Looks further into it

2. Starts to consider

Act ...
We cannot be at
the top all the time
www.flickr.com/photos/alexnormand/5992512756
1. Becomes aware

5. Takes action

/ no action

4. Makes a decision

3. Looks further into it

2. Starts to consider

Act ...
Awareness
Work with experience goals & life cyclesHygieneFeelgoodDelight
Consideration Purchase Post purchase
The site
kno...
Delivering 
the right content at the right time
We need to know:

What we want to say

What we want our users to do
Users 

are different
www.robotshop.com/blog/where-is-wall-e-1391
Identify 
content & functionality for each main user
Image via Shutterstock
Look at how to tailor views based on 

who the user is & their behaviour
Context 
& prior knowledge plays a key role
www.flickr.com/photos/pgoyette/168076182
Tailor messaging 

& tone of voice
Consider location 

& cultural differences
www.flickr.com/photos/scary_mary/5700384580
www.flickr.com/photos/g-ratphotos/3404474275
“ Visit intent is likely to vary between these two
segments. For example, new...
Make use of different ways
to capture & engage the user
www.flickr.com/photos/snugglepup/5225953124
Tell a continuos story 

with delights along the way
www.maxfactor.co.uk
Consider & adapt 
your message across touch points
www.flickr.com/photos/visualpunch/7351572896
Ensure the message 

is considered & delivered across devices
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
“ Content needs to be choreographed to 

ensure the int...
www.flickr.com/photos/g-ratphotos/3404474275
“ A good piece of UX has a narrative and clearly
tells a story, or at least p...
www.flickr.com/photos/jox1989/5143301136
Whatever we create & whoever it is for, 

we want people to do something
It all start with 

Once upon a time...
www.flickr.com/photos/snugglepup/3317051065
Or maybe

Once upon a design...
www.flickr.com/photos/snugglepup/3317051065
www.flickr.com/photos/katerha/8435321969
Thank you. Questions?
@annadahlstrom @byflock
www.annadahlstrom.com
Upcoming SlideShare
Loading in...5
×

Designing around storytelling - dd:London + GA, 24july2014

882

Published on

Slides from my talk at dd:London with GA http://www.eventbrite.com/e/ddlondon-tales-from-the-ux-trenches-with-ga-tickets-12163723023

Storytelling has always played an important part in our societies throughout history. In the last few years it's gained attention as an important aspect in communicating and building engagement with a brand’s customer base. But storytelling is also an integral part of the design process. It’s a tool that not only can help us define our content and messaging, but the experience as a whole. Both across platforms and screens, and how we interact with it.

Published in: Design
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
882
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
34
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Transcript of "Designing around storytelling - dd:London + GA, 24july2014"

  1. 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 Digital  Dumbo  London  +  GA,  24  July  2014
  2. 2. Once upon a time in a city called ‘Lund’... xxxxwww.flickr.com/photos/ulfk/7976687420
  3. 3. There where 
 plenty of story time www.flickr.com/photos/excomedia/sets/72157622519563566with/5233990438
  4. 4. We travelled 
 through those stories www.flickr.com/photos/conorkeller/7860288604
  5. 5. “ We are as a species addicted to stories. ” - The Storytelling Animal by Jonathan Gottschall
 www.flickr.com/photos/namkeng/3209117837
  6. 6. Storytelling 
 Storytelling 
 Storytelling
  7. 7. www.flickr.com/photos/g-ratphotos/3404474275 “ If you can’t tell it, you can’t sell it. ” - Peter Guber

  8. 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. 9. Stories 
as persuasion tools
  10. 10. www.flickr.com/photos/saucef/7184615025 Not just for messaging but also an integral part of the design process
  11. 11. www.flickr.com/photos/g-ratphotos/3404474275 “ Storytelling is at the heart of everything ” - Steve Levitt

  12. 12. www.flickr.com/photos/carlosfpardo/6791950592 Stories capture our imagination 
 & shows us something new
  13. 13. www.flickr.com/photos/declanjewell/2181100986
  14. 14. ‘ Now you see me. ’
  15. 15. Javier Perez via http://the-wonderist.com/2013/11/05/how-to-see-things-with-new-eyes
  16. 16. ‘ Now you don’t. ’
  17. 17. Queenie Liao’s ‘Wengenn in Wonderland’ via www.boredpanda.org/wengenn-in-wonderland-sioin-queenie-liao
  18. 18. What do we want our users to see?
 What is the story we want to tell?
  19. 19. Where do we want to take them?
  20. 20. www.flickr.com/photos/g-ratphotos/3404474275 “ Historically, stories have always been igniters 
 of action, moving people to do things. ” - Peter Guber

  21. 21. Every story 
 takes us on a journey Image via Shutterstock
  22. 22. Storytelling can 
 provide powerful call to actions www.flickr.com/photos/piermario/4188959762
  23. 23. Stories have the ability to motivate, change and create connections Image via Shutterstock
  24. 24. What 
makes for a good story?
  25. 25. The end
 The basic structure of a story A beginning
 A middle

  26. 26. Dramaturgy 
knowing how to apply & structure elements to tell a story
  27. 27. How a story is told impacts the human experience of its audience Image via Shutterstock
  28. 28. 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
  29. 29. 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

  30. 30. www.flickr.com/photos/perolofforsberg/6691744587 I asked my dad for 
 3 principles around good storytelling
  31. 31. 01 
Captures the imagination
  32. 32. www.flickr.com/photos/g-ratphotos/3404474275 “ If you can imagine yourself in a situation, 
 it’s infinitely scarier. ” - Brad Falchuk

  33. 33. Users need to 
 be able to relate www.flickr.com/photos/estherase/1292315618
  34. 34. We need to understand who they are www.flickr.com/photos/cannedtuna/4852756417
  35. 35. 02 
The dynamic of the story
  36. 36. What are the events
 & people that tie it all together www.flickr.com/photos/erin_ryan/2584551310
  37. 37. The ever important
 red thread www.flickr.com/photos/pulpolux/3692396234
  38. 38. 03 
An element of surprise
  39. 39. 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

  40. 40. Include an element of 
 surprise & exploration www.flickr.com/photos/conorkeller/4028043294
  41. 41. Let users 
 find their way around your content www.flickr.com/photos/conorkeller/3879321839
  42. 42. Image via Shutterstock Consider non-linear 
 & new forms of storytelling
  43. 43. Image via Shutterstock NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/
  44. 44. Image via Shutterstock NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/
  45. 45. NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/
  46. 46. Medium -https://medium.com
  47. 47. Medium -https://medium.com
  48. 48. Into the Arctic - http://www.intothearctic.gp/en/
  49. 49. Into the Arctic - http://www.intothearctic.gp/en/
  50. 50. Glimt - http://glimt.it/
  51. 51. How 
do we go about it?
  52. 52. 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

  53. 53. 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..
  54. 54. 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
  55. 55. Image via Shutterstock Identify where 
 the biggest barriers may be
  56. 56. www.flickr.com/photos/31878512@N06/4945216951/in/photostream Look at where 
 you want to delight them
  57. 57. Plan for multiple 
 entry & exit points www.flickr.com/photos/danieldslee/6913766642
  58. 58. Define content, functional & interaction elements to addresses the needs www.flickr.com/photos/angietorres/4564135455
  59. 59. Ensure there is
 a good balance www.flickr.com/photos/17207222@N02/5601758478
  60. 60. 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
  61. 61. 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
  62. 62. We cannot be at the top all the time www.flickr.com/photos/alexnormand/5992512756
  63. 63. 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
  64. 64. Awareness Work with experience goals & life cyclesHygieneFeelgoodDelight Consideration Purchase Post purchase The site knows me 
 & what I 
 want
  65. 65. Delivering 
the right content at the right time
  66. 66. We need to know:
 What we want to say
 What we want our users to do
  67. 67. Users 
 are different www.robotshop.com/blog/where-is-wall-e-1391
  68. 68. Identify 
content & functionality for each main user
  69. 69. Image via Shutterstock Look at how to tailor views based on 
 who the user is & their behaviour
  70. 70. Context 
& prior knowledge plays a key role
  71. 71. www.flickr.com/photos/pgoyette/168076182 Tailor messaging 
 & tone of voice
  72. 72. Consider location 
 & cultural differences www.flickr.com/photos/scary_mary/5700384580
  73. 73. 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

  74. 74. Make use of different ways to capture & engage the user www.flickr.com/photos/snugglepup/5225953124
  75. 75. Tell a continuos story 
 with delights along the way www.maxfactor.co.uk
  76. 76. Consider & adapt 
your message across touch points
  77. 77. www.flickr.com/photos/visualpunch/7351572896 Ensure the message 
 is considered & delivered across devices
  78. 78. 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
  79. 79. www.flickr.com/photos/g-ratphotos/3404474275 “ 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
  80. 80. www.flickr.com/photos/jox1989/5143301136 Whatever we create & whoever it is for, 
 we want people to do something
  81. 81. It all start with 
 Once upon a time... www.flickr.com/photos/snugglepup/3317051065
  82. 82. Or maybe
 Once upon a design... www.flickr.com/photos/snugglepup/3317051065
  83. 83. www.flickr.com/photos/katerha/8435321969 Thank you. Questions? @annadahlstrom @byflock www.annadahlstrom.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×