breaking borders - designing around storytelling

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 Breaking Borders, Reading 18 August 2015

Upload: debora-ratonowitz

Post on 18-Feb-2016

4 views

Category:

Documents


0 download

DESCRIPTION

The power of stories & how they can be used in UX design

TRANSCRIPT

Page 1: Breaking borders - designing around storytelling

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

Page 2: Breaking borders - designing around storytelling

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

xxxxwww.flickr.com/photos/ulfk/7976687420

Page 3: Breaking borders - designing around storytelling

There where plenty of story time

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

Page 4: Breaking borders - designing around storytelling

We travelled through those stories

www.flickr.com/photos/conorkeller/7860288604

Page 5: Breaking borders - designing around storytelling

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

www.flickr.com/photos/namkeng/3209117837

Page 6: Breaking borders - designing around storytelling

Storytelling Storytelling

Storytelling

Page 7: Breaking borders - designing around storytelling

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

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

Page 8: Breaking borders - designing around storytelling

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: Breaking borders - designing around storytelling

Stories as persuasion tools

Page 10: Breaking borders - designing around storytelling

www.flickr.com/photos/saucef/7184615025

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

Page 11: Breaking borders - designing around storytelling

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

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

Page 12: Breaking borders - designing around storytelling

www.flickr.com/photos/carlosfpardo/6791950592

Stories capture our imagination & shows us something new

Page 13: Breaking borders - designing around storytelling

www.flickr.com/photos/declanjewell/2181100986

Page 14: Breaking borders - designing around storytelling

‘ Now you see me. ’

Page 15: Breaking borders - designing around storytelling

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

Page 16: Breaking borders - designing around storytelling

‘ Now you don’t. ’

Page 17: Breaking borders - designing around storytelling

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

Page 18: Breaking borders - designing around storytelling

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

Page 19: Breaking borders - designing around storytelling

Where do we want to take them?

Page 20: Breaking borders - designing around storytelling

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

Page 21: Breaking borders - designing around storytelling

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

Page 22: Breaking borders - designing around storytelling

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

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

- Peter Guber

Page 23: Breaking borders - designing around storytelling

Every story takes us on a journey

Image via Shutterstock

Page 24: Breaking borders - designing around storytelling

Storytelling can provide powerful call to actions

www.flickr.com/photos/piermario/4188959762

Page 25: Breaking borders - designing around storytelling

Stories have the ability to motivate, change and create connections

Image via Shutterstock

Page 26: Breaking borders - designing around storytelling

What makes for a good story?

Page 27: Breaking borders - designing around storytelling

The end

The basic structure of a story

A beginning A middle

Page 28: Breaking borders - designing around storytelling

Dramaturgy knowing how to apply & structure

elements to tell a story

Page 29: Breaking borders - designing around storytelling

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

Image via Shutterstock

Page 30: Breaking borders - designing around storytelling

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 31: Breaking borders - designing around storytelling

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 32: Breaking borders - designing around storytelling

www.flickr.com/photos/perolofforsberg/6691744587

I asked my dad for 3 principles around good storytelling

Page 33: Breaking borders - designing around storytelling

01 Captures the imagination

Page 34: Breaking borders - designing around storytelling

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

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

- Brad Falchuk

Page 35: Breaking borders - designing around storytelling

Users need to be able to relate

www.flickr.com/photos/estherase/1292315618

Page 36: Breaking borders - designing around storytelling

We need to understand who they are

www.flickr.com/photos/cannedtuna/4852756417

Page 37: Breaking borders - designing around storytelling

02 The dynamic of the story

Page 38: Breaking borders - designing around storytelling

What are the events& people that tie it all together

www.flickr.com/photos/erin_ryan/2584551310

Page 39: Breaking borders - designing around storytelling

The ever important”red thread”

www.flickr.com/photos/pulpolux/3692396234

Page 40: Breaking borders - designing around storytelling

03 An element of surprise

Page 41: Breaking borders - designing around storytelling

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 42: Breaking borders - designing around storytelling

Include an element of surprise & exploration

