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

What's the story? 2- Websites

  • View
    19

  • Download
    3

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: What's the story? 2- Websites

What’s the Story?Infusing Website Experiences with Storytelling!

Séamus T. Byrne

Page 2: What's the story? 2- Websites

My Story• Séamus Byrne (@seamusbyrne)‣ Creative Director @graphic_mint

‣ My Background

‣ The Organic City

‣ Ongoing Narrative

Page 3: What's the story? 2- Websites

Contents

• Why do Stories Matter?

• The Evolution of Storytellingwith Technology

• Storytelling in Web Design‣ Business Stories

‣ Customer Stories

‣ User Stories

• Improving Websites with Storytelling

Page 4: What's the story? 2- Websites

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

– Dr. Walter Fischer

Page 5: What's the story? 2- Websites

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

Page 6: What's the story? 2- Websites

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

emerging media

Page 7: What's the story? 2- Websites

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

Page 8: What's the story? 2- Websites

Oral Tradition• Stories passed on from Generation to Generation

• Verbally transmitted folktales, sayings, ballads, song or chants

• Most commonly referenced by the bard

Page 9: What's the story? 2- Websites

Written Alphabet• Text Replaced the Oral Tradition (partially)

• 850 B.C. Homer the bard writes the oldest work of western literature: The Iliad

Page 10: What's the story? 2- Websites

The Book of Kells• Circa 800 A.D. the book depicts the 4 Gospels

• Illuminated manuscript: juxtaposed pictorial art and text

Page 11: What's the story? 2- Websites

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

Page 12: What's the story? 2- Websites

The 20th Century• Film, Radio and Television were born

• Story was re-purposed for the different media

Page 13: What's the story? 2- Websites

Linear Stories

Page 14: What's the story? 2- Websites

The Internet• In 1969, the Internet was born

• The Digital Age: Digital and Interactive Storytelling

Page 15: What's the story? 2- Websites

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!

Page 16: What's the story? 2- Websites

Non-Linear Stories

Page 17: What's the story? 2- Websites

The Plot Thickens• Narratives are “literally” everywhere

Page 18: What's the story? 2- Websites

Moores LawMoore’s Law• The number of transistors that can be placed inexpensively on

integrated circuit has doubled approximately every two years.

Page 19: What's the story? 2- Websites

Websites• Tablet, Mobile, TV...

Page 20: What's the story? 2- Websites

Websites• Use Storytelling for consistency across touchpoints

Page 21: What's the story? 2- Websites

Storytelling in Web Design• What Stories do designers encounter:

‣ The Web Designer’s Story

‣ Business Stories

‣ Customer Stories

‣ User Stories

Page 22: What's the story? 2- Websites

The Web Designer’s Story

Page 23: What's the story? 2- Websites

The Web Designer’s Story

Enterprise

Page 24: What's the story? 2- Websites

Ecosystem

The Web Designer’s Story

Enterprise

Page 25: What's the story? 2- Websites

Ecosystem

The Web Designer’s Story

Enterprise

Brand

Page 26: What's the story? 2- Websites

Ecosystem

The Web Designer’s Story

Enterprise

Product

Brand

Page 27: What's the story? 2- Websites

Ecosystem

The Web Designer’s Story

Enterprise

Product

ServiceBrand

Page 28: What's the story? 2- Websites

Ecosystem

The Web Designer’s Story

Enterprise

Product

ServiceBrand

Touch-points

Page 29: What's the story? 2- Websites

Business Stories

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

Corporate

Page 30: What's the story? 2- Websites

Business Stories

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

Corporate

• PR/Advertising Narrative: Press Releases, News and Events, Blog Posts, Social Networks, History, Annual Reports, Advertising

PR/Advertising

Page 31: What's the story? 2- Websites

Business Stories

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

Corporate Brand

• Brand Narrative: Offering (product/service), Tone, Messaging, Positioning, Copy, Metaphor, Features, Advantages

• PR/Advertising Narrative: Press Releases, News and Events, Blog Posts, Social Networks, History, Annual Reports, Advertising

PR/Advertising

Page 32: What's the story? 2- Websites

Corporate

Brand

PR/Advertising

Public Domain

Business Stories

Page 33: What's the story? 2- Websites

Corporate

Brand

PR/Advertising

Public Domain Customer

Business Stories

Page 34: What's the story? 2- Websites

Corporate

Brand

PR/Advertising

Public Domain Customer User

Business Stories

Page 35: What's the story? 2- Websites

Customer and User Stories

• The Public Domain’s Story: Collective Public Opinion, recommendations, reviews, word of mouth, viral

Public Domain

Page 36: What's the story? 2- Websites

Customer and User Stories

• The Public Domain’s Story: Collective Public Opinion, recommendations, reviews, word of mouth, viral

Public Domain Customer

• The Customer’s Story: The path a customer takes towards purchasing an offering

Page 37: What's the story? 2- Websites

Customer and User Stories

• The Public Domain’s Story: Collective Public Opinion, recommendations, reviews, word of mouth, viral

Public Domain Customer

• The Customer’s Story: The path a customer takes towards purchasing an offering

User

• The User’s Story: The path a user takes when using a product and/or service

Page 38: What's the story? 2- Websites

The Customer’s Story

CustomerCorporate

Brand

PR/Advertising

General Public

Public Domain

Websites

WWW

Page 39: What's the story? 2- Websites

The Customer’s Story

CustomerCorporate

