Séamus Byrne presents a customised version of What's The Story? focusing on infusing websites with the craft of storytelling

1. What’s the Story?
Infusing Website Experiences with Storytelling!
Séamus T. Byrne

2. My Story
• Séamus Byrne (@seamusbyrne)
‣ Creative Director @graphic_mint
‣ My Background
‣ The Organic City
‣ Ongoing Narrative

3. Contents
• Why do Stories Matter?
• The Evolution of Storytelling
with Technology
• Storytelling in Web Design
‣ Business Stories
‣ Customer Stories
‣ User Stories
• Improving Websites with Storytelling

4. Why do Stories Matter?
“We experience life as a series of ongoing narratives, as
conflicts, characters, beginnings, middles and ends.”
– Dr. Walter Fischer

5. Stories and Community
• It is through the sharing of stories that communities:
‣ Build their identities, pass on tradition, construct meaning

6. The Evolution of Storytelling
with Technology
• Allowing storytellers to re-craft compelling tales in
emerging media

7. Lascaux Caves
• Estimated to be 17,000 years old
• First recorded evidence of human storytelling
• Depicting 2,000 figures: animals, humans and abstract signs
Once Upon a Time...

8. Oral Tradition
• Stories passed on from Generation to Generation
• Verbally transmitted folktales, sayings, ballads, song or chants
• Most commonly referenced by the bard

9. Written Alphabet
• Text Replaced the Oral Tradition (partially)
• 850 B.C. Homer the bard writes the oldest work of western
literature: The Iliad

10. The Book of Kells
• Circa 800 A.D. the book depicts the 4 Gospels
• Illuminated manuscript: juxtaposed pictorial art and text

11. The Printing Press
• Brought about by Gutenberg in 1439
• More people had access to new and old knowledge
• Brought about a scientific revolution, rise of the novel

12. The 20th Century
• Film, Radio and Television were born
• Story was re-purposed for the different media

13. Linear Stories

14. The Internet
• In 1969, the Internet was born
• The Digital Age: Digital and Interactive Storytelling

15. The Modern Narrative
• Web 2.0: Blogging, Micro-blogging, Social Networks
• New Media: Mobile, Broadband, Podcasting
• Author-ville: Participation via UGC and feedback
The new bards are here!

16. Non-Linear Stories

17. The Plot Thickens
• Narratives are “literally” everywhere

18. Moore’s Law
Moores Lawcan be placed inexpensively on
•The number of transistors that
integrated circuit has doubled approximately every two years.

19. Websites
• Tablet, Mobile, TV...

20. Websites
• Use Storytelling for consistency across touchpoints

21. Storytelling in Web Design
• What Stories do designers encounter:
‣ The Web Designer’s Story
‣ Business Stories
‣ Customer Stories
‣ User Stories

22. The Web Designer’s Story

23. The Web Designer’s Story
Enterprise

24. The Web Designer’s Story
Ecosystem
Enterprise

25. The Web Designer’s Story
Ecosystem
Enterprise
Brand

26. The Web Designer’s Story
Ecosystem
Enterprise
Product
Brand

27. The Web Designer’s Story
Ecosystem
Enterprise
Product
Brand
Service

28. The Web Designer’s Story
Ecosystem
Enterprise
Touch-points
Product
Brand
Service

29. Business Stories
Corporate
• Corporate Narrative: Mission,Vision,Values, Name,
Corporate Identity

30. Business Stories
Corporate PR/Advertising
• Corporate Narrative: Mission,Vision,Values, Name,
Corporate Identity
• PR/Advertising Narrative: Press Releases, News and
Events, Blog Posts, Social Networks, History, Annual Reports,
Advertising

31. Business Stories
Corporate PR/Advertising Brand
• Corporate Narrative: Mission,Vision,Values, Name,
Corporate Identity
• PR/Advertising Narrative: Press Releases, News and
Events, Blog Posts, Social Networks, History, Annual Reports,
Advertising
• Brand Narrative: Offering (product/service), Tone,
Messaging, Positioning, Copy, Metaphor, Features, Advantages

