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 Storytelling with 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 conﬂicts, 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 ﬁgures: 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 scientiﬁc 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

Moore’s Law Moores Lawcan be placed inexpensively on •The number of transistors that 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

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 Brand

The Web Designer’s Story Ecosystem Enterprise Product Brand Service

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

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

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

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

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, recommendations, reviews, word of mouth, viral

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

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

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

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

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

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

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

The Customer’s Story Customer Journey When the need arises, the customer has to successfully discover and ﬁnd your offering Discover Customer must easily understand the offering is appropriate for their needs Examine Ease and ﬂow of purchase experience Purchase 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 Use offering: User Journey User Goal

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

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

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

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

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

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

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

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

End-to-End Story Experience Customer

End-to-End Story Experience Customer User

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

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!

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

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

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

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

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

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

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

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

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

http://webexpo.cz	52
http://graphicmint.com	31
http://webexpo.net	20
http://208.131.149.169	3
http://seamus.ws	2
http://webexpo.innit.cz	2
http://www.seamus.ws	2
http://pinterest.com	1
http://localhost	1
http://www.linkedin.com	1

What's the story? 2- Websites

by Seamus Byrne

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 115

Statistics

What’s the story? 2- Websites Presentation Transcript