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.

1. TELLING STORIES
THROUGH DESIGN
11 June 2010 — Hannah Donovan

2. Prologue
MY FRUSTRATION...

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

4. Prologue
ALL THE INPUTS.

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

6. Prologue

7. Prologue
SO WHAT DOES THIS HAVE TO DO
WITH STORYTELLING?

8. YOU ARE THE STORYTELLER
Part 1

9. Part 1
YOUR SUPERPOWER:
YOU CAN DRAW

10. ith
Art credit: Ron Sm
Credit: Lucas Arts
Examples of sequential visuals: Comics & film storyboards

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

12. 1.
The finished product

13. 1.
Some of our tools

14. 1.

15. l round out the links and gener
For Phase 2, we wil links to build, tu torials, developer
include content like: deep
IN
B
ET
A Letting users know
OBBLERS
EATURED SCR
DOES IT NEW & F
SCROBBLE?t
s Spotify
HypeMachine
MOG Featured content c
just new cool scrob
almo Learn More »
The answer is Learn More »
Learn More » regularly, it might
m
always, YES! template.
O YOU USE?
O RE — WHICH D
racks what y
ou listen to PLUS MANY M
Scrobbling t More… More easily maint
r. Learn more. Amarok
in a media playe iTunes clients.
Android
de iPOd
bbling tips? Tra Windows Media
Player lala
L ooking for scro CoverSutra
orums. Winamp
them in the f
e exotic A hint that there
ld for the mor
favourite? Check out Bui
OUP Don’t see your
J OIN THE GR always being a
dded) progress.
obblers (more
ATES! scr
FOR MORE UPD
page content
House style “sketchy” visual

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

17. GOOD TEAMWORK
IS STORYTELLING
Part 2

18. Part 2
STORYTELLING COMES FROM AN ORAL
TRADITION

19. Part 2
STORYTELLING IN AGILE

20. Part 2
MAKING CONVERSATIONS HAPPEN

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

22. Part 2
THINK LIKE A FILM CREW

23. Part 2
LET INFLUENCES IN. YOU’RE THE
EDITOR.

24. Bits & bobs of the overarching story arc

25. Tactical UI implementation for a single story…

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

27. STORYTELLING WITHIN AN
ORGANISATION
Part 3

28. Part 3
STORIES ARE ALREADY NATURAL FOR
AN ORGANISATION.

29. Part 3
ORGANISATIONAL LORE

30. Examples of lore collecting 2007 - 2010

31. Weaving user’s stories into the organisational lore…

32. Part 3
A NARRATIVE APPROACH TO
PRESENTATION

33. Part 3
STORIES: UP, DOWN
& AROUND…

34. A project that sparked educational storytelling

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

36. YOUR TOOLKIT
Part 4

37. Part 4
BE MULTI-DISCIPLINARY

38. Part 4
“PUT A LOT OF GUNS IN A LOT OF
DRAWERS”.

39. Part 4
WRITE BIG PARTS FOR YOUR USERS.

40. Guerilla user testing

41. Part 4
WRITE IT DOWN AND PASS IT ON.

42. Part 4
DOING A 180

43. Your NEW story here
COMP ON EN T:
TA KE S EF FE CT:
SPRINT 35 VE RS IO N NUMB ER : 1
DATE : 13 / 04 / 10
PL AC E: LONDON HQ
DDM Template

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

45. STORIES FOR THE END USER
Part 5

46. Part 5
“STORY IS ABOUT RESPECT FOR THE
AUDIENCE”

47. Part 5
“STORIES ARE ABOUT ARCHETYPES,
NOT STEREOTYPES”

48. Part 5
APPLY A CLASSIC NARRATIVE
STRUCTURE TO SCENARIOS

49. Part 5

50. Part 5
HURDLING THE CONCEPTUAL MODEL

51. Part 5
THE “HOW” NEEDS TO BE A STORY

52. Part 5
SHOW NOT TELL.

53. 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!

54. Epilogue
“STORIES ARE WHAT DREAMS ARE
MADE OF”*
* Warning: late-night whisky quotation

55. Thanks for Listening!
CONTACT:
Email: hannah@last.fm / Twitter: @han
FLICKR POOL:
http://www.flickr.com/groups/1456738@N23/pool
SOURCES & FURTHER READING:
http://delicious.com/hannahdonovan/storytelling