D!"#$%#%$ &r'(%) "*'r+*!,,#%$

The power of stories & how they can be used in user centred design
by Anna Dahlström | @ann...
O%-! (p'% & *#.!
in a city called ‘Lund’...

xxxxwww.flickr.com/photos/ulfk/7976687420
/!r! w0!r!
plenty of story time

www.flickr.com/photos/excomedia/sets/72157622519563566with/5233990438
W! *r&v!,,!)
through those stories

www.flickr.com/photos/conorkeller/7860288604
“ W! &r! &" & "p!-#!" addicted to stories. ”
- /! S*'r+*!,,#%$ A%#.&, b+ J'%&*0&% G'**"-0&,,

www.flickr.com/photos/namken...
S*'r+*!,,#%$

Storytelling

S*'r+*!,,#%$
Ev!r+ br&%) wants
to tell their story

www.flickr.com/photos/kelstew/3658900542
“ If +'( -&%’* *!,, #*, you can’t sell it. ”
- P!*!r G(b!r

www.flickr.com/photos/g-ratphotos/3404474275
“ R!"(,*" r!p!&*!),+ "0'w" that our attitudes, fears,
hopes, and values are strongly influenced by story. In fact,
fiction...
S*'r#!"
as persuasion tools
N'* 2("* for messaging but also
an integral part of the design process

www.flickr.com/photos/saucef/7184615025
“ S*'r+*!,,#%$ is at the heart of everything ”
- S*!v! L!v#**

www.flickr.com/photos/g-ratphotos/3404474275
/!r! #" an element
of magic involved

www.flickr.com/photos/carlosfpardo/6791950592
www.flickr.com/photos/declanjewell/2181100986
‘ N'w +'( "!! .!. ’
J&v#!r P!r3 via http://the-wonderist.com/2013/11/05/how-to-see-things-with-new-eyes
‘ Now you don’t. ’
Q(!!%#! L#&'’" ‘W!%$!%% #% W'%)!r,&%)’ via www.boredpanda.org/wengenn-in-wonderland-sioin-queenie-liao
W0&* )' w! w&%* '(r ("!r" *' "!!?

What is the story we want to tell?
W0!r! )' w! w&%* to take them?
“ H#"*'r#-&,,+, stories have always been igniters
of action, moving people to do things. ”
- P!*!r G(b!r

www.flickr.com/p...
Ev!r+ "*'r+
takes us on a journey

www.flickr.com/photos/photomequickbooth/3966382067
S*'r+*!,,#%$ can
provide powerful call to actions

www.flickr.com/photos/piermario/4188959762
W0&*

makes for a good story?
/! b&"#- structure of a story

A b!$#%%#%$

A .#)),!

/! !%)
Dr&.&*(r$+
knowing how to apply & structure
elements to tell a story
/r!! act structure
PLOT POINT ONE

inciting
incident

PLOT POINT TWO

mid point

climax

confronts the main
character

tri...
/r!! act structure - applied to UCD
PLOT POINT ONE
2. S*&r*" *' -'%"#)!r

inciting
incident

confronts the main
character
...
I &"4!) .+ )&) for
3 principles around good storytelling

www.flickr.com/photos/perolofforsberg/6691744587
01

Captures the imagination
“ If +'( -&% imagine yourself in a situation,
it’s infinitely scarier. ”
- Br&) F&,-0(4

www.flickr.com/photos/g-ratphotos...
U"!r" %!!) to
be able to relate

www.flickr.com/photos/estherase/1292315618
W! %!!) *'
understand who they are

www.flickr.com/photos/cannedtuna/4852756417
“ I %!!) *' (%)!r"*&%) who has to get what out of
the thing I'm designing and I'm only satisfied a visual
has been execute...
02

The dynamic of the story
W0&* &r! *0! !v!%*"
& people that tie it all together

www.flickr.com/photos/erin_ryan/2584551310
/! !v!r #.p'r*&%*
red thread

www.flickr.com/photos/pulpolux/3692396234
03

An element of surprise
“ I% $!%!r&, there should be a basic idea of where
the story is going, but not for every character. You
don't know who's g...
I%-,()! an element of
surprise & exploration

www.flickr.com/photos/conorkeller/4028043294
L!* users
find their way around your content

www.flickr.com/photos/conorkeller/3879321839
C'%"#)!r non-linear
& new forms of storytelling

www.flickr.com/photos/soundslogical/4255801733
H'w

do we go about it?
I* "*&r*" with this
PLOT POINT ONE
2. S*&r*" *' -'%"#)!r

inciting
incident

confronts the main
character

PLOT POINT TWO
...
Feel good

Delight

I)!%*#f+ key points
PLOT POINT ONE
2. S*&r*" *' -'%"#)!r

