What's the story? 2- Websites

2,976 views
2,862 views

Published on

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

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,976
On SlideShare
0
From Embeds
0
Number of Embeds
214
Actions
Shares
0
Downloads
107
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

What's the story? 2- Websites

  1. 1. What’s the Story? Infusing Website Experiences with Storytelling! Séamus T. Byrne
  2. 2. My Story • Séamus Byrne (@seamusbyrne) ‣ Creative Director @graphic_mint ‣ My Background ‣ The Organic City ‣ Ongoing Narrative
  3. 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. 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. 5. Stories and Community • It is through the sharing of stories that communities: ‣ Build their identities, pass on tradition, construct meaning
  6. 6. The Evolution of Storytelling with Technology • Allowing storytellers to re-craft compelling tales in emerging media
  7. 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. 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. 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. 10. The Book of Kells • Circa 800 A.D. the book depicts the 4 Gospels • Illuminated manuscript: juxtaposed pictorial art and text
  11. 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. 12. The 20th Century • Film, Radio and Television were born • Story was re-purposed for the different media
  13. 13. Linear Stories
  14. 14. The Internet • In 1969, the Internet was born • The Digital Age: Digital and Interactive Storytelling
  15. 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. 16. Non-Linear Stories
  17. 17. The Plot Thickens • Narratives are “literally” everywhere
  18. 18. Moore’s Law Moores Lawcan be placed inexpensively on •The number of transistors that integrated circuit has doubled approximately every two years.
  19. 19. Websites • Tablet, Mobile, TV...
  20. 20. Websites • Use Storytelling for consistency across touchpoints
  21. 21. Storytelling in Web Design • What Stories do designers encounter: ‣ The Web Designer’s Story ‣ Business Stories ‣ Customer Stories ‣ User Stories
  22. 22. The Web Designer’s Story
  23. 23. The Web Designer’s Story Enterprise
  24. 24. The Web Designer’s Story Ecosystem Enterprise
  25. 25. The Web Designer’s Story Ecosystem Enterprise Brand
  26. 26. The Web Designer’s Story Ecosystem Enterprise Product Brand
  27. 27. The Web Designer’s Story Ecosystem Enterprise Product Brand Service
  28. 28. The Web Designer’s Story Ecosystem Enterprise Touch-points Product Brand Service
  29. 29. Business Stories Corporate • Corporate Narrative: Mission,Vision,Values, Name, Corporate Identity
  30. 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. 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. 32. Business Stories Corporate Public Domain PR/Advertising Brand
  33. 33. Business Stories Corporate Public Domain Customer PR/Advertising Brand
  34. 34. Business Stories Corporate Public Domain Customer User PR/Advertising Brand
  35. 35. Customer and User Stories Public Domain • The Public Domain’s Story: Collective Public Opinion, recommendations, reviews, word of mouth, viral
  36. 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. 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. 38. The Customer’s Story General Public Brand PR/Advertising Public Domain WWW Customer Websites Corporate
  39. 39. The Customer’s Story General Public Expectations Brand PR/Advertising Public Domain WWW Customer Websites Corporate
  40. 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. 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. 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. 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. 44. The User’s Story User Journey begins by interacting with the Use offering: User Journey User Goal
  45. 45. The User’s Story User Journey begins by interacting with the Use offering: Easy to Use User Journey User Goal
  46. 46. The User’s Story User Journey begins by interacting with the Use offering: Easy to Use Useful User Journey User Goal
  47. 47. The User’s Story User Journey begins by interacting with the Use offering: Easy to Use Useful User Journey Meaningful User Goal
  48. 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. 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. 50. What’s the Story? Public Domain Corporate Customer PR/Advertising Brand User
  51. 51. Manage Stories via Websites Public Domain Corporate Customer PR/Advertising The Website Touchpoint Brand User
  52. 52. Manage Stories via Websites Public Domain Corporate Customer PR/Advertising The Website Touchpoint Brand User
  53. 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. 54. End-to-End Story Experience
  55. 55. End-to-End Story Experience Customer
  56. 56. End-to-End Story Experience Customer User
  57. 57. End-to-End Story Experience General Public Customer Advocate Prospect User Beginning Middle End
  58. 58. The Advocate • I love product “x”
  59. 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. 60. Where Storytelling Goes Wrong!
  61. 61. Where Storytelling Goes Wrong! G en er al Pu bl ic
  62. 62. Where Storytelling Goes Wrong! G en er al Pu Pr bl os ic pe ct
  63. 63. Where Storytelling Goes Wrong! G en er al Pu Pr bl os ic C pe us ct to m er
  64. 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. 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. 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. 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. 68. Unleash the Storyteller • Crafting a better website experience for your visitors
  69. 69. Discover the Story • Unearth the story central to the overall customer and user experience (story experience).
  70. 70. Discover the Story • Avoid complexity by abstraction and metaphor
  71. 71. Map Story World • Map ecosystem and identify touch-points • Domain, Given Circumstances, Audience
  72. 72. Research the Characters • What are the customer and user goals and expectations?
  73. 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. 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. 75. Share the Script • Communicate story plan to other departments
  76. 76. 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
  77. 77. 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
  78. 78. 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

×