designing around storytelling - ucd2013, london 08 oct 2013

D!"#$%#%$ &r'(%) "*'r+*!,,#%$ The power of stories & how they can be used in user centred design

by Anna Dahlström | @annadahlstrom@ucduk #ucd2013

http://www.annadahlsrom.com

http://www.annadahlsrom.com

O%-! (p'% & *#.! in a city called ‘Lund’...

xxxxwww.flickr.com/photos/ulfk/7976687420

http://www.flickr.com/photos/dahlstroms/4411448782/


/!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/namkeng/3209117837



S*'r+*!,,#%$ Storytelling

S*'r+*!,,#%$

Ev!r+ br&%) wants to tell their story

www.flickr.com/photos/kelstew/3658900542



www.flickr.com/photos/g-ratphotos/3404474275

“ If +'( -&%’* *!,, #*, you can’t sell it. ”- P!*!r G(b!r


“ 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'%

S*'r#!" as persuasion tools

www.flickr.com/photos/saucef/7184615025

N'* 2("* for messaging but alsoan integral part of the design process

http://desktopwallpaper-s.com/19-Computers/-/Future/



“ S*'r+*!,,#%$ is at the heart of everything ”- S*!v! L!v#**

www.flickr.com/photos/carlosfpardo/6791950592

/!r! #" an element of magic involved



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

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

A-* *0r!!

/r!! act structure

A-* '%!Setup Resolution

A-* *w'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

A-* *0r!!

/r!! act structure - applied to UCD








1. B!-'.!" &w&r! 5. T&4!" &-*#'%/ %' &-*#'%

4. M&4!" & )!-#"#'%

3. L''4" 5r*0!r #%*' #*

2. S*&r*" *' -'%"#)!r

www.flickr.com/photos/perolofforsberg/6691744587

I &"4!) .+ )&) for 3 principles around good storytelling



01 Captures the imagination


“ If +'( -&% imagine yourself in a situation, it’s infinitely scarier. ”

- Br&) F&,-0(4

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

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

I%-,()! an element of surprise & exploration




L!* users find their way around your content




www.flickr.com/photos/soundslogical/4255801733

C'%"#)!r non-linear & new forms of storytelling



H'w do we go about it?

A-* *0r!!

I* "*&r*" with this








1. B!-'.!" &w&r! 5. T&4!" &-*#'%/ %' &-*#'%

4. M&4!" & )!-#"#'%

3. L''4" 5r*0!r #%*' #*

2. S*&r*" *' -'%"#)!r

A-* *0r!!

I)!%*#f+ key points








1. B!-'.!" &w&r! 5. T&4!" &-*#'%/ %' &-*#'%

4. M&4!" & )!-#"#'%

3. L''4" 5r*0!r #%*' #*

2. S*&r*" *' -'%"#)!r

Hygie

neFe

el go

odDe

light

www.flickr.com/photos/31878512@N06/4945216951/in/photostream

L''4 &* where you want to delight them



www.flickr.com/photos/kruger_otto/5581886586

A%) &,"' where the biggest barriers may be



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



A-* *0r!!

N'* appropriate, or realistic



inciting incident

mid point climaxconfronts the main

charactertries to solve the problem but

don’t yet have the skillsthe dramatic question

is answered


1. B!-'.!" &w&r! 5. T&4!" &-*#'%/ %' &-*#'%

4. M&4!" & )!-#"#'%

3. L''4" 5r*0!r #%*' #*

2. S*&r*" *' -'%"#)!r

Hygie

neFe

el go

odDe

light

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

www.flickr.com/photos/alexnormand/5992512756



A-* *0r!!

M'r! realistic








1. B!-'.!" &w&r! 5. T&4!" &-*#'%/ %' &-*#'%

4. M&4!" & )!-#"#'%

3. L''4" 5r*0!r #%*' #*

2. S*&r*" *' -'%"#)!r

Hygie

neFe

el go

odDe

light

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

www.flickr.com/photos/soundslogical/4255801733

L''4 &* how to tailor views based on who the user is & their behaviour



C'%*6* & prior knowledge plays a key role

www.flickr.com/photos/pgoyette/168076182

T&#,'r messaging & tone of voice



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 and understand the key benefits to shopping with you. ”

- E-'%"(,*&%-+

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

www.flickr.com/photos/visualpunch/7351572896

E%"(r! *0! .!""&$! is considered & delivered across devices



www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/

“ 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 designer - everything I do and make is communicating something to someone. ”

- S*!v! W0#**#%$*'%Design Director

Dare

www.flickr.com/photos/jox1989/5143301136

W0'!v!r our work is for, we always need to sell it



I* &,, "*&r* w#*0 Once upon a time...




Or maybeO%-! (p'% & )!"#$%...




www.flickr.com/photos/perolofforsberg/6691744587

A%+ questions?



www.flickr.com/photos/katerha/8435321969

/&%4 +'(@annadahlstrom | [email protected]

mailto:[email protected]

mailto:[email protected]