What is the difference between these shot glasses? 

The price is the same for a used shot glass with print and a set of six glasses with 22K gold trim and a tray.

The difference lies in the story. Story is what made a used glass purchased for $1 at a flea market be sold for $76 on eBay. It was a part of an experiment on storytelling.

100 random items of different levels of inutility and trashiness were bought at flea markets for $129 in total. Then, each of them got a personal story from a writer. All the items with their background stories were placed on eBay and sold for a total of $3,612.51. So, if you are still not ready to pay $76 for a used shot glass, try reading its story first.

The set of six glasses with 22K gold trim and a tray has no story in the description. And we still don’t know if it was sold.

Storytelling has penetrated all parts of human culture and communication. Instagram stories, books, advertisements, corporate blogs… We are a SaaS design agency and are want to tell you a story about storytelling in UX (in our blog, yes).

Beyond books. Telling stories about boring things

If you started wandering through the stories of 100 objects, I bet most of you were just skimming through and didn’t take the time to read each story thoroughly. Why are we like that? Because we are in the 21st century and we spend a vast amount of time on the web. To capture the attention of our inner ADHD monkeys, visual storytelling can be more effective than text.

Guess what this story tells us about? Here’s some context: this is growth.design, a project that collects case studies about psychology in UX design. So, what does “The Handmaid’s Tale” in the background haves to do with psychology in UX design?? You definitely need to click through the case study to find out.

This is a great example of storytelling. And spoiler — the case study tells us about Zeigarnik Effect that states: “People hate the tension created by incomplete tasks”. And that is one of the factors that make storytelling so powerful and the reason why we can’t stop watching TV series and scroll all the way through growth.design case studies. We are hooked on a story and we want to know what’s next.

“What is next?” is a good question to build a storytelling process around (and that’s why we put a call-to-action at the end of the articles). 

In UX design, the Zeigarnik effect can work for onboarding. When there is a task that has to be finished, it motivates a user to go through all the steps and not abandon the onboarding process in the middle.

Examples of storytelling

There are many brilliant examples of storytelling among websites. For example, Slavery Footprint, a page that aims to educate people about modern slavery.

I spent about ten minutes entering lots of personal information to find out that there are 28 slaves working for me. Not many websites manage to hold millennial's attention that long.

The company says that after the launch, their website crashed soon because of too many visitors. So, what makes it so engaging?

The page opens with a hook:

From then, you can proceed with a test or read an explanation of how modern first-world countries are related to worldwide slavery.

The storytelling is all over the place here. Look at the navigation.

They make it very clear that the user is the character of the story. When you click on “your story”, a pop-up window appears. First, it gives some context, connecting the character and the topic. Next, it shows the challenge:

This topic is complex and difficult. Giving so much heavy information could bore users. Storytelling is what makes it digestible and gets readers to scroll till the end of the page – to find out how they can save the world together.

Now, let’s take a look at some elements that will help you understand how you can use storytelling in UX design. The list we provide is not exhaustive, as it’s all about creativity and out-of-the-box solutions. So think of it as just a start.

Things that make storytelling

The storytelling is used at different levels. It can form the overall principles of user experience or define the choice of menu icons. The most strategic storytelling starts at the very basis of product design and becomes a core of holistic user experience.

Customer journey map

This is the invisible side of storytelling in UX. We’ve had quite some articles on this blog about journey mapping, and if you take a look, you’ll clearly see what role storytelling has in customer journey maps.

When the relationship with the user is seen as a journey, it opens lots of opportunities to communicate that throughout the product design. 

Let’s get into more details and see how separate elements impact storytelling.

Dialogue

Dialogue might not always tell a story, but as long as it tells something, it will drive attention. And it makes dialogues a powerful storytelling tool.

The page from Slavery Footprint, which explains the presence of slave work in our daily life, is made in a form of a dialogue with a person who can’t believe that they are somehow related to slavery.

The text is asking and answering the questions that probably go through the mind of a person visiting the website. Presented in this way, it captures the attention of the reader firmly.

Motion

Moving elements have great potential for storytelling. They are perfect for focusing the user's attention and connecting two episodes of a story. 

Smart scrolling patterns, highlights, and micro interactions – all of these slight or not-so-slight movements impact the impression from the page.

Here is the header of the Figma landing page. It combines words and motion while showing the words as if they were edited in Figma in live.

Colors

Colors bring various associations. And they have an impact on unexpected levels. Studies found out that people tend to eat less food when it is served on red plates, and eat faster when the interior of a restaurant is red or orange (yes, that's what fast food restaurants have in common).

As for interface design, there are color "traditions" as well. Bright colors for CTA, blue for social and fintech. Using these associations along with the others, deeply rooted in human culture, makes color an essential element of visual storytelling techniques.

When making a redesign for Refera, a dentist referral app, we decided to switch from blue (very common in healthtech) to green (also common, but not too much).

Illustrations and photos

Over the last years, as illustrations are reclaiming the public space lost since the 1920s, we see it everywhere in digital products. 

Refera used to have illustrations on their landing page. When we started working on the redesign of their app, we decided to put a photo of a doctor instead of abstract illustrations. It helps to create a character, a key figure in storytelling.

We are well aware that a photo of a smiling doctor on the landing page doesn’t look very trendy. But we also do know that a dentist referral app doesn’t need to be trendy. It has to appeal to dentists, not to the Awwwards jury.

Typography

Here is a story from one of our case studies, Planner. Initially, the junior designer who was working on the project wanted to use Poppins font, one of those that were trending at the time.

Later, a senior designer checked the design and recommended changing the font to Gilroy. If you see them next to each other, you see little difference. Yet, typography can tell a story. What story does Poppins tell? “I look cool, you might have seen me on some fashionable websites at Awwwards of 2021, whose names you can’t recall”. What about Gilroy? It tells a story of a font that is in line with trends, yet not trendy enough to be recognizable.

Whenever a designer picks a boring or “cool” font, there is a story behind it. If you are curious why there are few fonts that are used over and over in interfaces, read our article on typography.

What comes next?

It’s hard to stop once you start talking about storytelling. Now, we’ll just make a turn here and go to what was supposed to be the beginning of this article.

What is storytelling? We hear this word all the time, and most people assume they understand it since they know what "story" and "tell" mean. Fair enough!

Those who learned a bit more about storytelling know that it consists of exposition, rising action, climax, and so on. It is quite simple when we talk about text, but what about UX design? There is little text and the main elements are visuals.

Visuals are less eloquent, but they can tell something, too. There are so many stories told through art without a single word. And in UX, there is room for storytelling, too.

Such thing as the structure of a love story and dramatic arc find their place in user experience design. The more diverse the knowledge base of a designer, the wider their creative horizons. If you are looking for other sources of not-so-obvious UX design wisdom, check out our article about psychology in UX Design.