inciting
incident

confronts the main
charac...
L''4 &* where
you want to delight them

www.flickr.com/photos/31878512@N06/4945216951/in/photostream
A%) &,"' where
the biggest barriers may be

www.flickr.com/photos/kruger_otto/5581886586
P,&% f'r multiple
entry & exit points

www.flickr.com/photos/danieldslee/6913766642
I)!%*#f+ content, functional & interaction
elements to addresses the needs

www.flickr.com/photos/angietorres/4564135455
E%"(r! there is
a good balance

www.flickr.com/photos/17207222@N02/5601758478
Feel good

Delight

N'* appropriate, or realistic
PLOT POINT ONE
2. S*&r*" *' -'%"#)!r

confronts the main
character

Hygi...
W! -&%%'* be at
the top all the time

www.flickr.com/photos/alexnormand/5992512756
Feel good

Delight

M'r! realistic
PLOT POINT ONE
2. S*&r*" *' -'%"#)!r

inciting
incident

confronts the main
character

...
D!,#v!r#%$
the right content at the right time
W! %!!) to know:
W0&* w! w&%* to say
W0&* w! w&%* our users to do
U"!r"
are different

www.robotshop.com/blog/where-is-wall-e-1391
I)!%*#f+

content & functionality for each main user
L''4 &* how to tailor views based on
who the user is & their behaviour

www.flickr.com/photos/soundslogical/4255801733
C'%*6*

& prior knowledge plays a key role
T&#,'r messaging
& tone of voice

www.flickr.com/photos/pgoyette/168076182
C'%"#)!r location
& cultural differences

www.flickr.com/photos/scary_mary/5700384580
“ V#"#* #%*!%* is likely to vary between these two
segments. For example, new visitors are less likely to
trust your brand...
M&4! ("! 'f different ways
to capture & engage the user

www.flickr.com/photos/snugglepup/5225953124
T!,, & continuos story
with delights along the way

www.maxfactor.co.uk
C'%"#)!r & &)&p*
your message across touch points
E%"(r! *0! .!""&$!
is considered & delivered across devices

www.flickr.com/photos/visualpunch/7351572896
“ C'%*!%* %!!)" *' b! -0'r!'$r&p0!) to
ensure the intended message is preserved on any
device and at any width “
- Tr!%* W...
“ A $'') p#!-! 'f UX has a narrative and clearly
tells a story, or at least part of a story on a particular
journey. As a ...
W0'!v!r our work is for,
we always need to sell it

www.flickr.com/photos/jox1989/5143301136
I* &,, "*&r* w#*0
Once upon a time...

