Improve UX with these 5 classic storytelling techniques

Stories have the power to transport our minds to another place, and in this place, we are more likely to embrace things we’d scarcely pay attention to in the “real world”.

According to research by psychologists Green & Brock, our beliefs can be heavily influenced by good storytelling. We are susceptible to being “swept up” in both the message and in the manner in which a story is told.

Watch any TED talk and you’ll notice that the speaker isn’t on stage reeling off facts and statements, but instead, they’re creating a narrative, allowing the audience to be transported into the world they created.

Stories no longer have to be told in a 700-page novel, they can be as simple as a Whatsapp notification, a story with a hell of a cliff-hanger that implores us to find out what happens next.

whatapp-notification

There are some fundamental steps to storytelling that all good authors adhere to, no matter their medium. When it comes to writing a spy novel or creating an immersive digital experience, ensuring your user is experiencing all of these steps is absolutely vital if you want to maintain their ever-shrinking attention span.

Although different story tellers would describe their steps in slightly different terms, they do, in essence, follow a similar pattern.

The first approach we’ll explore is from Jenn Tardif, it’s a good starting point for a traditional story, she explains that a complete story needs 5 ‘Beats’ to make it a well rounded and compelling read.

Introduction 
Set the scene and lay the foundations of intrigue that will keep your reader gripped

Incident 
This is where the story’s challenge is explained

Stakes 
Give specific details to engage the reader on an emotional level, heightening their commitment to your story

Event 
The climax to your tale, we get the answers to questions posed, this is a pivotal moment where the ‘norm’ is altered

Resolution 
An opportunity to reflect on what we learned from the story, what has made this tale unique and special?

This approach should give beginners a good foundation for storytelling. However, from a digital perspective, there is rarely a linear user journey. It’s hard to guarantee your visitors will fully understand your story if you follow these 5 beats.

That is why I prefer another 5 pillar approach to the architecture of story building. Although similar to the structured approach above, it places more emphasis on the story’s central character and their ambitions. This really helps your visitors understand your proposition without compromising the narrative of your story.

The following 5 elements should be present in your story:

Hero 
Whether your lead character is a good guy or rotten to the core, your reader needs to be given a reason to love this character and want to understand them

Ambition 
What is your hero’s motive?

Conflict 
What is standing in their way?

Tipping Point 
A moment where the balance tips and either ambition or conflict is triumphant

Resolution 
What is the result - triumph or defeat?

When it comes to storytelling online I feel this less linear approach is better suited to modern UX practice - websites are rarely experienced as a ‘start to finish’ journey. Nowadays users are encouraged to immerse themselves in your story, building the narrative as they explore. So a flexible narrative will allow visitors to jump around from page to page gleaning information that has value as stand alone content but is always supporting the overarching message of the story.

Let's explore each element in a little more detail.

1. HERO

We begin with the hero, this is the purpose of your site. If you aren’t 100% sure who your hero is, then ask yourself ‘why do you want people to come to your website?’ For example, Spotify, they sell music - so for them, music is their hero. Instagram on the other hand, is all about sharing images, so their hero is the images. Their hero is their reason for existence.

instagram-spotify

Whoever your hero is, they need to be centre stage. If you are selling something don’t hide it behind complex brand imagery and messages because that will only confuse your story.

Your user needs to engage with the hero instantly, by failing to make that initial positive connection with a visitor they are unlikely to form the strong bond needed to take them further into the story. Your visitor should land on your site, meet your hero and be rooting for them right away. So how do we go about forming that bond? I’d recommend you provide a positive user experience in these three ways:

How does is it look 
Whatever your hero is, it needs to be clearly visible and look as good as possible.

What do you say about it 
Supporting text needs to be engaging, memorable and concise.

How does it feel 
From a user experience point of view, can they interact with the hero as they would expect? And do they get positive feedback from that engagement?

By ensuring you apply these touch-points your user will quickly buy into your hero.

2. AMBITION

You need to decide whether the ambition of your site comes from the site owner (you) or from the visitor. By considering the purpose of your site you will be able to better determine the positioning of your site’s ambition and how that affects the way you direct visitors around the site. If you are looking to sell, it is more likely you will present ambition from your own viewpoint, directing visitors to specific touch-points that will help reinforce your sales message. If you are attempting to educate and you would be happier letting the user find their own way around your site it would probably work best if the ambition is presented from the user’s viewpoint.

Some of the world’s biggest brands conform to this method of presentation in order for them to continue doing the job they set out to do. It is important you understand the purpose of your proposition in order to correctly position your site’s ambitions. An audience who wants to learn isn’t there to buy and an audience looking to buy will quickly lose interest if they aren’t being sold to.

bbc-apple-logos

The BBC is a trusted global brand with no hidden sales agenda, it exists purely to serve. It is not surprising then that bbc.co.uk presents itself as an information service.

BBC-homepage

