Design a Better Homepage With the StoryBrand Framework

Homepages are like shop windows. They should give the consumer an idea of what the business does, who’s running the business, and at least a hint of the products and services it offers, whether those are actual items for sale, information, or entertainment.

Just like a shop window, homepage designs can either entice people to look deeper, or they can fail to capture a visitor’s attention (or worse, actively drive them away). Clearly conveying a brand story is one method UX designers can use to keep people on the site and engaged enough to explore beyond the homepage (the StoryBrand framework provides a good roadmap for this).

What Is the Goal of a Homepage?

A landing page’s goal is to convert visitors, while a homepage’s goal is to engage visitors with the brand and offer solutions to their problems. If done effectively, a homepage visitor can turn into a customer—potentially a repeat customer.

Homepages have improved quickly over the last few decades thanks to analytics and the marketing and design teams who have made performance improvements based on that data.

Back in 1993, when only 600 websites existed, the only method to measure the traffic of a website was a server log that counted the number of visitors. Next came hit counters, and then eventually more comprehensive analytics suites that gave insight into things like unique visitors, page views, and bounce rates.

Using that analytics data, UX designers are able to optimize call to action placement, improve site speed, A/B test, use videos to engage visitors, use high-quality images to captivate people’s attention, and include messaging tools to improve the performance of a homepage. However, will this guarantee loyalty and trust from consumers?

Three Common Pitfalls When Designing Homepages

Businesses—and by extension designers—run into three main pitfalls when creating a homepage:

1. They don’t focus on the important stuff. They tell people all about the characteristics of their service or product. People don’t care about this. They want to know that the business will solve their problem and improve their life.
2. Businesses don’t communicate their message clearly. As Tony Haile of Chartbeat says, a website has less than 15 seconds to capture a visitor’s attention.
3. They have a bad product which does not solve anyone’s problem. There’s not much a designer can do for a business if this is the case.

What Is the StoryBrand Framework?

Despite what some businesses seem to believe, a logo does not equal a brand. Far from it; a brand is a promise behind which lies the reason they exist.

People choose one brand over another for both rational and emotional reasons. Powerful brand messaging can produce loyalty to the brand itself rather than just the individual products it creates. A clear and consistent message is vital to achieve that end. What sets a brand apart from its competition is the brand’s story.

Storytelling is widely used by entrepreneurs to seduce investors in pitches and social networking. Companies like Apple understand and integrate the power of clear, simple storytelling in everything they do. They know it’s not about them; it’s about their customers.

The StoryBrand framework is a storytelling formula created by Donald Miller to help businesses communicate their most powerful messages simply and clearly. In his book Building a Story Brand, Miller states, “your customer should be the hero of the story, not your brand. This is the secret every phenomenally successful business understands.”

How to Use StoryBrand with a Client

Whether it’s a small company or a multimillion-dollar brand, the client must understand that confusing their customers will cost them money. Clarifying their message through the StoryBrand formula will, as Miller puts it, “organize their thinking, reduce their marketing effort, obliterate confusion, terrify competition, and finally get their business growing again.”

Miller compares building a StoryBrand to writing a story for a screenplay. He breaks it down to seven plot points.

A character who wants something (the person using the website) encounters a problem (their need), then meets a guide (the business) who gives them a plan (indicates next steps) and calls them to action (call to action button), which results in a success story (they buy the product) and helps them avoid failure (reminder of what would happen if they do not buy).

This structure can be recognized in nearly every successful film. It can also apply to a business and its customers. The next step is for the client to write their brand story following this structure:

1. A character: The customer is always the hero of the story, not the brand. It’s up to UX designers to figure out what customers want from the brand, usually through UX research and user testing. They need to focus on the desires that drive people, things like conserving financial resources, saving time, building social networks, or gaining status.
2. Has a problem: The villain in the StoryBrand arc is the character’s problem. It’s useful to personify that problem and understand that the company’s products are like weapons the customer can use to defeat it. Companies tend to focus on solving external problems, but customers buy solutions to internal problems. People have three levels of conflict:
   - External (most businesses try to solve external problems)
   - Internal (such as frustration, intimidation, insecurity)
   - Philosophical (why does this story matter?)
