Telling Stories Through Design

55
TELLING STORIES THROUGH DESIGN 11 June 2010 — Hannah Donovan

description

Web Directions @Media, London 11:45, 11 June 2010 Hannah Donovan talks about the designer as a storyteller—especially in terms of the importance of this role within a team. Improve your output as a designer by taking a closer look at influencing the input. As a visual narrator we help to visualise, inspire and curate for the people we work with as well as connecting scenarios around the larger product saga that supports the interfaces we design. By examining your input, make your output more effective with your team and users alike, paving paths for people to tell their own stories as your product evolves over time.

Transcript of Telling Stories Through Design

Page 1: Telling Stories Through Design

TELLING STORIES THROUGH DESIGN

11 June 2010 — Hannah Donovan

Page 2: Telling Stories Through Design

MY FRUSTRATION...

Prologue

Page 3: Telling Stories Through Design

Prologue

IT’S NOT YOUR DESIGN OUTPUT THAT WILL MAKE OR BREAK THE PRODUCT, IT’S ALL THAT OTHER STUFF...

Page 4: Telling Stories Through Design

ALL THE INPUTS.

Prologue

Page 5: Telling Stories Through Design

IT DOESN’T MATTER HOW TALENTED THE PEOPLE ARE, IF THE PROCESS SUCKS, THE PRODUCT IS SUCKS.

Prologue

Page 6: Telling Stories Through Design

Prologue

Page 7: Telling Stories Through Design

Prologue

SO WHAT DOES THIS HAVE TO DO WITH STORYTELLING?

Page 8: Telling Stories Through Design

YOU ARE THE STORYTELLERPart 1

Page 9: Telling Stories Through Design

YOUR SUPERPOWER: YOU CAN DRAW

Part 1

Page 10: Telling Stories Through Design

Examples of sequential visuals: Comics & film storyboards

Art credit: Ron Smith

Cred

it: L

ucas

Art

s

Page 11: Telling Stories Through Design

My (crappy) sketches for Last.fm’s Best of 2009 feature

Page 12: Telling Stories Through Design

1.The finished product

Page 13: Telling Stories Through Design

1.Some of our tools

Page 14: Telling Stories Through Design

1.

Page 15: Telling Stories Through Design

For Phase 2, we will round out the group to showcase the breadth of scrobblers and possibly

include content like: deep links to build, tutorials, developer links and generally more granularity.

JOIN THE GROUPFOR MORE UPDATES!

IN BETA

DOES IT SCROBBLE?The answer is almost

always, YES!

Scrobbling tracks what you listen to

in a media player. Learn more.

Looking for scrobbling tips? Trade

them in the forums.

Don’t see your favourite? Check out Build for the more exotic

scrobblers (more always being added)

Spotify HypeMachine MOGNEW & FEATURED SCROBBLERS

PLUS MANY MORE — WHICH DO YOU USE?

page content

Learn More » Learn More » Learn More »

iTunesiPOdWindows Media PlayerWinamp

AmarokAndroidlalaCoverSutra

More…

Featured content could be the latest ‘o!cial’ partners or

just new cool scrobbling clients. Since this content changes

regularly, it might make sense to do these using a ‘gumball’

template.

More easily maintainable list for our veteran scrobbling

clients.

A hint that there is more on Build, but that it’s a work in

progress.

Letting users know we will be adding more soon

House style “sketchy” visual

Page 16: Telling Stories Through Design

PART 1 — RECAP• Drawing in front of, or with others motivates and inspires

• Sets the stage for the story, puts everyone on a similar track.

• Starts a dialogue, breaks down barriers, allows others to start adding & gives them peace of mind

Page 17: Telling Stories Through Design

Part 2

GOOD TEAMWORK IS STORYTELLING

Page 18: Telling Stories Through Design

STORYTELLING COMES FROM AN ORAL TRADITION

Part 2

Page 19: Telling Stories Through Design

STORYTELLING IN AGILE

Part 2

Page 20: Telling Stories Through Design

MAKING CONVERSATIONS HAPPEN

Part 2

Page 21: Telling Stories Through Design