32. Business Stories
Corporate
Public Domain
PR/Advertising
Brand

33. Business Stories
Corporate
Public Domain Customer
PR/Advertising
Brand

34. Business Stories
Corporate
Public Domain Customer User
PR/Advertising
Brand

35. Customer and User Stories
Public Domain
• The Public Domain’s Story: Collective Public Opinion,
recommendations, reviews, word of mouth, viral

36. Customer and User Stories
Public Domain Customer
• The Public Domain’s Story: Collective Public Opinion,
recommendations, reviews, word of mouth, viral
• The Customer’s Story: The path a customer takes
towards purchasing an offering

37. Customer and User Stories
Public Domain Customer User
• The Public Domain’s Story: Collective Public Opinion,
recommendations, reviews, word of mouth, viral
• The Customer’s Story: The path a customer takes
towards purchasing an offering
• The User’s Story: The path a user takes when using a
product and/or service

38. The Customer’s Story
General Public
Brand
PR/Advertising
Public Domain
WWW
Customer Websites
Corporate

39. The Customer’s Story
General Public Expectations
Brand
PR/Advertising
Public Domain
WWW
Customer Websites
Corporate

40. The Customer’s Story
Customer Journey
When the need arises, the customer has to
successfully discover and find your offering Discover
Examine
Purchase

41. The Customer’s Story
Customer Journey
When the need arises, the customer has to
successfully discover and find your offering Discover
Customer must easily
understand the offering is
appropriate for their needs Examine
Purchase

42. The Customer’s Story
Customer Journey
When the need arises, the customer has to
successfully discover and find your offering Discover
Customer must easily
understand the offering is
appropriate for their needs Examine
Ease and flow
of purchase
experience Purchase

43. The Customer’s Story
Customer Journey
When the need arises, the customer has to
successfully discover and find your offering Discover
Customer must easily
understand the offering is
appropriate for their needs Examine
Ease and flow
of purchase
experience Purchase
Sales and marketing have
ensured a successful customer
experience, the plane has landed but
the journey is not over yet...

44. The User’s Story
User Journey begins by
interacting with the Use
offering:
User Journey
User Goal

45. The User’s Story
User Journey begins by
interacting with the Use
offering:
Easy to Use
User Journey
User Goal

46. The User’s Story
User Journey begins by
interacting with the Use
offering:
Easy to Use
Useful
User Journey
User Goal

47. The User’s Story
User Journey begins by
interacting with the Use
offering:
Easy to Use
Useful
User Journey
Meaningful
User Goal

48. The User’s Story
User Journey begins by
interacting with the Use
offering:
Easy to Use
Useful
User Journey
Meaningful
User-centred design brings
the user to their goal.
User Goal

49. The User’s Story
Expectations
User Journey begins by
interacting with the Use
offering:
Easy to Use
Useful
User Journey
Meaningful
Expectations
User-centred design brings
the user to their goal.
User Goal

50. What’s the Story?
Public Domain
Corporate
Customer
PR/Advertising
Brand User

51. Manage Stories via Websites
Public Domain
Corporate
Customer
PR/Advertising The
Website
Touchpoint
Brand User

52. Manage Stories via Websites
Public Domain
Corporate
Customer
PR/Advertising The
Website
Touchpoint
Brand User

53. Love Stories
• The “love story” between your client and their customer is
based on real commitment, understanding and connection
• Increase the chances of brand loyalty and offering adoption

54. End-to-End Story Experience

55. End-to-End Story Experience
Customer

56. End-to-End Story Experience
Customer
User

57. End-to-End Story Experience
General Public Customer Advocate
Prospect User
Beginning Middle End

58. The Advocate
• I love product “x”

59. Example: Apple Stories
• Emotional connection with customer based on Corporate,
PR and Brand stories.
• Meeting Expectations, consistency between stories
• Founded in garage, Adam and Eve eating forbidden fruit

