This article accompanies my talk at the webinale conference Berlin from June 3rd to June 5th. 2013. A video of the talk in German language is accessible at the end of this article. 

Management Summary

In my article UX and Stories I already uncovered the connection between a good user experience and storytelling. This article sharpens the understanding of the interconnection between a story’s dramaturgy and the user experience of a website. The idea is simple: Just stage the experiences of a user according to a classic Aristotelian 3-act drama. Too uninspiring? Lean yourself back and see.

Nice Experiences And A Definition of X

It is five years ago, when my husband and me visited New York City. I still remember the feeling of being overwhelmed by the coulisse of the city, its enormous dimensions, the colours, the typical sounds and the breathtaking speed.

Essentially we only travelled to New York to see an exhibition at the Museum of Modern Art. It was “Design And The Elastic Mind” and the trip was worth while just because of this great exhibition. It even was thrilling to enter the famous MOMA entrance hall, although I was somewhat alienated by the close-to-military way the museum guards “encouraged” the visitors to cue in front of the wardrobe.
Of course we could not hinder ourselves from doing the ordinary tourist tour like the classic city night tour by bus, that produced a lot of wiggly pictures. So we enjoyed all the things an ordinary inhabitant of New York (if there is any) presumably has never seen, like the toy store FAO Schwarz, the Apple Flagship Store or the Central Park. However the unrivaled highlight was the hotel. In exchange for our impressively small and nearly windowless room it offered a gorgeous indoor pool-bar. When I left the city via airplane, the customs officer emphatically said: “You will come back.” I guess he is right, because the experience of this trip is still in my mind.

Video 1: My trip to New York

I bet everybody of you bears similar memories of travel experiences in your mind. If you analyze it you’ll find out that all good and long lasting experiences follow the same simple formula: You perceive them as personal, they trigger emotions and it feels like the experience surrounds you completely.

Experience Is The New Product

If you look around you will discover that meantime nobody just sells products.

Take Starbucks, the company that originally sold coffee beans in a small store in Seattle. Their CEO Howard Schultz proclaimed that “a brand should stand for more that just for coffee beans”. Since then they are searching for the experience of drinking coffee in a proper environment to create the right mood for the typical Starbucks feeling.

As I already presented in one of my former articles, also Nike sells experiences instead of products. In this case they sell motivation instead of shoes. Why? Well, there are enough shoes on the market and nobody is interested in talking about shoes. But instead to savor the victory of a run, surviving, blood, sweat and tears, listening the cheers of the friends along the running parcours, that are the important experiences around a run in Nike shoes, surrounded by the Nike+ ecosystem.

By the way for those, who are not-that-sporty, I would like to offer an alternative to the well-known classic Nike+ strategy. The Moscow based advertising agency Leto invented the Nike- Ecosystem.

When the entrepreneur Sir Richard Branson one time was asked, what his company Virgin stands for, he could have answered all sort of things like – music stores, sound studios, an airline a space tourist party, a racing team and and and. His answer was simply: Virgin stands for Fun.(1) So his diverse companies sell fun instead of products as well. (I wonder who ever is still selling products.) Visit the fabulous website www.experiencevirginamerica.com to get an impression of how they sell a simple flight trip.

The Story as Experience Container

When you rethink how the experiences shown above are presented, you will discover that they are all wrapped in pictures and stories. And we can pretty well cope with them, because we have a long tradition with stories as an essential tool of knowledge transfer. Our familiarity with stories reaches back to the tellings of shamans, priests and knowledge guards who thereby preserved the knowledge of families for generations in a sort of “campfire lesson”. Even today we are strongly connected to stories. Jonathan Gottschall, the author of the book “The Storytelling Animal”, reports that a human being’s daily occupation with stories lasts 5 hours.

So why not connecting the users’ experiences with stories? It is obvious that it works. If you didn’t know Dominic Wilcox so far and did not read my previous articles about storytelling, please allow yourself the pleasure to start your considerations about products in combination with storytelling with his project “No Place like Home”. It is a navigation system, based on the story of Wizard Of OZ and the story of Dorothy, who wants to find the way back home.

If you know the story Wizard Of OZ, the idea is fetching and I’ll bet you anything that you’ll never forget the navigation shoes.

Why Is It Working? Our Story Conditioning

Oh yes, I agree to you! Products like the one presented above – supercharged with the message of a fairy-story that is not at all essential to execute the products’ functions – risk to appear kitschy in our nowadays perception. But what if we just make use of the structure of a story and fill it with a product compatible modern contents?

To tune into the idea of making contemporary use of stories for a better user experience, let’s have a quick look to a simple three-act story. (Trust me it’s not half as boring as it sounds to be.)

Interestingly enough most of our stories today are still based upon the Aristotelian drama-structure:

• Act 1 (1/4 of the story) is an introduction completed by a turning point
• Act 2 (2/4 of the whole thing) stages the confrontation with a central point (of no return) in the mid and another turning point at the end
• Act 3 (the last 1/4 part of the story) offers the resolution

