Slides from my talk at Breaking Borders on the 18 August. http://breakingborde.rs/past-events/engagement/ 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.

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

6. Storytelling
Storytelling
Storytelling

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

13. www.flickr.com/photos/declanjewell/2181100986

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/

48. Medium -https://medium.com

49. Medium -https://medium.com

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

68. Users
are different
www.robotshop.com/blog/where-is-wall-e-1391

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