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

of 83 /83
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

description

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.

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

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

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

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

Once upon a time in a city called ‘Lund’...

xxxxwww.flickr.com/photos/ulfk/7976687420

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

There where plenty of story time

www.flickr.com/photos/excomedia/sets/72157622519563566with/5233990438

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

We travelled through those stories

www.flickr.com/photos/conorkeller/7860288604

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

“ We are as a species addicted to stories. ” - The Storytelling Animal by Jonathan Gottschall

www.flickr.com/photos/namkeng/3209117837

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

Storytelling Storytelling

Storytelling

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

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

“ If you can’t tell it, you can’t sell it. ” - Peter Guber

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

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

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

Stories as persuasion tools

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

www.flickr.com/photos/saucef/7184615025

Not just for messaging but also an integral part of the design process

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

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

“ Storytelling is at the heart of everything ” - Steve Levitt

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

www.flickr.com/photos/carlosfpardo/6791950592

Stories capture our imagination & shows us something new

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

www.flickr.com/photos/declanjewell/2181100986

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

‘ Now you see me. ’

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

Javier Perez via http://the-wonderist.com/2013/11/05/how-to-see-things-with-new-eyes

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

‘ Now you don’t. ’

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

Queenie Liao’s ‘Wengenn in Wonderland’ via www.boredpanda.org/wengenn-in-wonderland-sioin-queenie-liao

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

What do we want our users to see? What is the story we want to tell?

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

Where do we want to take them?

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

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

“ Historically, stories have always been igniters of action, moving people to do things. ”

- Peter Guber

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

Every story takes us on a journey

Image via Shutterstock

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

Storytelling can provide powerful call to actions

www.flickr.com/photos/piermario/4188959762

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

Stories have the ability to motivate, change and create connections

Image via Shutterstock

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

What makes for a good story?

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

The end

The basic structure of a story

A beginning A middle

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

Dramaturgy knowing how to apply & structure

elements to tell a story

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

How a story is told impacts the human experience of its audience

Image via Shutterstock

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

Act three

Three act structure

Act oneSetup Resolution

Act twoConfrontation

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

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

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 aware5. Takes action

/ no action

4. Makes a decision

3. Looks further into it

2. Starts to consider

Act threeAct one Act two

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

www.flickr.com/photos/perolofforsberg/6691744587

I asked my dad for 3 principles around good storytelling

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

01 Captures the imagination

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

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

“ If you can imagine yourself in a situation, it’s infinitely scarier. ”

- Brad Falchuk

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

Users need to be able to relate

www.flickr.com/photos/estherase/1292315618

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

We need to understand who they are

www.flickr.com/photos/cannedtuna/4852756417

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

02 The dynamic of the story

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

What are the events& people that tie it all together

www.flickr.com/photos/erin_ryan/2584551310

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

The ever importantred thread

www.flickr.com/photos/pulpolux/3692396234

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

03 An element of surprise

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

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

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

Include an element of surprise & exploration

www.flickr.com/photos/conorkeller/4028043294

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

Let users find their way around your content

www.flickr.com/photos/conorkeller/3879321839

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

Image via Shutterstock

Consider non-linear & new forms of storytelling

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

Image via Shutterstock

NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/

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

Image via Shutterstock

NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/

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

NYT Snowfall - http://www.nytimes.com/projects/2012/snow-fall/

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

Medium -https://medium.com

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

Medium -https://medium.com

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

Into the Arctic - http://www.intothearctic.gp/en/

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

Into the Arctic - http://www.intothearctic.gp/en/

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

Glimt - http://glimt.it/

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

How do we go about it?

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

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 aware5. Takes action

/ no action

4. Makes a decision

3. Looks further into it

2. Starts to consider

Act threeAct one Act two

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

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 aware5. Takes action

/ no action

4. Makes a decision

3. Looks further into it

2. Starts to consider

Act threeAct one Act two

Awareness Consideration Purchase Post..

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

Awareness Consideration Purchase Post..

1. Becomes aware5. Takes action

/ no action

4. Makes a decision

3. Looks further into it

2. Starts to consider

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

Hygie

neFe

el go

odDe

light

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

Image via Shutterstock

Identify where the biggest barriers may be

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

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

Look at where you want to delight them

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

Plan for multiple entry & exit points

www.flickr.com/photos/danieldslee/6913766642

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

Define content, functional & interaction elements to addresses the needs

www.flickr.com/photos/angietorres/4564135455

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

Ensure there is a good balance

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

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

Awareness Consideration Purchase Post..

1. Becomes aware5. Takes action

/ no action

4. Makes a decision

3. Looks further into it

2. Starts to consider

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

Hygie

neFe

el go

odDe

light

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

1. Becomes aware5. Takes action

/ no action

4. Makes a decision

3. Looks further into it

2. Starts to consider

Act threeAct one Act two

…avoid ending up with this

Setup ResolutionConfrontation

inciting incident

mid point climaxconfronts the main

charactertries to solve the problem but

don’t yet have the skillsthe dramatic question

is answered

PLOT POINT ONE PLOT POINT TWO

Hygie

neFe

el go

odDe

light

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

We cannot be at the top all the time

www.flickr.com/photos/alexnormand/5992512756

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

1. Becomes aware5. Takes action

/ no action

4. Makes a decision

3. Looks further into it

2. Starts to consider

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

Hygie

neFe

el go

odDe

light

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

Awareness

Work with experience goals & life cyclesHy

giene

Feel

good

Delig

ht

Consideration Purchase Post purchase

The site knows me & what I

want

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

Delivering the right content at the right time

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

We need to know:

What we want to say

What we want our users to do

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

Users are different

www.robotshop.com/blog/where-is-wall-e-1391

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

Identify content & functionality for each main user

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

Image via Shutterstock

Look at how to tailor views based on who the user is & their behaviour

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

Context & prior knowledge plays a key role

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

www.flickr.com/photos/pgoyette/168076182

Tailor messaging & tone of voice

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

Consider location & cultural differences

www.flickr.com/photos/scary_mary/5700384580

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

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

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

Make use of different ways to capture & engage the user

www.flickr.com/photos/snugglepup/5225953124

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

Tell a continuos story with delights along the way

www.maxfactor.co.uk

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

Consider & adapt your message across touch points

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

www.flickr.com/photos/visualpunch/7351572896

Ensure the message is considered & delivered across devices

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

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

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

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

Dare

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

www.flickr.com/photos/jox1989/5143301136

Whatever we create & whoever it is for, we want people to do something

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

It all start with Once upon a time...

www.flickr.com/photos/snugglepup/3317051065

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

Or maybeOnce upon a design...

www.flickr.com/photos/snugglepup/3317051065

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

www.flickr.com/photos/katerha/8435321969

Thank you. Questions?@annadahlstrom @byflock www.annadahlstrom.com