ARM YOURSELF WITH A DRAWING (OR THE ABILITY TO MAKE ONE) AND A STORY.

Part 2

Page 22: Telling Stories Through Design

THINK LIKE A FILM CREW

Part 2

Page 23: Telling Stories Through Design

LET INFLUENCES IN. YOU’RE THE EDITOR.

Part 2

Page 24: Telling Stories Through Design

Bits & bobs of the overarching story arc

Page 25: Telling Stories Through Design

Tactical UI implementation for a single story…

Page 26: Telling Stories Through Design

PART 2 - RECAP• Get good at starting conversations. Put yourself at the centre of the narrative

• Take advantage of Agile to keep conversations flowing. Think like a film crew; edit against the plot.

• Like a serial publication, start with a story arc, then write as many stories as you need

Page 27: Telling Stories Through Design

STORYTELLING WITHIN AN ORGANISATION

Part 3

Page 28: Telling Stories Through Design

STORIES ARE ALREADY NATURAL FOR AN ORGANISATION.

Part 3

Page 29: Telling Stories Through Design

ORGANISATIONAL LORE

Part 3

Page 30: Telling Stories Through Design

Examples of lore collecting 2007 - 2010

Page 31: Telling Stories Through Design

Weaving user’s stories into the organisational lore…

Page 32: Telling Stories Through Design

A NARRATIVE APPROACH TO PRESENTATION

Part 3

Page 33: Telling Stories Through Design

STORIES: UP, DOWN& AROUND…

Part 3

Page 34: Telling Stories Through Design

A project that sparked educational storytelling

Page 35: Telling Stories Through Design

PART 3 — SUMMARY• Gather company lore & spread it

• Use a narrative approach to storytelling

• Give everyone (especially people up the chain) a story to tell.

Page 36: Telling Stories Through Design

YOUR TOOLKITPart 4

Page 37: Telling Stories Through Design

Part 4

BE MULTI-DISCIPLINARY

Page 38: Telling Stories Through Design

“PUT A LOT OF GUNS IN A LOT OF DRAWERS”.

Part 4

Page 39: Telling Stories Through Design

Part 4

WRITE BIG PARTS FOR YOUR USERS.

Page 40: Telling Stories Through Design

Guerilla user testing

Page 41: Telling Stories Through Design

WRITE IT DOWN AND PASS IT ON.

Part 4

Page 42: Telling Stories Through Design

DOING A 180

Part 4

Page 43: Telling Stories Through Design

PLACE:

TAKES EFFECT:DATE:

COMPONENT:

13 / 04 / 10

LONDON HQ

SPRINT 35 VERSION NUMBER: 1

DDM Template

Your NEW story here

Page 44: Telling Stories Through Design

PART 4 — RECAP• Don’t just design, learn a bit of everything

• Explore a lot of routes

• Write big parts for your users

• Write down your stories so people can refer to them later.

Page 45: Telling Stories Through Design

STORIES FOR THE END USER Part 5

Page 46: Telling Stories Through Design

“STORY IS ABOUT RESPECT FOR THE AUDIENCE”

Part 5

Page 47: Telling Stories Through Design

Part 5

“STORIES ARE ABOUT ARCHETYPES, NOT STEREOTYPES”

Page 48: Telling Stories Through Design

APPLY A CLASSIC NARRATIVE STRUCTURE TO SCENARIOS

Part 5

Page 49: Telling Stories Through Design

Part 5

Page 50: Telling Stories Through Design

HURDLING THE CONCEPTUAL MODEL

Part 5

Page 51: Telling Stories Through Design

THE “HOW” NEEDS TO BE A STORY

Part 5

Page 52: Telling Stories Through Design

SHOW NOT TELL.

Part 5

Page 53: Telling Stories Through Design

PART 5 — RECAP• Treat the audience with respect

• Don’t resort to clichés, create realistic scenarios

• Create ‘BME’ narratives around these scenarios

• Back *new* conceptual models with a story; attempt to show it, not tell it!

Page 54: Telling Stories Through Design

“STORIES ARE WHAT DREAMS ARE MADE OF”*

* Warning: late-night whisky quotation

Epilogue