Storytelling to increase website conversion

Humans evolved to process information in a story form. The mediums have changed where a story is shared. In books, in movies, or online.
Our human brain remained the same. From the time people told stories at a fire before going to sleep. Thousands of years ago.

Lost on the Road by Reijo Palmiste
Lost on the Road by Reijo Palmiste

How to not be boring

When designing your website imagine you said before "Let me tell you a story". It can transform the driest subject into an engaging one. Stories are very powerful. It's easier to grab and hold someone's attention. 
Another trait of stories is that they help process information. People will remember the message easier.

The narrative arc

Aristotle identified the basic structure of stories. Believe it or not, it still holds true to this day. Beginning, middle, and end. 
The “beginning” describes the setting, characters, and plot. 
The “middle” contains the bulk of the story. The action in continuous growth in tension. To the point of apex or climax. 

The “end” is where you take your story to a more peaceful intensity and conclusion.

Narrative arc phases
Narrative arc phases

You can end your story at the apex. It's called a cliffhanger. A common technique to generate intrigue. You might have encountered it in clickbait titles or tv show episodes. 

Narrative arc for landing pages

Tell the story of your product offering from your potential customer perspective. Empathize with them and describe how you identified the problem. Tell me why it is relevant.
Gradually move into the middle section of your story. Describe how you are solving the problem. What challenges you might still be facing on your journey as a founder. New upcoming features.

At the end invite your visitors to action. Your call to action button. Don't forget to repeat it at the end of your landing page. Or have it sticky as you scroll. 
Here's a good example of storytelling on a landing page by Typefrom.

Typeform website sections are following a narrative that peaks at "Here’s how it works"

Joseph Sugarman, a legendary copywriter argues in his book "Adweek copywriting handbook" that the role of your heading is to make people read the subheading. Then scroll your entire website in a seamless way. Easier said than done. But storytelling helps you with that. 

The undeniable story

A classic way to describe a story is by presenting a problem, showing the data, and providing a solution. While this is a great and simple approach, it has one flaw. The "problem setting" puts your audience's brain in a negative state at first. 

It's harder to lift them into a positive mindset.  The mindset where they will be more eager to act. 
Here are the phases of the undeniable story method.

Undeniable phases
Undeniable story phases


The undeniable story method argues that you should start with the vision first. Present the future where you solved the problem and delight your potential user. It requires more effort from a designer but it's worth it.


Make your audience understand and feel what are the obstacles between them and that vision. Ideally, it's your product offering. It can be an example of frustration or delights that they might be facing. 


There might be still a type of personas in your audience that need hard data. This is the moment you share it with them. It can be social proof or hard metrics like the amount of time you reduce for your customers. Show data that you have, don't cheat.

Undeniable story for landing pages

Reveal your product in the beginning. In your hero section. How easy it is to use. How their problems are solved by your offering. 

Take them through a linear journey of solving the problem. With your unique selling proposition. 
Convince the skeptics with data or social proof. 

Here's a great example by Pitch
Notice how they show the interface already. And how might users already start working on it?

Pitch Hero Section
Pitch Hero Section

Feeling of boundless possibilities and solving problems for different company departments. Design, Sales, etc

Pitch example of serving multiple departments
Pitch example of serving multiple departments

Social proof and decreased time as a quantitative perspective of the solution.

Pitch social proof section
Pitch social proof section

Get your website evaluated by me

Get your landing analysed for conversion for 5$.
Use 90%off promo code: XK1NVSWR

🐟 Just give me the fish

Consider your storytelling narrative when designing your landing page. The sections like hero, features or benefits, social proof, and footer.

Use the classic "narrative arc" or the "undeniable story" storytelling method. Influence people with the vision of the solved problem instead of stating the problem. 

Hook and increase the tension of your story to keep your visitors engaged.
Be personal and evoke emotions. For the skeptics share quantitative data or social proof. 

End your story with a call to action.

If you’re looking for a tool to build your website. Use Webflow.
It’s the best and has no constraints on design. Iterate for conversion.

— Oleg

Get your website analysed for conversion for 5$.
90%off promo code: XK1NVSWR

Get Conversion Analysis

Here's an example for Resumey.

Practical conversion tips and cases. Weekly.

Awesome! We sent you an email confirmation
Oops! Something went wrong while submitting the form.

Join Our Community

To learn from practical tips and case studies: join my community of founders

We're affiliated with some products we recommend to support us. We don't suggest ones we wouldn't use.

More Articles

Case Studies
All Articles redesigned for conversion. +140% increase.

How I redesigned my website and increased conversion by 2.5x
View ArticleArrow Button
Call to action
All Articles

What is the best color for your website Call to Action?

How much can a button color impact conversion?
View ArticleArrow Button