What's the story? 2- Websites

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

‣ Ongoing Narrative

Contents

• Why do Stories Matter?

• The Evolution of Storytellingwith Technology

• Storytelling in Web Design‣ Business Stories

‣ Customer Stories

‣ User Stories

• Improving Websites with Storytelling

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

– Dr. Walter Fischer

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

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,000 figures: animals, humans and abstract signs

Once Upon a Time...

Oral Tradition• Stories passed on from Generation to Generation

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

• Most commonly referenced by the bard

Written Alphabet• Text Replaced the Oral Tradition (partially)

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

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

• Illuminated manuscript: juxtaposed pictorial art and text

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

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

• Author-ville: Participation via UGC and feedback

The new bards are here!

Non-Linear Stories

The Plot Thickens• Narratives are “literally” everywhere

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

integrated circuit has doubled approximately every two years.

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

‣ Customer Stories

‣ User Stories

The Web Designer’s Story

Enterprise

Ecosystem

Enterprise

Ecosystem

Enterprise

Ecosystem

Enterprise

Product

Ecosystem

Enterprise

Product

ServiceBrand

Ecosystem

Enterprise

Product

ServiceBrand

Touch-points

Business Stories

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

Corporate

Business Stories

Corporate

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

PR/Advertising

Business Stories

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

Corporate

PR/Advertising

Public Domain

Business Stories

Corporate

PR/Advertising

Public Domain Customer

Business Stories

Corporate

PR/Advertising

Public Domain Customer User

Business Stories

Customer and User Stories

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

Public Domain

• 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

The Customer’s Story

CustomerCorporate

PR/Advertising

General Public

Public Domain

Websites

CustomerCorporate

PR/Advertising

General Public

Public Domain

Websites

Expectations

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

Customer Journey

Discover

Purchase

Examine

Customer Journey

Discover

Purchase

Examine

Customer must easily understand the offering is appropriate for their needs

Customer Journey

Ease and flowof purchaseexperience

Discover

Purchase

Examine

Customer Journey

Ease and flowof purchaseexperience

Discover

Purchase

Examine

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

The User’s Story

User Journey begins by interacting with the offering:

User Journey

User Goal

The User’s Story

User Journey

User Goal

Easy to Use

The User’s Story

User Journey

User Goal

Easy to Use

Useful

The User’s Story

User Journey

User Goal

Easy to Use

UsefulMeaningful

The User’s Story

User Journey

User Goal

Easy to Use

UsefulMeaningful

User-centred design brings the user to their goal.

The User’s Story

User Journey

User Goal

Easy to Use

UsefulMeaningful

User-centred design brings the user to their goal.

Expectations

Corporate

PR/Advertising

Public Domain

Customer

What’s the Story?

Corporate

PR/Advertising

Public Domain

Customer

Manage Stories via Websites

The Website

Touchpoint

Corporate

PR/Advertising

Public Domain

Customer

Manage Stories via Websites

The Website

Touchpoint

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

End-to-End Story Experience

Customer

General Public

Prospect

Beginning Middle End

Advocate

The Advocate

• I love product “x”

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

Where Storytelling Goes Wrong!

General Public

Prospect

General Public

Prospect

Customer

General Public

Prospect

Customer U

General Public

Prospect

Customer U

Advocate

General Public

Prospect

Customer U

Advocate

General Public

Prospect

Customer U

Poor Advertising

Unclear Content Faulty

Shopping Cart Not an

easy-to-use App

Advocate

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: Blue Sky Scenarios

• Remove their obstacles (- to +) (tension, time)

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

Share the Script• Communicate story plan to other departments

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

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

• @seamusbyrne

• seamus@graphicmint.com

• www.graphicmint.com

Thank you!

Séamus Byrne

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

What's the story? 2- Websites

Design

Going Mobile: Websites vs. Apps, and What's the Difference?

Lightning: What's the story - Simon

What's a story without a location?

What's the story may rev 2015 color

What's the Big Story?

The story so far: charity websites and email

What's Your Story? Creating Effective Narratives

Five Hype - What's your story?

What's Your Story? Creating Memorable General Sessions

Positioning roulette - What's your brand story?

What's the story april 2015

What's Your Story (HBR)

Romancing the Media: What's Your Story?

What's Your Story?

What's up with QR Codes, Google Place pages, and Mobile websites?

What's the story with product marketing

WISSHH travel bag: What's your story?

P What's Story?

What's the story march 2015

Rotary's Websites: What's New and What's Next