[July 2019] How to Build a Storytelling Wireframe

By David Norcross, Managing Director of Lexicon

A solid wireframe is essential to providing an enjoyable user experience on your website. A sleek, well-designed and user-friendly website will attract the eyes of customers, but it won’t necessarily capture and hold their attention. For any website to be successful, it needs both a strong wireframe and a good story. In the best websites, the story is so ingrained that it becomes indistinguishable from the wireframe itself.

Survival of the fittest brands

Our instincts for human connection and an understanding of the world are among the most fundamental longings we have. For thousands of years, people have been telling stories to map out the pathways to better lives. The best stories capture our attention and our imagination, because they appeal to our most basic needs. The same is true of successful websites.

If your website doesn’t directly show people how your product can help fulfil a fundamental need – like the need for food, shelter, self-fulfilment or human connection – they’re going to tune it out. Maybe your business has been in your family for generations and you now have the largest auto manufacturing plant on the Eastern Seaboard. As impressive as that achievement might be, your audience won’t care because that narrative doesn’t satisfy their natural interests. You’re telling them the wrong story.

The right story

We immediately recognize a great story – even if it has a setting and characters we have never seen before – because it follows the same framework that great storytellers have used for thousands of years. The hero’s journey is timeless and it’s just as effective for a movie, a TV series, a play, or a novel, as it is for a website. If you follow the seven foundational steps of storytelling, your customers will recognize themselves in your compelling story and will feel an instinctive need to pay attention.

The 7 steps

  1. The hero
  2. The problem
  3. The guide
  4. The plan
  5. The call to action
  6. Avoiding failure
  7. Success

That’s it. Just about every great story ever told follows this framework.

Aladdin lives on the streets and worries that he’ll never be worthy of Princess Jasmine. Then he meets the Genie, who gives him three wishes – but, more importantly, teaches him to believe in himself. He goes on to defeat the evil Jafar, avoiding certain death and becoming the hero of Agrabah. The hero then marries Princess Jasmine and frees the Genie.

Neo is a bored and disillusioned office worker by day and a desperate, searching computer hacker by night. He knows something is terribly wrong with the world, but he can’t figure out what the problem is until he meets Morpheus. Morpheus pulls him out of the Matrix and gives him all the tools he needs to become the One – the first ever human to defeat an Agent and humanity’s best hope to free itself from the Matrix.

To varying degrees, every story follows these seven steps. Storytellers often tinker with the framework to fit their stories, but they do so at their peril. Stories that deviate from the seven steps, risk becoming convoluted and losing our attention.

Let’s look at the steps in more detail.

The hero

For websites to work, the customer always needs to be the hero. Many brands make the basic mistake of positioning themselves as the hero. That doesn’t work. Everyone is the hero of their own story. When a brand makes itself the hero, it muddles the story.

Making your customer the sole hero of the story typically involves designing a character as a stand-in for the audience, with whom your customers can identify. Developing that character’s journey means identifying what your customers really want, and what will motivate them to choose your brand.

If your products or services can fulfil a fundamental need – like saving time or money, building a community and gaining status within that community, or finding a life of meaning and purpose – the hero will have somewhere interesting to go on his or her journey.

The problem

Now it’s time to introduce some conflict into the story.

The villain is usually one of the story’s most compelling characters. Every hero needs a foil, and the same is true for your customers. Successful websites create a tangible villain and often find a way to personify that villain.

The villain doesn’t have to be cartoonish. One of Apple’s most successful ad campaigns ever personified the Mac and the PC, with the Mac being the hip young guy who wants to help you express yourself with simple software while the old wonk PC bores you to death with all his technical explanations.

Elaborating on the conflict can also make it deeper and more meaningful. Most products solve an external problem, but especially clever websites delve deeper to address the internal and philosophical problems that follow.

Imagine a person with the external problem of an overgrown, unkempt lawn. This simple issue may also mean that they feel embarrassed because their neighbours have nicer lawns than them. They struggle with issues of social status, reasoning that a busy and successful person deserves a nice lawn.