The home page is simply a dashboard of popular current affairs from its broad range of services, which the user can personalise to suit their own interests. In the true spirit of the Beeb, it puts the user’s ambitions first.

In contrast, Apple present ambitions from their own point of view. Their site sets itself out to convert potential sales into actual sales.

apple-homepage

Immediately putting emphasis on the appeal of their products. The message is clear ‘our products are the best and most beautiful - you need them in your life’. In it’s simplest form, apple.com is just a catalogue of products, visualised in such a way that fits it’s purpose to serve as a sales tool for that brand.

Successful presentation of your ambitions keeps the user rooting for the same ambitions as you. With user led ambition your site needs to maintain an understanding of their needs, providing an evolving story that continues to maintain their interest. Supplier led ambitions must keep the user emotionally invested, retaining the connection that was made in the introductory phase where the user fell in love with your hero.

3. CONFLICT

Every story has an antagonistic element. Two themes of conflict that I feel serve online stories are:

Good vs evil, so often seen in fairy tales, the Wicked Stepmother vs Cinderella or Captain Hook vs Peter Pan.

And

Conflicts that revolve around emotional themes, the sort of plotline you’d associate with a romantic comedy like Bridget Jones.

Then there are many more complex forms of conflict, where the lines between what is right and wrong are less important, but in order to cut through the competition and hook your visitors I think a straightforward approach to conflict is better.

In terms of your own website, one of the most common scenarios will be that you are not pushing a unique proposition. Your conflict then is that visitors are being pulled away to competitor sites. So what do you do to ensure you build a strong case for your side of the argument? Your hook is likely to vary dependent on what your site is there to achieve, if you are selling your own brand of product, your conflict will have an emotional steer. Potential customers will have the dilemma of ‘do they really need this?’ - your job is to teach them that they do. For instance, you are an information outlet your conflict is going to be accessibility, are your visitors able to receive your message in a way that best agrees with their needs?

4. TIPPING POINT

The tipping point is an essential part of a story’s journey, without it we have no way of guiding our story to its conclusion. In terms of traditional storytelling, the tipping point is the part where we all take a sharp breath as the journey of our lead character is (in some small way at least) thrown into complete chaos and we are left wondering if their hopes and dreams will ever truly be realised! Take Romeo and Juliet for instance, their tipping point comes as the battle between their feuding families reaches a ferocious climax and Romeo is banished for murdering Juliet’s cousin, Tibalt. Then Juliet realises that to be together the pair have no choice other than to hatch a seemingly foolproof plan of faked suicide. What could possibly go wrong? The important thing to note from how the tipping point is delivered is that Shakespeare uses this moment to tell his audience that we are going to end this one way or another, and it is up to him how things unfold.

romeo-and-juliet

So if we look to apply the idea of a tipping point to a website visit we can see how important it is to drive users to conclude their session in the way you as the site’s owner want them to. In essence, your tipping point is simply your call to action. We don’t need to be quite as eloquent as Shakespeare, but it does need to be forceful enough to drive home your website’s key message. Understanding your user, as well as considering your own brand will help you gauge how to pitch this. For instance, you might be selling a quick turn around bargain that requires a sense of urgency and panic “Get this now or it’ll be gone forever”. Alternatively, you may be offering a lifestyle choice where you want visitors to feel as though they are in control of the situation “this the perfect solution your problem”. Note how both solutions are urging the user to cross the line from observers to customers. I’m not just talking about ecommerce here either, whatever your site is attempting to achieve you will have some sort of reason to convert visitors.

Your tipping point, and ultimately a satisfactory conclusion, all hinge on getting this message just right.

5. RESOLUTION

And finally, here we are, the end of our journey. By this point your site should have hit the other four pillars of your story, leaving visitors richer for the experience and wholly bought into your product or service. The question now is - what do you need to achieve to make the visit a successful one?

There are plenty of sites you’d go to once, get what you need and never go there again. In this scenario, you as the visitor were satisfied by the site’s offering, but you weren’t sold on its long term value and as a result are unlikely to return on purpose. A truly successful site session should engage a user to the point that they buy into you, and as a result will give them a reason to come back your site again and again.

Depending on what purpose your site serves, the endpoint of a visit will differ greatly. If you are selling directly then a natural end is likely to be a sale. But as I’ve just said the sale shouldn’t be your sole focus. Likewise, if you are an information outlet, getting the answer to a question shouldn’t be the end of the journey.

you-are-perfect

Just like any good love story, your resolution point needs to open the visitor’s eyes to the fact that you are all they ever really wanted and this is just the beginning of your journey together.


About the Author

Nick-Phipps

Matt Pascoe is a Senior Conceptual Designer at Rawnet, a digital agency that creates technology to redefine customer experiences. Matt always looks to give a fresh point of view to the brands he works with. His passion for idea led design sits at the heart of every project he delivers.