Now in addition to that we combine the three-act-structure with the so-called hero’s journey. During the story the hero uses to meet archetype characters that are more or less the same in every hero story, like the herald, the mentor, the antipode, friends and enemies – just to name the basic character set. And if you thought “Oh yes, I know that pattern!”, you are right: It’s a perfect recipe for a grand Hollywood blockbuster.

How does it work? In classic stories in the first act the hero often gets the first call to an adventure from a herald. In most of the cases the hero ignores his call until he realizes that the problem that provokes for the adventure touches his personal problems as well. After getting guidance from a mentor during the first act, in the second act the hero meets friends and enemies before he rises to the challenge to defeat the antagonist. The hero conquers the antagonist and releases the treasure. After this process the hero often changes to a different personality – a matured person, which can delay the wish to turn back home. Of course he returns in act three – with the treasure – and is celebrated with highest honors. The short version can look like this:

Treasure Hunt At Amazon

So, when we agree upon the finding, that certain story structures are deeply rooted in our minds – why not taking the extra step and question the meaning of that structures for the user experience on a website? I claim that the hero’s journey works very well at a website. Let’s give it a try:

Of course our hero who has to release a treasure is the user. Let’s say the adventure is the purchase process at the amazon website. Who is the herald here? He is represented by the the advertising campaigns trying to seduce him to enter the site. Well, the enlightened user won’t follow the persuasiveness of advertising unless it scores a hit. It is indeed the role of the mentor to convince the user to follow the call to adventure to by a product at the amazon website. If you reflect what factors convince you to focus your interest on a product at amazon, you might end up with recommendations or recensions from acknowledged experts. But the real mentor is the search engine of the website which turns to a nice wise guy who rests his hand on your shoulder to give you a fatherly advice to follow the first five search results. And you will definitely do so. We’ll discover in the second act of the buying process friends and enemies like in the classic drama. The friends are for instance the hints to the choices of others.

The antagonist in the buying process at amazon is – like in a proper drama – as well existing. Here and that are the bad news, he has manifold shapes. One is the offer of the same book in different forms – as kindle version, as used book, with soft or hard cover. I additionally will be asked to consider buying the book in a package with two others at a special price. Of course each of the books has own descriptions, combination offers, recensions and reader comments. It is like getting misdirected and finally lost because of one of that sirens in one of the stories in the Greek mythology. You must have the strength of Orpheus to resist and follow your original target. Well I am not Orpheus and offers like that distract me from my originally immediate target to by the desired book and let me stop the process. There is a risk of drawing off my attention that much that I decide to delay the purchase until I know exactly what is the best choice for me. Bad luck for amazon. They should better direct the players of their story.

The release of the treasure – the purchase – happens not before the third turning point of the buying story. It is interesting to know that in the light of the interpretation of a classic drama the purchase is not the first thing the hero (customer) is thinking about in a webshop experience. He needs to reject and to be mentored first. But the timing is crucial. The antagonist should leave the customer room to stay a hero. And even after the purchase the room for living out the “catharsis process” is necessary. This is a chance for every webshop: The hero doesn’t want to rush home after he found the treasure. He uses to quarrel with himself and doesn’t want to leave the story too early. That’s the time to pamper him and relieve him in a literal sense as a renewed personality with a broadened horizon. The catharsis as well needs an evidence, therefore a pleasant anticipation should be staged by the website experience as sign that the hero did the right thing.

Last but not least, the grand final of the classic three-act drama at amazon is the delivery of the ordered book. This should not only feel but effect like a reward and should beyond that be acknowledged by others.

The Mentor Makes The Hero

Archetypes of the hero’s journey are implemented into software services and applications like the “mentor-app” of the Berlin based Mentor Works GmbH. Here users keep track of their various everyday-heroic-deeds like performing sports, getting though a diet, living healthier or reading a book. They share their progress and literally ‘mentor’ each other.

The telecom daughter congstar (site in German language) offers a context sensitive female virtual mentor. She automatically appears when a user seems to lose his focus or stay too long at the site without doing anything effective and suggest to start a chat with her.

The reason for using existing and learnt story patterns for websites and services is obvious. Users follow them reliably like actors in a good directed Hollywood movie.

Look, It’s Me! The Immersion Effect.

But there is more to it than that. One possibility to boost the quality of an experience is to turn a classic story in a very personal matter in which the user no longer is the observer but apparently actively involved.

A stunning example for the story-immersion effect is the online campaign “Anything can happen in 20 years” created and published by the Sundance Channel. The campaign advertises the TV-series “Rectify” which tells the story of a prisoner who after 19 years on death row, due to new DNA evidence, has been released to a world he no longer knows. The user of the online campaign slips into the role of the ex-prisoner and gets pitchforked into the year 2033. It is the date of the user’s release from prison and he or she can explore in the presented timeline of the personalized site what happened in the last 20 years. The timeline is, due to a requested connection to the personal facebook-account, accompanied by posts of the facebook friends commenting the story. And – wohoo – you can learn a lot about your friends when you are sent to prison. The use of your avatar picture and name as well of the portraits and names of your facebook friends has a pretty astonishing reality-effect. Don’t believe it? Give it a try: http://www.mylifein20years.com

