9 website sections you're probably getting wrong: A StoryBrand framework guide

Are your key website pages working? Most businesses make the fatal mistake of missing key sections or getting them totally wrong. Cluttered designs, unclear messaging, a focus on “we” instead of “you” and lack of compelling calls to action are just some of the common pitfalls most businesses make on their website. The StoryBrand framework will help to completely transform your website and create a compelling narrative that engages your visitors. Modify your existing website sections or add the sections below and you’ll be sure to capture more attention, get more engagement and improve conversions.

1. The Hero: A one-liner that hooks

Your website’s hero banner is the first thing visitors see, and it’s crucial to make a strong first impression. This section, often referred to as the hero, is a large, visually engaging area at the top of your homepage designed to grab attention. This is your opportunity to quickly and clearly tell your audience what you do, how you solve their problem and how it makes their life better.

Example “Hero Banner” section

• Main heading: “Transform Your Business with Our Innovative Marketing Solutions”
• Supporting text: “Struggling to grow your online presence? Our tailored strategies drive real results.”
• Call to action (CTA): “Get Started Today”
• Visuals: A high-quality image of a happy business team working together or a dynamic video showcasing success stories.

Why a powerful hero banner is important

A strong hero banner immediately communicates your value proposition, ensuring visitors know they’re in the right place and enticing them to explore further. The visual elements also help to capture attention and convey your brand’s personality.

2. Value Props: Showcase the benefits

Right below your hero, you should explain how your product or service improves your customer’s life. This section should clearly state the benefits, not just features.

Example of the “Value Props” section

• Benefits list:
  • “Increase Your Online Visibility”
  • “Boost Customer Engagement”
  • “Drive More Sales”
• Supporting visuals: Icons representing visibility, engagement, and sales.

Why a strong value props section is important

By focusing on benefits, you show potential customers how your solution positively impacts their lives, making it easier for them to see the value in what you offer.

3. The Stakes: Failure and success

Describe the potential negative outcomes of not using your product and contrast this with the positive results of using it.

Example of “The Stakes” section

• Failure description: “Without a solid marketing strategy, your business risks falling behind the competition.”
• Success vision: “With our solutions, you’ll enjoy increased traffic, higher engagement, and more sales.”

Why the stakes section is important

Highlighting the stakes helps motivate potential customers by tapping into their desire to avoid negative consequences and achieve positive results.

4. The Guide: Empathize and lead

Address your customer’s pain points and demonstrate empathy. Show that you understand their struggles and then position your product or service as the solution.

Example of “The Guide” section

• Problem statement: “Tired of seeing minimal results from your marketing efforts?”
• Solution overview: “Our expert team crafts personalized marketing strategies that deliver measurable results.”

Why the guide section is so important

By acknowledging their pain points, you build trust and connection. Providing a solution positions your brand as the guide that leads them to success.

5. The Authority: Establish credibility and expertise

Establish your brand’s authority and expertise by showcasing significant achievements, affiliations, client partnerships, and customer testimonials.

Example of “The Authority” section

• Client and partner logos:
  • Display a grid or carousel with logos of well-known clients and partners.
  • “Trusted by leading brands and partners:”
• Awards and certifications:
  • List notable awards and certifications with their logos and brief descriptions.
  • “Recognized by industry leaders for excellence in marketing innovation.”
• Customer testimonials:
  • Customer quotes: “Our sales have doubled since we started working with [Your Company]. The results speak for themselves.” - Jane Doe, CEO of Successful Business
  • Customer photos: A smiling photo of Jane Doe.

Why the authority section is so important

Showcasing your expertise and credibility reassures potential customers that they are in capable hands, enhancing trust and boosting your brand’s authority in the industry.

6. The Plan: Simplify the Journey

The next section should outline a simple, step-by-step plan for how customers can engage with your business. This removes any perceived complexity and reassures them that the process is straightforward. Showing the plan or steps to engage is your opportunity to pull back the curtain to show your prospective customers what life looks like working with you.

Example of “The Plan” section

• Step-by-step process:
  1. “Schedule a Consultation”
  2. “Receive a Customized Strategy”
  3. “Watch Your Business Grow”
• Visual aids: A flowchart showing each step with corresponding icons.

Why “The Plan” is so important

A clear plan reduces anxiety and helps customers understand what to expect, increasing their likelihood of taking action.

7. Primary Call to Action: When your customer is ready to buy

Your CTA is not only a button repeated throughout your web page, but it’s a key section on each page that calls your user to action, typically toward the bottom of the page. The biggest mistake businesses make on their website is not asking their customer to take action. When you don’t ask your customers to do something, they won’t — it’s as simple as that. Your CTA button and CTA section is a key component in driving conversions. It should be a bright color that is unique from all other buttons or links on your pages and clearly communicate what action your user is going to take.

Example “CTA” button and section

• Primary CTA: “Start Your Free Trial”
• Secondary CTAs: “Learn More” and “Contact Us”

Why your “CTA” is so important

Multiple CTAs throughout your site ensure that visitors always have a clear, actionable next step, making it easier for them to engage with your business.

8. Transitional Call to Action Offer: When your audience isn’t quite ready to buy

For visitors who aren’t ready to commit, provide a transitional offer, a low-risk way to engage with your brand. We often think of the primary call to action as the “marry me” button. But since most people aren’t ready to marry you the first time you meet, they may want to first go out on a date – this is your transitional offer or lead magnet. Give them something of value in exchange for their email so you can nurture them through retargeted campaigns, an email drip sequence or sms marketing so that when they are ready to marry you, your Primary Call to Action will be ready for them to take the next step.

Example of the “TCTA”

• Lead magnet: “Download Our Free eBook: 10 Tips to Boost Your Online Presence”
• Sign-up form: A simple form asking for name and email address in exchange for the eBook.

Why your “TCTA” is so important

A transitional offer captures hesitant visitors’ information, allowing you to nurture these leads over time and convert them into customers.

9. Footer: The junk drawer

The footer is your junk drawer. This section is where you put anything else that you absolutely need on your page or wanted to originally put in your navigation bar, but does not fit into one of the other sections.

Example Footer:

• Contact information: “Phone: 123-456-7890 | Email: info@yourbusiness.com | Address: 123 Business Lane, City, State, ZIP”
• Quick links: “About Us | Services | Privacy Policy | Careers | Blog”
• Social media links: Icons linking to your Facebook, Twitter, LinkedIn, and Instagram profiles.
• Additional resources: Links to FAQs, site map, or other useful content.

Why a well crafted footer is so important

A well-crafted junk drawer ensures that visitors have easy access to additional information and ways to connect with you, reinforcing trust and credibility. It acts as a catch-all for important elements that didn’t fit elsewhere, maintaining the overall usability and organization of your site.

Summary

To craft a high-converting website using the StoryBrand framework, start with a clear, compelling hero banner. Showcase your value proposition, illustrate the stakes by contrasting failure and success, and empathize with your audience’s problems as their guide. Establish your authority with client logos, awards, certifications, and testimonials. Outline a simple plan, prompt action with strong CTAs, offer transitional deals for hesitant visitors, and utilize the junk drawer in the footer for additional essential information. Each section plays a crucial role in guiding your visitor through a narrative that positions your brand as the hero’s guide.