0
What’s the Story?
 Infusing Website Experiences with Storytelling!
            Séamus T. Byrne
My Story
•   Séamus Byrne (@seamusbyrne)
    ‣ Creative Director @graphic_mint
    ‣ My Background
    ‣ The Organic City
...
Contents
•   Why do Stories Matter?
•   The Evolution of Storytelling
    with Technology
•   Storytelling in Web Design
 ...
Why do Stories Matter?
“We experience life as a series of ongoing narratives, as
conflicts, characters, beginnings, middles...
Stories and Community
•   It is through the sharing of stories that communities:
    ‣   Build their identities, pass on t...
The Evolution of Storytelling
with Technology
•   Allowing storytellers to re-craft compelling tales in
    emerging media
Lascaux Caves
 •   Estimated to be 17,000 years old
 •   First recorded evidence of human storytelling
 •   Depicting 2,00...
Oral Tradition
•   Stories passed on from Generation to Generation
•   Verbally transmitted folktales, sayings, ballads, s...
Written Alphabet
•   Text Replaced the Oral Tradition (partially)
•   850 B.C. Homer the bard writes the oldest work of we...
The Book of Kells
•   Circa 800 A.D. the book depicts the 4 Gospels
•   Illuminated manuscript: juxtaposed pictorial art a...
The Printing Press
•   Brought about by Gutenberg in 1439
•   More people had access to new and old knowledge
•   Brought ...
The 20th Century
•   Film, Radio and Television were born
•   Story was re-purposed for the different media
Linear Stories
The Internet
•   In 1969, the Internet was born
•   The Digital Age: Digital and Interactive Storytelling
The Modern Narrative
•   Web 2.0: Blogging, Micro-blogging, Social Networks
•   New Media: Mobile, Broadband, Podcasting
•...
Non-Linear Stories
The Plot Thickens
•   Narratives are “literally” everywhere
Moore’s Law
Moores Lawcan be placed inexpensively on
•The number of transistors that
    integrated circuit has doubled ap...
Websites
•   Tablet, Mobile, TV...
Websites
•   Use Storytelling for consistency across touchpoints
Storytelling in Web Design
•    What Stories do designers encounter:
    ‣ The Web Designer’s Story
    ‣ Business Stories...
The Web Designer’s Story
The Web Designer’s Story




   Enterprise
The Web Designer’s Story


                           Ecosystem




   Enterprise
The Web Designer’s Story


                           Ecosystem




   Enterprise




         Brand
The Web Designer’s Story


                               Ecosystem




   Enterprise
                     Product




   ...
The Web Designer’s Story


                                     Ecosystem




   Enterprise
                           Pro...
The Web Designer’s Story


                                               Ecosystem




   Enterprise
                 Tou...
Business Stories

    Corporate


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

    Corporate          PR/Advertising


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

    Corporate          PR/Advertising             Brand


•   Corporate Narrative: Mission,Vision,Values...
Business Stories

  Corporate




                 Public Domain
PR/Advertising




    Brand
Business Stories

  Corporate




                 Public Domain   Customer
PR/Advertising




    Brand
Business Stories

  Corporate




                 Public Domain   Customer   User
PR/Advertising




    Brand
Customer and User Stories


    Public Domain


•   The Public Domain’s Story: Collective Public Opinion,
    recommendati...
Customer and User Stories


    Public Domain       Customer


•   The Public Domain’s Story: Collective Public Opinion,
 ...
Customer and User Stories


    Public Domain        Customer            User


•   The Public Domain’s Story: Collective ...
The Customer’s Story

                    General Public

            Brand




 PR/Advertising
                          ...
The Customer’s Story

                    General Public   Expectations
            Brand




 PR/Advertising
            ...
The Customer’s Story
  Customer Journey

              When the need arises, the customer has to
              successfull...
The Customer’s Story
  Customer Journey

              When the need arises, the customer has to
              successfull...
The Customer’s Story
  Customer Journey

              When the need arises, the customer has to
              successfull...
The Customer’s Story
  Customer Journey

              When the need arises, the customer has to
              successfull...
The User’s Story

                  User Journey begins by
                  interacting with the     Use
                ...
The User’s Story

                  User Journey begins by
                  interacting with the     Use
                ...
The User’s Story

                  User Journey begins by
                  interacting with the     Use
                ...
The User’s Story

                  User Journey begins by
                  interacting with the     Use
                ...
The User’s Story

                             User Journey begins by
                             interacting with the   ...
The User’s Story
                   Expectations
                                  User Journey begins by
                ...
What’s the Story?


                       Public Domain
  Corporate




                          Customer
PR/Advertising...
Manage Stories via Websites


                              Public Domain
  Corporate




                                ...
Manage Stories via Websites


                              Public Domain
  Corporate




                                ...
Love Stories
•   The “love story” between your client and their customer is
    based on real commitment, understanding an...
End-to-End Story Experience
End-to-End Story Experience


           Customer
End-to-End Story Experience


           Customer




                      User
End-to-End Story Experience


General Public              Customer          Advocate




                 Prospect        ...
The Advocate
•   I love product “x”
Example: Apple Stories
•   Emotional connection with customer based on Corporate,
    PR and Brand stories.
•   Meeting Ex...
Where Storytelling Goes Wrong!
Where Storytelling Goes Wrong!
  G
   en
     er
       al
       Pu
            bl
               ic
Where Storytelling Goes Wrong!
  G
   en
     er
       al
       Pu



                    Pr
            bl



         ...
Where Storytelling Goes Wrong!
  G
   en
     er
       al
       Pu



                    Pr
            bl



         ...
Where Storytelling Goes Wrong!




                                                                    r
                 ...
Where Storytelling Goes Wrong!
  G
   en
     er
       al
       Pu



                    Pr
            bl



         ...
Where Storytelling Goes Wrong!
  G
   en
     er
       al
       Pu



                    Pr
            bl



         ...
Where Storytelling Goes Wrong!
              Poor
            Advertising
  G


                           Unclear
   en
 ...
Unleash the Storyteller
•   Crafting a better website experience for your visitors
Discover the Story
•   Unearth the story central to the overall customer and user
    experience (story experience).
Discover the Story
•   Avoid complexity by abstraction and metaphor
Map Story World
•   Map ecosystem and identify touch-points
•   Domain, Given Circumstances, Audience
Research the Characters
•   What are the customer and user goals and expectations?
Outline Basic Plot
•   Craft a story designed to provide customers and/or users
    with an optimal Beginning, Middle, End...
Set the Stage
•   Every element from language, Choices available, and even UI
    arrangement can be used to support main ...
Share the Script
•   Communicate story plan to other departments
Why Use Storytelling?
•   Deeper Meaning: Enhance UCD with another layer of
    relevance
•   Automatic Advantage: Humans ...
Thank you!

                                          Séamus Byrne
                                          •   @seamusby...
Image Credits
•   http://onedollardietproject.files.wordpress.com/2009/05/img_2666.jpg

•   http://www.parkland.lib.sk.ca/S...
What's the story? 2- Websites
What's the story? 2- Websites
What's the story? 2- Websites
What's the story? 2- Websites
What's the story? 2- Websites
What's the story? 2- Websites
What's the story? 2- Websites
Upcoming SlideShare
Loading in...5
×

What's the story? 2- Websites

2,545

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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×