Another example is the integration of personalized user media into a video clip so that the user seems to become a real actor in a fictional story. For those example can be created at  the site: http://www.biotechthriller.com. You can either provide a connection to your facebook-account to contribute your avatar and those of your friends or you can upload pictures for the five protagonists that should play a role in the video by yourself.

If those examples of integration to a story work well – what if the user was not an asset, elegantly integrated into a prefabricated story, but is the real centre of the story?

In the project “letoh” the integration of the user as the centre of an experience takes one big step forward. letoh is a proposal system for hotel guests, offering proposals how to spend the day during leisure time and combine them to personal day-trips.  The offered proposals are individually adapted to the emotional reactions of the users during their information-phase about the tourist programs. The project has been developed during the fifth semester under the topic “Ambient Intelligent Environment for Hotels”. The engaged technology is “visual facial expression detection”. While the user enjoys some short videos about possible leisure activities presented to him in the hotel lobby, the system tracks emotional reactions expressed in his face. Like a mentor, who knows the preferences of his protégé, according to the reactions of the user, the system combines a presumably agreeable city tour with leisure activities of an individual emotional value.

Video 3: Project-trailer of “letoh” 

letoh is an IMD semester project by Mathieu Handouche, Max Leistner, Patrik Merbach, Jonas Schreiber, Matthias Schütz, Miguel Vas Dias Dos Santos Wicht (winter term 12/13) 

 Why Emotion?

Why are we all so hell-bent on provoking positive emotions in the users of our products? It is because our subconscious mind adds a particular significance to our emotions and gives our memory to them priority. Let me explain this effect with a simple test of your personal memory abilities. What at the present stage of this article do you remember better by heart: The first sentence of this article (and no, you are not allowed to scroll upwards and read it again) or your last nice holiday experience? Well, I bet your holiday wins this match. It is because you connect more positive emotions to your holiday than to this article. I’m ok with that.

So I can resume this article with the recipe for a better UX:

Emotion + Immersion + Story

As the speech has been in German language the acronym EIS works better for German ears, as it means “ice-cream”. However, after this short German lesson, I hope you are conditioned now to think about an upgraded UX whenever you eat a nice wafer with ice. (And yes, in exchange you can use it as the perfect excuse to eat three scoobes of ice-cream.)

Video 4: Live recording of my webinale-speech (German language)

Sources

Fig. 01, Definition of Experience, (c) Andrea Krajewski

Fig 02, Strategy of Starbucks, background picture: starbucks paper mug (c) Luiz Filipe Carneiro Machado, http://farm3.staticflickr.com/2234/2083356931_1c6547e95f_o.jpg, [1.6.13], used with his friendly permission

Fig. 03, Nike- Ecosystem, source: http://adsoftheworld.com/media/online/nike_nike?size=original [recalled at 2.6.13], Advertising Agency: Leto, Moscow, Russia, Creative Director: Ilya Petrov

Fig. 04, Scene from “Experience Virgin America”, source: www.experiencevirginamerica.com, [recalled at 2.6.13]

Fig. 05, A very short hero’s journey, (c) Andrea Krajewski

Fig. 06, The hero’s journey translated to an amazon website experience, (c) Andrea Krajewski

Fig. 07, alternative book choice of others, available from http://www.amazon.com/Designing-Interaction-Creating-Innovative-Applications/dp/0321643399/ref=pd_sim_b_4, [recalled 2013, Aug 30]

Fig. 08, the mentor app, available from: http://www.mentor-app.com/, [recalled 2013, Aug 30]

Fig. 09, Congstar website, available from: www.congstar.de, [recalled 2013, Aug 30]

Fig. 10: The user in the centre of the story, (c) Andrea Krajewski

Fig. 11: Screenshot from “My life in 20 Years” – a fake story of my life, integrating the users’ real facebook friends, source: http://www.mylifein20years.com/ [recalled at 2.6.13]

Fig. 12: Sample from the personalized Trailer of “The Foundation”, showing the vanished team members of the main protagonist, source: http://www.biotechthriller.com [recalled at 2.6.13].

Fig. 13, typical holiday picture as icon for a positive experience, (c) Andrea Krajewski

Fig. 14, the UX-dessert, (c) Andrea Krajewski

Video 1: Video 1: My trip to New York, slideshow, (c) Andrea Krajewski

Video 2: Dominic Wilcox’ about “No Place like Home”, source: www.vimeo.com/49425556 [recalled at 2.6.13].

Video 3, Project Trailer for LETOH, a project by Mathieu Handouche, Max Leistner, Patrik Merbach, Jonas Schreiber, Matthias Schütz, Miguel Vas Dias Dos Santos Wicht, used with their friendly permission. Source: vimeo.com/59562795 [recalled 2013, Aug 30]

Video 4, Live recording of Andrea Krajewski’s webinale-speech, filmed by the webinale team [recalled at 30.8.13].

(1) source: Article by Carmine Gallo at BlombergBusinessweek Online, May19, 2009: http://www.businessweek.com/smallbiz/content/may2009/sb20090519_058809.htm