3. And meets a guide: The guide is the business or brand. Customers need someone to take care of the problem. Their perception of the brand will be crucial to their trust. Two things must be communicated:
   - Empathy (show an understanding of the pain the customer may feel)
   - Authority (it will give the customer confidence that the brand is able to help them)
4. Who gives them a plan: The business shows the customer what they need to do next. Customers are still not sure whether to buy until shown a simple plan of action. UX designers can spell out the exact next steps for customers. They can also alleviate any anxiety the customer may have by addressing concerns related to the product or service.
5. And calls them to action: Effective calls to action facilitate purchases or signups.
6. That helps them avoid failure: What is at stake for the customer? What will they lose if they don’t buy from this brand?
7. And ends in a success: Tell customers how this specific action can change their life. Show them what their lives will look like after they buy the product and how that resolution will make them feel. Three solid ways storytellers end a story is by allowing the character to:
   - Win power or position
   - Find somebody or something that makes them whole
   - Experience some form of self-realization that also makes them whole

How to Use the StoryBrand Framework in a Homepage

A homepage should never be about the business. It should be about its potential customer.

Like on a first date, impressions are important and the goal is to generate interest. UX designers have to be strategic in what content is included and how it’s arranged. Following the framework as explained in the previous section will help designers ensure the right messages are put in the right places.

Although it may sound simplistic, there are only five important elements to bear in mind when designing a homepage.

The Headline

Headlines, sometimes used in combination with an engaging image, are placed at the top of a homepage. In almost every case, headlines should be customer-centric and show the visitor that the brand has something that benefits them. Headlines should either:

• Communicate the benefits to the customer
• Identify a problem the visitor has and reassure them that the brand can solve it for them
• Describe what the business does in a clear and concise way

Create Trust by Showing Authority

It is imperative to position the business as the guide and the solution to the customer’s problem. UX designers who master the art of creating trust will have an easier time convincing people that this particular brand is the right solution to their problems. They can do this by:

• Including testimonials from important customers who recommend the brand
• Displaying the logos of companies the brand has worked with
• Showing specific data around the number of users, transactions, etc.
• Featuring awards and accolades, published works, media appearances, and similar accomplishments
• Showing images of the team or the company’s headquarters

Call to Action

Creating an emotional connection with homepage visitors is the first step in converting them to customers. Once that emotional connection is made, it’s up to the call to action to seal the deal.

There are two kinds of calls to action:

1. Direct calls to action are for people who know they’re ready to buy or sign up, and include language like “Buy,” “Sign up,” or “Get started.” Clicking on these CTAs will take the buyer directly to a form to complete their transaction.
2. Transitional calls to action are for visitors who aren’t quite ready to purchase yet. They may need more time and information before they commit. These come in the form of “More info,” “Try for free,” or “Get in touch” types of buttons.

Some calls to action may combine the two, or put them side by side (often seen as a pair of “Buy Now” and “Learn More” buttons).

Engaging Images

Regardless of how serious the content of a homepage is, the StoryBrand framework demands a happy ending. When selecting images, keep in mind that some of them should give that “happily-ever-after” feeling.

Images appeal to the emotions of visitors, particularly images of happy people. Showing photos of happy people helps people imagine what their own happy ending might be like if they make the purchase.

Short Text

The less text, the better. Many consumers won’t read long blocks of text, so it’s best to convey the brand message in as few words as possible.

UX designers should help clients share their story in the simplest way.

Successful Homepages Answer Key Questions

A successful homepage will be able to capture visitor interest in less than five seconds. From there, it will have about 15 seconds to answer the three questions people ask themselves (often subconsciously) when visiting a homepage:

• What do they do?
• How can they help me?
• What do I have to do to buy or engage?

UX designers can use the StoryBrand framework to create a homepage that immediately captures interest and answers those questions effectively. It offers a clear path for success for both the designer and the brand.

Let us know what you think! Please leave your thoughts, comments, and feedback below.