Brand

PR/Advertising

General Public

Public Domain

Websites

WWW

Expectations

Page 40: What's the story? 2- Websites

When the need arises, the customer has to successfully discover and find your offering

Customer Journey

The Customer’s Story

Discover

Purchase

Examine

Page 41: What's the story? 2- Websites

When the need arises, the customer has to successfully discover and find your offering

Customer Journey

The Customer’s Story

Discover

Purchase

Examine

Customer must easily understand the offering is appropriate for their needs

Page 42: What's the story? 2- Websites

When the need arises, the customer has to successfully discover and find your offering

Customer Journey

Ease and flowof purchaseexperience

The Customer’s Story

Discover

Purchase

Examine

Customer must easily understand the offering is appropriate for their needs

Page 43: What's the story? 2- Websites

When the need arises, the customer has to successfully discover and find your offering

Customer Journey

Ease and flowof purchaseexperience

The Customer’s Story

Discover

Purchase

Examine

Customer must easily understand the offering is appropriate for their needs

Sales and marketing have ensured a successful customer experience, the plane has landed but the journey is not over yet...

Page 44: What's the story? 2- Websites

The User’s Story

User Journey begins by interacting with the offering:

User Journey

Use

User Goal

Page 45: What's the story? 2- Websites

The User’s Story

User Journey begins by interacting with the offering:

User Journey

Use

User Goal

Easy to Use

Page 46: What's the story? 2- Websites

The User’s Story

User Journey begins by interacting with the offering:

User Journey

Use

User Goal

Easy to Use

Useful

Page 47: What's the story? 2- Websites

The User’s Story

User Journey begins by interacting with the offering:

User Journey

Use

User Goal

Easy to Use

UsefulMeaningful

Page 48: What's the story? 2- Websites

The User’s Story

User Journey begins by interacting with the offering:

User Journey

Use

User Goal

Easy to Use

UsefulMeaningful

User-centred design brings the user to their goal.

Page 49: What's the story? 2- Websites

The User’s Story

User Journey begins by interacting with the offering:

User Journey

Use

User Goal

Easy to Use

UsefulMeaningful

User-centred design brings the user to their goal.

Expectations

Expectations

Page 50: What's the story? 2- Websites

Corporate

Brand

PR/Advertising

Public Domain

Customer

User

What’s the Story?

Page 51: What's the story? 2- Websites

Corporate

Brand

PR/Advertising

Public Domain

Customer

User

Manage Stories via Websites

The Website

Touchpoint

Page 52: What's the story? 2- Websites

Corporate

Brand

PR/Advertising

Public Domain

Customer

User

Manage Stories via Websites

The Website

Touchpoint

Page 53: What's the story? 2- Websites

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

Page 54: What's the story? 2- Websites

End-to-End Story Experience

Page 55: What's the story? 2- Websites

End-to-End Story Experience

Customer

Page 56: What's the story? 2- Websites

End-to-End Story Experience

Customer

User

Page 57: What's the story? 2- Websites

End-to-End Story Experience

Customer

User

General Public

Prospect

Beginning Middle End

Advocate

Page 58: What's the story? 2- Websites

The Advocate

• I love product “x”

Page 59: What's the story? 2- Websites

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

Page 60: What's the story? 2- Websites

Where Storytelling Goes Wrong!

Page 61: What's the story? 2- Websites

Where Storytelling Goes Wrong!

General Public

Page 62: What's the story? 2- Websites

Where Storytelling Goes Wrong!

General Public

Prospect

Page 63: What's the story? 2- Websites

Where Storytelling Goes Wrong!

General Public

Prospect

Customer

Page 64: What's the story? 2- Websites

Where Storytelling Goes Wrong!

General Public

Prospect

Customer U

ser

Page 65: What's the story? 2- Websites

Where Storytelling Goes Wrong!

General Public

Prospect

Customer U

ser

Advocate

Page 66: What's the story? 2- Websites

Where Storytelling Goes Wrong!

General Public

Prospect

Customer U

ser

Advocate

Page 67: What's the story? 2- Websites

Where Storytelling Goes Wrong!

General Public

Prospect

Customer U

ser

Poor Advertising

Unclear Content Faulty

Shopping Cart Not an

easy-to-use App

Advocate

Page 68: What's the story? 2- Websites

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

Page 69: What's the story? 2- Websites

Discover the Story• Unearth the story central to the overall customer and user

experience (story experience).

Page 70: What's the story? 2- Websites

Discover the Story• Avoid complexity by abstraction and metaphor

Page 71: What's the story? 2- Websites

Map Story World• Map ecosystem and identify touch-points

• Domain, Given Circumstances, Audience

Page 72: What's the story? 2- Websites

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

Page 73: What's the story? 2- Websites

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)

Page 74: What's the story? 2- Websites

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

Page 75: What's the story? 2- Websites

Share the Script• Communicate story plan to other departments

Page 76: What's the story? 2- Websites
Page 77: What's the story? 2- Websites
Page 78: What's the story? 2- Websites
Page 79: What's the story? 2- Websites
Page 80: What's the story? 2- Websites
Page 81: What's the story? 2- Websites
Page 82: What's the story? 2- Websites
Page 83: What's the story? 2- Websites

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

Page 84: What's the story? 2- Websites

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

Text

• @seamusbyrne

[email protected]

• www.graphicmint.com

Thank you!

Séamus Byrne

Page 85: What's the story? 2- Websites

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