www.flickr.com/photos/snugglepup/3317051065
Or maybe
O%-! (p'% & )!"#$%...

www.flickr.com/photos/snugglepup/3317051065
A%+ questions?

www.flickr.com/photos/perolofforsberg/6691744587
/&%4 +'(
@annadahlstrom | anna.dahlstrom@gmail.com
www.annadahlstrom.com
www.flickr.com/photos/katerha/8435321969
Upcoming SlideShare
Loading in …5
×

Designing Around Storytelling - UCD2013, London 08 Oct 2013

3,881 views

Published on

Slides from my talk around storytelling in design at the UCD 2013 Conference in London http://2013.ucduk.org.

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 UCD 2013 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

Designing Around Storytelling - UCD2013, London 08 Oct 2013

  1. 1. D!"#$%#%$ &r'(%) "*'r+*!,,#%$ The power of stories & how they can be used in user centred design by Anna Dahlström | @annadahlstrom @ucduk  #ucd2013  
  2. 2. O%-! (p'% & *#.! in a city called ‘Lund’... xxxxwww.flickr.com/photos/ulfk/7976687420
  3. 3. /!r! w0!r! plenty of story time www.flickr.com/photos/excomedia/sets/72157622519563566with/5233990438
  4. 4. W! *r&v!,,!) through those stories www.flickr.com/photos/conorkeller/7860288604
  5. 5. “ W! &r! &" & "p!-#!" addicted to stories. ” - /! S*'r+*!,,#%$ A%#.&, b+ J'%&*0&% G'**"-0&,, www.flickr.com/photos/namkeng/3209117837
  6. 6. S*'r+*!,,#%$ Storytelling S*'r+*!,,#%$
  7. 7. Ev!r+ br&%) wants to tell their story www.flickr.com/photos/kelstew/3658900542
  8. 8. “ If +'( -&%’* *!,, #*, you can’t sell it. ” - P!*!r G(b!r www.flickr.com/photos/g-ratphotos/3404474275
  9. 9. “ R!"(,*" r!p!&*!),+ "0'w" 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." E%*!r#%$ 1-*#'%&, w'r,)" radically alters the way information is processed. ” - F&"*C'.p&%+, W0+ "*'r+*!,,#%$ #" *0! (,*#.&*! w!&p'% www.flickr.com/photos/g-ratphotos/3404474275
  10. 10. S*'r#!" as persuasion tools
  11. 11. N'* 2("* for messaging but also an integral part of the design process www.flickr.com/photos/saucef/7184615025
  12. 12. “ S*'r+*!,,#%$ is at the heart of everything ” - S*!v! L!v#** www.flickr.com/photos/g-ratphotos/3404474275
  13. 13. /!r! #" an element of magic involved www.flickr.com/photos/carlosfpardo/6791950592
  14. 14. www.flickr.com/photos/declanjewell/2181100986
  15. 15. ‘ N'w +'( "!! .!. ’
  16. 16. J&v#!r P!r3 via http://the-wonderist.com/2013/11/05/how-to-see-things-with-new-eyes
  17. 17. ‘ Now you don’t. ’
  18. 18. Q(!!%#! L#&'’" ‘W!%$!%% #% W'%)!r,&%)’ via www.boredpanda.org/wengenn-in-wonderland-sioin-queenie-liao
  19. 19. W0&* )' w! w&%* '(r ("!r" *' "!!? What is the story we want to tell?
  20. 20. W0!r! )' w! w&%* to take them?
  21. 21. “ H#"*'r#-&,,+, stories have always been igniters of action, moving people to do things. ” - P!*!r G(b!r www.flickr.com/photos/g-ratphotos/3404474275
  22. 22. Ev!r+ "*'r+ takes us on a journey www.flickr.com/photos/photomequickbooth/3966382067
  23. 23. S*'r+*!,,#%$ can provide powerful call to actions www.flickr.com/photos/piermario/4188959762
  24. 24. W0&* makes for a good story?
  25. 25. /! b&"#- structure of a story A b!$#%%#%$ A .#)),! /! !%)
  26. 26. Dr&.&*(r$+ knowing how to apply & structure elements to tell a story
  27. 27. /r!! 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 A-* '%! A-* *w' A-* *0r!! Setup Confrontation Resolution
  28. 28. /r!! act structure - applied to UCD PLOT POINT ONE 2. S*&r*" *' -'%"#)!r inciting incident confronts the main character PLOT POINT TWO 4. M&4!" & )!-#"#'% mid point tries to solve the problem but don’t yet have the skills 1. B!-'.!" &w&r! 3. L''4" 5r*0!r #%*' #* A-* '%! A-* *w' Setup Confrontation climax the dramatic question is answered 5. T&4!" &-*#'% / %' &-*#'% A-* *0r!! Resolution
  29. 29. I &"4!) .+ )&) for 3 principles around good storytelling www.flickr.com/photos/perolofforsberg/6691744587
  30. 30. 01 Captures the imagination
  31. 31. “ If +'( -&% imagine yourself in a situation, it’s infinitely scarier. ” - Br&) F&,-0(4 www.flickr.com/photos/g-ratphotos/3404474275
  32. 32. U"!r" %!!) to be able to relate www.flickr.com/photos/estherase/1292315618
  33. 33. W! %!!) *' understand who they are www.flickr.com/photos/cannedtuna/4852756417
  34. 34. “ I %!!) *' (%)!r"*&%) 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. ” - S*!v! W0#**#%$*'% Design Director Dare www.flickr.com/photos/g-ratphotos/3404474275
  35. 35. 02 The dynamic of the story
  36. 36. W0&* &r! *0! !v!%*" & people that tie it all together www.flickr.com/photos/erin_ryan/2584551310
  37. 37. /! !v!r #.p'r*&%* red thread www.flickr.com/photos/pulpolux/3692396234
  38. 38. 03 An element of surprise
  39. 39. “ I% $!%!r&, 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. ” - Br&) F&,-0(-4 www.flickr.com/photos/g-ratphotos/3404474275
  40. 40. I%-,()! an element of surprise & exploration www.flickr.com/photos/conorkeller/4028043294
  41. 41. L!* users find their way around your content www.flickr.com/photos/conorkeller/3879321839
  42. 42. C'%"#)!r non-linear & new forms of storytelling www.flickr.com/photos/soundslogical/4255801733
  43. 43. H'w do we go about it?
  44. 44. I* "*&r*" with this PLOT POINT ONE 2. S*&r*" *' -'%"#)!r inciting incident confronts the main character PLOT POINT TWO 4. M&4!" & )!-#"#'% mid point tries to solve the problem but don’t yet have the skills 1. B!-'.!" &w&r! 3. L''4" 5r*0!r #%*' #* A-* '%! A-* *w' Setup Confrontation climax the dramatic question is answered 5. T&4!" &-*#'% / %' &-*#'% A-* *0r!! Resolution
  45. 45. Feel good Delight I)!%*#f+ key points PLOT POINT ONE 2. S*&r*" *' -'%"#)!r inciting incident confronts the main character PLOT POINT TWO 4. M&4!" & )!-#"#'% mid point tries to solve the problem but don’t yet have the skills 3. L''4" 5r*0!r #%*' #* A-* '%! A-* *w' the dramatic question is answered 5. T&4!" &-*#'% / %' &-*#'% Hygiene 1. B!-'.!" &w&r! climax Setup Confrontation A-* *0r!! Resolution
  46. 46. L''4 &* where you want to delight them www.flickr.com/photos/31878512@N06/4945216951/in/photostream
  47. 47. A%) &,"' where the biggest barriers may be www.flickr.com/photos/kruger_otto/5581886586
  48. 48. P,&% f'r multiple entry & exit points www.flickr.com/photos/danieldslee/6913766642
  49. 49. I)!%*#f+ content, functional & interaction elements to addresses the needs www.flickr.com/photos/angietorres/4564135455
  50. 50. E%"(r! there is a good balance www.flickr.com/photos/17207222@N02/5601758478
  51. 51. Feel good Delight N'* appropriate, or realistic PLOT POINT ONE 2. S*&r*" *' -'%"#)!r confronts the main character Hygiene 1. B!-'.!" &w&r! PLOT POINT TWO 4. M&4!" & )!-#"#'% mid point tries to solve the problem but don’t yet have the skills 3. L''4" 5r*0!r #%*' #* climax the dramatic question is answered 5. T&4!" &-*#'% / %' &-*#'% inciting incident A-* '%! Setup A-* *w' Confrontation A-* *0r!! Resolution
  52. 52. W! -&%%'* be at the top all the time www.flickr.com/photos/alexnormand/5992512756
  53. 53. Feel good Delight M'r! realistic PLOT POINT ONE 2. S*&r*" *' -'%"#)!r inciting incident confronts the main character PLOT POINT TWO 4. M&4!" & )!-#"#'% mid point tries to solve the problem but don’t yet have the skills 3. L''4" 5r*0!r #%*' #* A-* '%! A-* *w' the dramatic question is answered 5. T&4!" &-*#'% / %' &-*#'% Hygiene 1. B!-'.!" &w&r! climax Setup Confrontation A-* *0r!! Resolution
  54. 54. D!,#v!r#%$ the right content at the right time
  55. 55. W! %!!) to know: W0&* w! w&%* to say W0&* w! w&%* our users to do
  56. 56. U"!r" are different www.robotshop.com/blog/where-is-wall-e-1391
  57. 57. I)!%*#f+ content & functionality for each main user
  58. 58. L''4 &* how to tailor views based on who the user is & their behaviour www.flickr.com/photos/soundslogical/4255801733
  59. 59. C'%*6* & prior knowledge plays a key role
  60. 60. T&#,'r messaging & tone of voice www.flickr.com/photos/pgoyette/168076182
  61. 61. C'%"#)!r location & cultural differences www.flickr.com/photos/scary_mary/5700384580
  62. 62. “ V#"#* #%*!%* 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. ” - E-'%"(,*&%-+ www.flickr.com/photos/g-ratphotos/3404474275
  63. 63. M&4! ("! 'f different ways to capture & engage the user www.flickr.com/photos/snugglepup/5225953124
  64. 64. T!,, & continuos story with delights along the way www.maxfactor.co.uk
  65. 65. C'%"#)!r & &)&p* your message across touch points
  66. 66. E%"(r! *0! .!""&$! is considered & delivered across devices www.flickr.com/photos/visualpunch/7351572896
  67. 67. “ C'%*!%* %!!)" *' b! -0'r!'$r&p0!) to ensure the intended message is preserved on any device and at any width “ - Tr!%* W&,*'% www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
  68. 68. “ A $'') p#!-! 'f 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. ” - S*!v! W0#**#%$*'% Design Director Dare www.flickr.com/photos/g-ratphotos/3404474275
  69. 69. W0'!v!r our work is for, we always need to sell it www.flickr.com/photos/jox1989/5143301136
  70. 70. I* &,, "*&r* w#*0 Once upon a time... www.flickr.com/photos/snugglepup/3317051065
  71. 71. Or maybe O%-! (p'% & )!"#$%... www.flickr.com/photos/snugglepup/3317051065
  72. 72. A%+ questions? www.flickr.com/photos/perolofforsberg/6691744587
  73. 73. /&%4 +'( @annadahlstrom | anna.dahlstrom@gmail.com www.annadahlstrom.com www.flickr.com/photos/katerha/8435321969

×