www.flickr.com/photos/conorkeller/4028043294

Page 43: Breaking borders - designing around storytelling

Let users find their way around your content

www.flickr.com/photos/conorkeller/3879321839

Page 44: Breaking borders - designing around storytelling

Image via Shutterstock

Consider non-linear & new forms of storytelling

Page 45: Breaking borders - designing around storytelling

Image via Shutterstock

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

Page 46: Breaking borders - designing around storytelling

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

Page 47: Breaking borders - designing around storytelling

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

Page 48: Breaking borders - designing around storytelling

Medium -https://medium.com

Page 49: Breaking borders - designing around storytelling

Medium -https://medium.com

Page 50: Breaking borders - designing around storytelling

Into the Arctic - http://www.thefwa.com/shortlist/into-the-arctic-greenpeace

Page 51: Breaking borders - designing around storytelling

Into the Arctic - http://www.thefwa.com/shortlist/into-the-arctic-greenpeace

Page 52: Breaking borders - designing around storytelling

How do we go about it?

Page 53: Breaking borders - designing around storytelling

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 54: Breaking borders - designing around storytelling

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 55: Breaking borders - designing around storytelling

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 56: Breaking borders - designing around storytelling

Image via Shutterstock

Identify where the biggest barriers may be

Page 57: Breaking borders - designing around storytelling

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

Look at where you want to delight them

Page 58: Breaking borders - designing around storytelling

Plan for multiple entry & exit points

www.flickr.com/photos/danieldslee/6913766642

Page 59: Breaking borders - designing around storytelling

Define content, functional & interaction elements to addresses the needs

www.flickr.com/photos/angietorres/4564135455

Page 60: Breaking borders - designing around storytelling

Ensure there is a good balance

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

Page 61: Breaking borders - designing around storytelling

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 62: Breaking borders - designing around storytelling

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 63: Breaking borders - designing around storytelling

We cannot be at the top all the time

www.flickr.com/photos/alexnormand/5992512756

Page 64: Breaking borders - designing around storytelling

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 65: Breaking borders - designing around storytelling

Awareness

Work with experience goals & life cyclesHy

giene

Feel

good

Delig

ht

Consideration Purchase Post purchase

The site knows me & what I

want

Page 66: Breaking borders - designing around storytelling

Delivering the right content at the right time

Page 67: Breaking borders - designing around storytelling

We need to know:

What we want to say

What we want our users to do

Page 68: Breaking borders - designing around storytelling

Users are different

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

Page 69: Breaking borders - designing around storytelling

Identify content & functionality for each main user

Page 70: Breaking borders - designing around storytelling

Image via Shutterstock

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

Page 71: Breaking borders - designing around storytelling

Context & prior knowledge plays a key role

Page 72: Breaking borders - designing around storytelling

www.flickr.com/photos/pgoyette/168076182

Tailor messaging & tone of voice

Page 73: Breaking borders - designing around storytelling

Consider location & cultural differences

www.flickr.com/photos/scary_mary/5700384580

Page 74: Breaking borders - designing around storytelling

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 75: Breaking borders - designing around storytelling

Make use of different ways to capture & engage the user

www.flickr.com/photos/snugglepup/5225953124

Page 76: Breaking borders - designing around storytelling

Tell a continuos story with delights along the way

www.maxfactor.co.uk

Page 77: Breaking borders - designing around storytelling

Consider & adapt your message across touch points

Page 78: Breaking borders - designing around storytelling

www.flickr.com/photos/visualpunch/7351572896

Ensure the message is considered & delivered across devices

Page 79: Breaking borders - designing around storytelling

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 80: Breaking borders - designing around storytelling

www.flickr.com/photos/jox1989/5143301136

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

Page 81: Breaking borders - designing around storytelling

It all start with Once upon a time...

www.flickr.com/photos/snugglepup/3317051065

Page 82: Breaking borders - designing around storytelling

Or maybeOnce upon a design...

www.flickr.com/photos/snugglepup/3317051065

Page 83: Breaking borders - designing around storytelling

www.flickr.com/photos/katerha/8435321969

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