This is a simplistic example, but it illustrates that external problems have deeper implications. If your wireframe story can identify the external problem and convey the deeper implications of that problem, customers will be much more interested in your proposed solutions. Consider that the average person has only a marginal interest in lawns on any given day, but they are acutely aware of their social status.

The guide

After the hero, the guide is the most important character in any story. That’s where you come into the story. Always remember that customers don’t need another hero. They need a guide. Besides, the hero is not the strongest character in the story. The hero has a huge problem and is filled with anxiety and self-doubt. But the guide has already been established as a successful hero in his or her own backstory and can provide the essential plan the hero needs to succeed.

As your customer’s guide, you need to demonstrate both empathy and authority. You have to be sympathetic to customer’s problems. You know what they’re going through, and you know how hard it can be. Luckily, you already have all the answers.

You can demonstrate your authority in many ways: testimonials from previous clients, a list of awards, or a set of knowledgeable blogs. Make sure you prominently display that authority on your website.

The plan

The plan makes the guide indispensable. If the customer had a plan, they would have already solved their problem on their own and there wouldn’t be a story.

The customer trusts you as a guide at this point, but they want you to show them the way. The plan you provide should clarify the steps your customer needs to take and should also address any remaining concerns they may have. The steps may seem obvious to you, but they might not be to your customers. Make sure the steps in your plan are as clear and simple as they can be.

Call to action

You’ve identified your customer’s problem and established yourself as a guide with a plan. They’re on board with the story so far, but they won’t act on your plan unless you call them to action.

Many businesses hesitate to make their calls to action too obvious or overt. It’s true that you don’t want to hector your clients. But if you believe in your products and services, why not make a loud and clear call to buy them?

The CTA can be an obvious, “buy now” button – but it can also take on more subtle forms, like “call now” or “get a quote,” or “schedule an appointment”.

The direct CTA can also be accompanied by a more indirect version that asks the client to “learn more”, or “watch this video for more info”. If the customer isn’t quite ready to buy the product, the indirect CTA gives them more information to help them make their decision. Whatever form it takes, your CTA should be on prominent display on every page of your website.

Avoid failure

If your story doesn’t have real stakes, it won’t be compelling. You don’t want to be a fearmonger, but you do want to show the client what failure might look like if they don’t buy your product.

In 1979, psychologists Daniel Kahneman and Amos Tversky demonstrated in their work on prospect theory that people are more likely to feel worse about a potential loss than they do about missing out on a potential gain. To put it simply, people feel worse about losing 1,000 THB than they do about not winning 1,000 THB. Your website should tap into this psychology to show what your customers stand to lose if they don’t buy your product.

If you can tactfully inject just the right amount of danger into the story, your customers’ success will be so much sweeter in the end.


Paint a clear picture of success for your customers. How will their lives look after your products or services have transformed them?

The conclusion of the journey should close the story loop in a satisfying way that leads to your hero winning power and prestige, or satisfaction at a job well done, or the fulfillment of discovering a strength that was inside of them all along.

Your website should appeal to your customers’ aspirational identity. How do they want to be seen by their friends and co-workers? Your product could be a big factor in this equation. If you sell beauty products, you’ve taken your hero from glum and hesitant to carefree and radiant. If you’re a teacher, the hero has gone from uninformed and anxious to knowledgeable and confident. If you provide professional services, your hero has gone from stagnant and disorganized to agile and laser focused.

Customers should see that your products and services deliver more than just simple success on an isolated issue. They also unlock the door to a genuine transformation.

A good story works on any platform 

Websites have changed dramatically in the last few years, and the rate of change shows no sign of slowing down. But people are still fundamentally the same: They want to be safe, prosperous and happy in their surroundings. If your products and services can help them fulfil those basic human needs, the best way to show it is with a wireframe that tells a great story.

Wireframes are constantly evolving. A great story is timeless.


David Norcross is part of the Australian Chamber of Commerce Thailand’s Communications Sub-Committee and is also Managing Director of Lexicon. Lexicon is a digital PR firm based in Bangkok, specializing in all forms of storytelling through digital marketingvideo productioncontent writing and graphic design.

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 )

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