The Dos and Don’ts of Storytelling in UX Design

7 steps on the way to a good visual story

Every designer has heard of storytelling. And they are all convinced that they are already using it. However, if we examine most designs, we will find a glaring lack of any interesting story. How come? Many people don’t understand what storytelling really is and fail to use it to its fullest potential (precisely for that reason). This article aims to explain what effective storytelling is and how to create exciting stories for your users.

A good story is the foundation of visual marketing. This information may be of use to both designers and marketers.

1. Stories no one likes

Let’s not waste effort on things users don’t like. But what are they?

Users are not interested in any company or the story of its success, and neither are they excited about a product’s origin story. People are only interested in themselves and their own stories. They took no part in creating the company or its product.

Storytelling is not a story about a company or product.

It does not mean you shouldn’t say anything about your company or product. If the project demands it, then by all means, go ahead. Nonetheless, pictures of products and services, facilities, and employees’ faces do not make a story. It’s merely a set of lifeless facts that cannot be invigorated by any design.

So how do you make boring stuff interesting? By adding an idea.

Here’s an example of a good visual story about a company’s growth.

The company is personified by a toddler who has just started walking. He stumbles on a stone marked “Competition,” falls down, but gets right up. He wipes his tears away and stubbornly marches on. Now he’s all grown up and strong. He’s scaling mountains like a bona fide climber. The story can be illustrated with photos of a child and an adult dressed in branded clothes with the company’s logo. Alternately, you can make a short video or draw it as a comic.

A story like that will be sure to strike a chord. Everyone will identify with the toddler and rejoice at his success. From a mere observer, the user is unwittingly transformed into a protagonist.

Storytelling is a story about the user and for the user.

If the design elicits no empathy, it will not engage anyone and will soon be forgotten.

User empathy is the basis of a good story.

So how do you come up with a story that will excite the users? Let’s start by looking at the elements of such a story.

2. Stories everyone likes

Any good storytelling has a functional scenario. The scenario includes:

- characters

- stage (setting)

- conflict (something happening)

- resolution of conflict (outcome)

Designers who tell boring stories are only describing the setting.

What they are doing is stage dressing: they show a beautifully set stage with no actors and nothing happening. Will anyone want to watch it? Will they ever come back for more?

A story told through interface is not like a storybook. Interface is a story that the user not only “reads” but also takes active part in. Good design helps to read, remember, and enjoy the story. And to keep “re-reading” it.

A good interface story entails two things:

1. A story of the user prototype.
2. A story of the real-life user.

All right, let’s go! It’s storytelling time!

Step 1. Research your audience

What story do we wish to tell and who do we wish to tell it to?

To get someone interested, we need to learn more about their tastes and interests. Creating the story must start at the design concept stage. First you should research your audience and identify the main user types.

Step 2. Create the user prototype

To tell your users a story about themselves, you will need their prototype. Prototyping is done by compiling a user portrait (or portraits). Without a portrait, your imagination won’t have enough to work with to create a story that will engage the user; alternately, it will lead you astray.

Once the user portraits are done, answer these questions:

- What visual images can this user identify with?

- Which emotions do we want to elicit from this user?

- Which visual means will help us elicit these emotions?

Step 3. Identify the protagonist

Most good-looking but low-conversion designs lack a protagonist the user could identify with. Can you feel any empathy toward geometrical shapes? Or color spots? How about fonts?

Who should be the protagonist of your story?

• user prototype

A user prototype is a character or representation that the user will identify with.

For example, a businessman can identify with a successful man of the same age, wearing a nice suit, driving a car, sitting in his office, or surrounded by family. Younger people identify with representations of emotional, good-looking, passionate, creative seekers. Children will readily identify with cute animals, fairytale and cartoon characters. When we know our audience, we can always choose the best image and the best tool to bring it to our viewers: photo, video, animation, or illustration.

Lifehack: If you know your user well enough, you can draw a cartoonish version of them (or describe them facetiously). If you cannot do it, you don’t know them well enough.

