Tell Stories That Convert: How to Add Narrative to Your Site

Disclosure: Our content is reader-supported, which means we earn commissions from links on Crazy Egg. Commissions do not affect our editorial evaluations or opinions.

Storytelling is the reigning buzzword in design circles these days. It is cited as a powerful technique for designing user experiences, developing user personas and uniting a creative team around the same goal.

Thanks to its high persuasive potential, succeeding where facts alone cannot, storytelling is also an effective tool for creating landing pages that convert.

It’s well known that the most successful salespeople are often the best storytellers so it makes sense that designing and copywriting for the web should are no exception to the rule.

Here are five ways you can weave compelling stories in marketing—specifically in your design and copy—so you can develop narratives that convert:

1. Find the Right Story for Your Audience

Not everyone likes the same stories. Just as some of us prefer Dostoevsky to Chekov while others swear by Hemingway, different stories appeal to different people for a variety of reasons. Some of us prefer realism in a drama, while others seek an escape in comedy.

Finding out what those reasons are for your target audience and telling the right story is crucial to high conversion.

When I first began writing on the benefits of stories in marketing, I used to start off by detailing the importance of knowing your audience. However, I have now come to the conclusion that it is not only vital to know your audience but to also find a story that is right for them.

If you are targeting a working class segment, you may think writing relatable copy is the key to connecting with them. However, an aspirational story might resonate better with your audience because they may be looking for an improvement and not a continuation of the same.

All of this may sound tricky to nail down, but the good news is that if you have already identified a problem and have a product that solves it, you have half the work done. All that remains is to ensure that you communicate the problem in a way that resonates with your audience.

This is where the right story will help create a shared understanding of the problem and connect your solution to your audience’s needs.

Curt's: stories in marketing

The Curt’s Special Recipe landing page focuses on the history and authentic family origins of its brand. It is effectively pitching to an audience that is interested in knowing the story behind a business and prefers it to be family owned.

By giving the names of the founders, the landing page essentially creates characters the audience can feel a personal connection with.


The Todoist landing page uses video vignettes to evoke stories about busy people leading happy lives-—a perfect fit for a powerful to-do list app.


The Forest App landing page, on the other hand, has built a story around the general assumption that their audience cares about trees (and that too in a virtual forest) because, arguably, most people do.

Is it a tactic scary enough to coerce people into using their time more productively (which is the objective of the app)? Probably only for those who care about virtual trees.

For everyone else, procrastinating might turn out to be worth losing a virtual forest the size of the Amazon.

2. Start with a Hook

No discussion of storytelling as persuasive communication is complete without this particular tip. Literature and Cinema are full of examples of the ‘hook’—a gripping start that kicks off the story in an exciting way.

The hook is even more essential on the web since the attention span online is even shorter than the one for books and films. Where a user makes their mind about your web page is a span of seconds, you don’t have a lot of time to engage their attention and bring them further into your experience.

The hook can be a tantalizing image, but a great piece of copy can not only work alone but also bolster a visual. This is why so many of the best advertising campaigns are often just a single image with a killer tagline.

Ashley Madison

The Ashley Madison landing page, provocative and intriguing, is a possibly extreme example of the hook in action, but it’s an excellent showcase for using just the right hook for your target audience.

The service you are delivering might not be as exciting as an affair, but there’s always room for boldness and an attention-grabbing statement.

3. Use Visuals and Copy that Complement Each Other

Think of your favorite childhood storybooks—there were probably a good number of picture books among them. Picture books work well for young children because they understand children’s short attention spans and use visuals not only to break the monotony of text but also to make it richer.

In fact, there’s another parallel between children’s picture books and high-conversion landing pages: they keep it simple, short, fun and relevant. Turns out that the average web user isn’t all that different from a kid!


The Rdio landing page uses eye-catching visuals and variants of a pithy one-liner to communicate the main offerings of their service. There is more text once you scroll down, but images are used throughout to liven up the narrative.

For an online radio service built around a medium as sensorial as music, the flashy visuals and text communicate its story even before the user hears anything.


Lixpen accompanies most of its text with the striking visual of a pen drawing a line. It ensures that the key visual leaves a strong impression even as the (substantial) text on the website moves around.

4. Leave them Wanting More

You don’t want to give it all away. Create suspense and intrigue, build up anticipation, give a little nugget (a free eBook never hurt!) and raise the stakes. Attach the fulfillment of your readers’ curiosity only to your call-to-action.

A great synopsis can make audiences interested in a story but spoilers ruin it for everyone.


The Instapaper landing page is very minimalistic and uses a simple yet powerful animation (and a succinct tagline) to drive the point home. If visitors want to immerse more deeply, they can ‘Create an Account’ or scroll below for short descriptions of the service’s main offerings.

5. When in Doubt, Follow the Classic Dramatic Structure

Experimentation is always welcome—since the most creative and effective work comes from it—but the traditional model is as reliable as ever too.

For centuries, audiences have responded to the same sequence of Exposition, Rising Action, Climax, Falling Action and Denouement that governs some of the most successful plays, stories and movies.

You too can follow this structure.

  • Begin with the exposition (the backstory), highlighting the problem and need for your service.
  • Follow it with Rising Action (a series of elements that heighten the anticipation and bring intrigue).
  • Place the Call-to-Action as the Climax (the part where the conflict is resolved in dramatic structure).

If you succeed in conversion, make the denouement (aftermath) rewarding as well by keeping the conversation going and ensuring that your audience doesn’t experience buyer’s remorse or leave your experience with a bad taste.

Word of mouth can make or break a play or a film and your product or service is no different!

Furniture Realm

The body text on the Furniture Realm landing page introduces a problem, proposes its service and then heightens the offer to increase their customers’ need for a resolution.

Bottom Line

For today’s social consumer, storytelling is a critical part of your conversion toolbox. Successful salespeople (and pro CROs) are often the best storytellers. Improving your ability to merge storytelling into your web pages will likely improve your conversion rates.

Try applying these five narrative tactics into your website. Integrate story into your design and copy, and let us know how it works for you.

Babar Suleman (MFA, Parsons School of Design; Fulbright Scholar) is a visual storyteller and an experience designer. He is interested in the interplay of words and visuals in the communication process and uses his diverse experience as a writer and designer to create meaningful user experiences and effective branding strategies. You can contact Babar at his official website.

Make your website better. Instantly.

Over 300,000 websites use Crazy Egg to improve what's working, fix what isn't and test new ideas.

Free 30-day Trial