60. Where Storytelling Goes Wrong!

61. Where Storytelling Goes Wrong!
G
en
er
al
Pu
bl
ic

62. Where Storytelling Goes Wrong!
G
en
er
al
Pu
Pr
bl
os
ic
pe
ct

63. Where Storytelling Goes Wrong!
G
en
er
al
Pu
Pr
bl
os
ic
C
pe
us
ct
to
m
er

64. Where Storytelling Goes Wrong!
r
se
U
er
m
to
us
C
ct
pe
os
Pr
ic
bl
Pu
al
er
en
G

65. Where Storytelling Goes Wrong!
G
en
er
al
Pu
Pr
bl
os
ic
C
pe
us
ct
to
m
er
U
se
r
Advocate

66. Where Storytelling Goes Wrong!
G
en
er
al
Pu
Pr
bl
os
ic
C
pe
us
ct
to
m
er
U
se
r
Advocate

67. Where Storytelling Goes Wrong!
Poor
Advertising
G
Unclear
en
er
Content
Faulty
al
Pu
Shopping Cart
Pr
bl
Not an
os
ic
C
pe
us
easy-to-use App
ct
to
m
er
U
se
r
Advocate

68. Unleash the Storyteller
• Crafting a better website experience for your visitors

69. Discover the Story
• Unearth the story central to the overall customer and user
experience (story experience).

70. Discover the Story
• Avoid complexity by abstraction and metaphor

71. Map Story World
• Map ecosystem and identify touch-points
• Domain, Given Circumstances, Audience

72. Research the Characters
• What are the customer and user goals and expectations?

73. Outline Basic Plot
• Craft a story designed to provide customers and/or users
with an optimal Beginning, Middle, End: Blue Sky Scenarios
• Remove their obstacles (- to +) (tension, time)

74. Set the Stage
• Every element from language, Choices available, and even UI
arrangement can be used to support main story
• Presentation/visual structure, elements from theatre

75. Share the Script
• Communicate story plan to other departments

83. Why Use Storytelling?
• Deeper Meaning: Enhance UCD with another layer of
relevance
• Automatic Advantage: Humans are hardwired to storytelling
• Emotional response: Positive reactions increase adoption
• Cohesive Experience: Harmonic, Holistic and end-to-end

84. Thank you!
Séamus Byrne
• @seamusbyrne
• seamus@graphicmint.com
• www.graphicmint.com
Text
FIN.
• Telling stories is as basic to human beings as eating. More so, in
fact, for while food makes us live, stories are what make our lives
worth living. They are what make our condition human.
- Richard Kearny, On Stories

85. Image Credits
• http://onedollardietproject.files.wordpress.com/2009/05/img_2666.jpg
• http://www.parkland.lib.sk.ca/SASM%202009.jpeg
• http://designgraphics.ncsu.edu:82/designtech/img/Research2008_NonLinearNarative.jpg
• http://storycharts.ca/wp-content/uploads/2009/08/SchindlersList.jpg
• http://mtcompletecomm.com/images/res_sheets/overviewLG.jpg
• http://yamz.files.wordpress.com/2009/04/bard_1.jpg
• http://3.bp.blogspot.com/_vxEaWyLdV44/SwMNMuan0fI/AAAAAAAAAME/JZ2WzJlgaGM/s1600/
TRUFFLES+-+dog.jpg
• http://media.photobucket.com/image/map%20storyworld/griffinial/MapleStory_world_map.png
• http://wiki.fluidproject.org/download/attachments/3904542/Kivio-personas-overview.png
• http://www.linlindesigns.com/images/exploreChicago_userScenario.jpg
• http://villagetheatre.files.wordpress.com/2009/08/p1050025.jpg
• http://img709.imageshack.us/i/sansspicture.jpg/
• http://hughgrahamcreative.com/images/blog-pilgrimsprogress.jpg
• http://2pass.files.wordpress.com/2009/10/bard.jpg