• product

It may seem funny, but a product or service can also be anthropomorphized. A product’s adventures are a lot more fun than its mere presentation. For example, Mr. Product meets various people (use some of those user portraits) and helps every one. One of them rejects him but soon comes to regret it. Mr. Product can get into trouble, but he’s so sturdy and well-made that he heroically survives (saving everyone in the process). What’s not to like?

If your concept does not feature the product as a character, it must be an important part of the universe that you present to the audience.

• antagonist

A story without an antagonist is boring. The antagonist embodies a problem that your product or service is meant to solve. Use your imagination. An antagonist can be very vivid. It’s one thing to have picture of a sneezing man on a medical website and quite another to feature Mr. Evil Snivel as the bad guy. Which image will be more memorable?

Step 4. Create the visual plot

A plot is a brief summary of the story. Something short and catchy that will instantly touch the user’s heart. Take some time to come up with an appropriate plot for your audience. But don’t try to reinvent the wheel, either. Your own rendition will make any standard plotline sufficiently unique.

This main plotline is only useful for our own convenience. No design can (or indeed should) reflect it in full. Let your users fill in the gaps themselves. A designer charts the visual path and creates departure points through highlights that engage people emotionally and associatively.

Good storytelling needs two plots: one for the prototype and one for the real-life user. At this stage, we come up with ways to visualize the idea so that the user can “read” it and take part.

a) plot for the prototype

This is the story that happens with the visual character that the user identifies with. Through visual images, we engage the user’s memory and emotional associations.

Based on the user portrait, we invent a plot that will be interesting to this specific person. Here are some things that will come in handy:

- plan

- layout

- text

- storyboard (the main images that the user will see)

b) plot for the user

This is the story of the user’s interaction with the interface. What problems does the user have? What does he or she want? What will he or she do in this or that case? How will it make them feel? Create a scenario in which the user will feel comfortable and get what they want.

Refer to the user journey map: it will help you identify the key points where the user will “read” the key parts of the story.

We need to make the user an active participant in the interface story. This is achieved through microinteractions, interactive communication, user reviews, and other ways of engaging the audience in enjoyable contact with the company and its product.

Step 5. Create a conflict

A conflict is the tipping point of the story, the overcoming of obstacles. Applied to interface storytelling, it is what motivates the user to make a decision (perform a target action).

There’s no story without conflict. To choose the right kind of conflict for your story, you should first learn your users’ fears and worries. The more lifelike and believable the conflict, the better.

What does it look like in practical terms?

Let’s have an example. A company makes hoses for watering lawns. A bad designer would post a high-quality photo of the hose on the website. A good designer will post a photo of a sad girl holding a bunch of wilted flowers. Or a panting dog with its tongue out and a background of sun-dried grass. We can see the problem right away! We feel sorry for the girl and the dog, which elicits our empathy. We’ll spend our last money on the damn hose just to put an end to the suffering of little girls and dogs and to make that grass green again!

Step 6. Build a universe

The universe is the fictional world in which your protagonist exists. Once you have a plot, worldbuilding will be easy. The universe’s image is the basis of visual design. It’s a visual world inhabited by your character (user prototype). If you have worked diligently on the character’s image, you will easily choose the optimum visualization method: static, animated, or combined; with or without gamification elements. You will quickly pick the appropriate style, color palette, necessary images, and elements.

Step 7. Solve problems

A story is not told for its own sake. The primary goal of storytelling is to interest the user, to provide information, to encourage target action. Unless storytelling solves users’ problems, it’s ineffective and even damaging.

The goal of storytelling must match the goal of the project.

In conclusion

Storytelling is a wonderful tool that will help you create a truly interesting design and win over your users’ hearts. Knowing how to tell visual stories is an art, a mark of a highly professional designer. Those who wish to improve their professional skills should learn the art of visual storytelling. Pretty soon you will see your design transform and your skills grow.