UX storytelling: Make the user journey a hero journey

Storytelling can be used not only to tell stories in marketing but also in UX design. Staging the visitor’s customer journey as a hero journey can increase the conversion rate. We show how to do it.

The heroes of each story involuntarily embark on great adventures, fight villains, overcome unpredictable problems, receive unexpected help, and finally return home: wiser, more experienced, and usually quite tired. For thousands of years, people have been telling stories and experiencing the adventures, sufferings, and moments of happiness of others. Stories touch us. They make us sad or happy, angry, or satisfied.

UX designers have now recognized the potential of storytelling for their work. They use storytelling as a tool to trigger emotions among users. Visiting the website is quite like a hero’s journey. Because just like Frodo, who has to destroy the ring in “Lord of the Rings,” or how Arielle, the little mermaid, is pursuing her goal of living as a human being, every website user has a mission: if only a theater ticket to buy, to book a train ticket or to find out information.

The first impression counts

Which emotional journey user experiences when visiting a website depends heavily on the functionality of the page. The web design of the delivery service has different requirements than that of a hotel operator. And yet there are some basic rules. For example, a clear value proposition on the website decides whether a user chooses a product or a service. The first impression is significant. Therefore, the home page should convey the essential functions and a message.

To ensure this, website operators should test their site on first-time users and ask them what impressions they have: What feelings does the website trigger? What is its purpose? What added value? Companies with complex products and services face a particular challenge here because a sentence or two is often not enough to convey their value proposition.

Visual storytelling is particularly useful here, i.e., images, videos, illustrations. Because where texts take a few minutes to read, a user processes the photos within a few milliseconds. They convey emotions faster and more immediately. They build an emotional relationship with the product and explain abstract facts and universally. In contrast to stock photos, self-made photos increase the recognition value and thus the interest of the user.

Lemonade is an excellent example of this. On his homepage, visitors receive a clear value proposition: “Everything in a flash. Fragrant prices. Big heart.” Translated this means: fast, cheap, customer-friendly. A short video explains how the company differs from other insurance companies.

Navigation as a mentor

Clear navigation encourages you to click further on the website. Here companies should make sure that they choose the right terms. If “complaints” or “return” is given instead of “contact”, this triggers negative associations. The company often seems to be dealing with problems and defective products. UX designers should rename such terms or move them to the FAQ area. Second, times are often misleading. Navigation elements should be clearly and formulated. Creativity is out of place. Calling the donation area of ​​a website “doing good”, for example, can be misleading. Is the user doing good himself? Then what does that mean? In the worst case, someone visits the website to donate – and leaves it again,

For a user to achieve his goal without problems, he needs a precise orientation. Because, unlike books or films, he does not experience the history of a website linearly. The user has to choose between different options on each page. Does he click on the link in the text? Or does he return to the home page? A good UX design always shows the right, i.e., the shortest route. Companies often make the mistake of wanting to present all sections of their website on their homepage. But that seems confusing and overwhelming. You should instead give users a clear starting point and then guide them to the goal as linearly as possible, for example, through a clear call-to-action, through interaction elements or directly through minimalist design.

A comparison of the interface designs of German and Swedish railways shows the difference: At Deutsche Bahn, users have too many different interaction options. The Swedish railways, on the other hand, provide a clear starting point by placing the simple question, “Where do you want to go?” Very large and prominent. By restricting the choice for users, it provides a clear direction.

Motivate to be a hero

Users have to be motivated again and again on their journey through a website so that they do not lose interest. Especially if you are visiting the site for the first time and you are new to the company and its product or service. Users are motivated by encouraging them to keep clicking. For example, by cliffhangers, like the open end of every Netflix series. Teasers at the bottom of a page cause visitors to continue scrolling. Among other things, UX designers can easily place part of the following content at the bottom of the page. But be careful: If there are apparent gaps when scrolling, users may overlook the content.

Less is more, as the comparison of the UX design of German and Swedish rail shows: While Deutsche Bahn overwhelms its users with too many interaction options, the website of the Swedish rail gives a more precise orientation through a reduced, minimalist design.

Texts should also motivate. Numerous studies on reading behavior on the Internet have already shown that Internet users are mainly skim-reading today. Because their attention span is also decreasing, UX designers have to design bright and clear websites. For this reason, a good UX design does not have long body texts. And if it does, then only with precise subheadings and pictures. In this way, users can orient themselves on the various focus points. Also, designers should place content on the left or in the middle, since users are used to reading from left to right and therefore typically scan a page in a Z or F pattern.

Smooth usage delivers a good user experience. However, this is not a unique selling point. But what makes a website unique? Good stories! Therefore, the success of a web design today depends not only on the functionality but, above all, on whether it generates emotions, the best positive one. Some brands do this by touching the user through pictures and videos, through their speech and choice of words. The messenger service Slack has found a proper implementation: It welcomes its users in a friendly manner, motivates the participants, has apparent features that everyone understands intuitively. The Mailchimp platform also shows how emotions can be aroused by celebrating the successful sending of an email campaign with a fun animation.

But which feature works? When do users feel motivated when do they lose interest? Do users understand the content or message of the company? It is all about finding out as early as possible. The basis of good UX design is, therefore, communication with users in the form of tests or surveys. Designers need to understand how users interact with a website and how each feature affects them.

To optimize the websites, a more detailed test in which the users are observed is suitable. These tests show how well an interface design supports the user in his mission – and what hinders him. Based on these results, UX designers can create personas, a kind of prototype for the target group. They also make it possible to generate a detailed customer journey map, in which the needs of users and customers are recorded so that they can better understand their decisions.


Storytelling offers many ideas for a successful user experience design. Anyone who sees their users as heroes who experience the visit to the website as a journey to a specific destination can offer them a bright, appealing, and exciting design of their website. With visual surprise elements, a positive and emotional response as well as the simple presentation of complex content, users have fun clicking and scrolling.


Categories: Blogging, Content Marketing, Digital Marketing, Uncategorized

Tags: ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

<span>%d</span> bloggers like this: