24 Jun StoryBrand Website Examples
In this article we will explain what StoryBrand is, show you numerous StoryBrand website examples, and teach you how to implement it on your website.
What is StoryBrand?
StoryBrand is a framework developed by Donald Miller and covered extensively in his best-selling book Building a Story Brand, on his podcast and his workshops. The framework helps you clarify your message so that your websites, emails, communication and marketing will resonate with your audience.
Many businesses make the mistake of highlighting their features. However, your customers care more about benefits than features. Features are the facts about a product or service, but benefits communicate what a product or service does to help people. Every person is asking “What’s in it for me?” so the sooner you can answer this question the better.
You’ve heard it before, “facts tell, stories tell” and it’s true. The StoryBrand framework provides a plan to clarify your message, eliminated confusion and help your audience take the next right step.
“StoryBrand marketing is both acknowledging and acting on our customer’s perception of our brand’s role in their story, to earn their business.”
StoryBrand in a Nutshell
Storytelling is one of the oldest forms of communication. Everyone loves a great story. And great stories tend to follow a format. StoryBrand boils down the format into seven steps:
- A Character (Hero)…
- Has a Problem (Villain)…
- And Meets a Guide…
- Who Gives them a Plan…
- And Calls Them to Action…
- That Ends in Success…
- And Helps Them Avoid Failure.
Jonah Berger, in his popular book Contagious, puts it this way:
“Narratives are inherently more engrossing than basic facts. They have a beginning a middle and an end… when you hear people tell a good story you hang on every word.”
Think about your favorite movie or book and you’ll see that it generally follows this format. How about the recent hit movie The Greatest Showman:
- T. Barnum
- Wants to create a better life for his family but becomes consumed with his business
- Phillip and the troupe
- Bail out Barnum after his circus burns down and inspire him to start again
- He becomes self-aware to realize he already has enough
- He reprioritizes his family, mends his marriage and let’s Phillip take the reigns
- Barnum lives happily ever after with his family
The framework is even more clear in classic examples like Star Wars, The Lord of the Rings, Back to the Future, Hunger Games, Harry Potter. They all follow the format outlined above.
So take a few moments and think about this for your business. Use the BrandScript, a seven-step framework to clarify your messaging.
Does StoryBrand really work?
StoryBrand is all about creating one thing for your communication: clarity.
StoryBrand includes principles that will allow your website to:
- Have a clear brand message that is easy to understand.
- Be simple and easy for customers to interact with.
- Convert. The whole framework is designed to get customers to respond and engage.
- Be different from competitors.
Most websites are full of noise. Using the StoryBrand framework you can have confidence that your website is speaking clearly to your audience and have pride knowing that it’s building with intentionality and purpose.
How does StoryBrand work?
StoryBrand works by clarifying your message, eliminating confusion and providing a clear call to action. Most businesses make the mistake of talking about their business as the hero rather than focusing on your customer. The old way of marketing is to focus on your business. The new way of marketing is to connect with your customer and guide them on the path so they can have success.
“Above the Fold” / Hero section
The “above the fold” section of your home page is the part of the page you can see when the site first loads without having to scroll down. People have a short attention span so it’s important to make good use of the “hero” space and immediately answer the question they are asking, “what’s in it for me?” Avoid belief statements or negative statements describing what customers hope to avoid.
Miller suggests that the items shared in the “offer” or “hero statement” should be “short, enticing and exclusively customer-centric.” Use a short sentence that is bold and compelling to communicate your message. The goal is to turn browsers into buyers.
There are three simple principles to follow when crafting your hero statement:
#1 Promise an Aspirational Identity
Regardless of whether you are a B2C, B2B or non-profit organization, at the end of the day, it is people will buy your product or service or support your cause. Although you can appeal to a surface level external issue that your audience or “hero” may be facing, it’s better to dig deeper. Most people want to know: Do I have what it takes?
When you are able to address this deeper issue and give your “hero” something to aspire to, your messaging will really resonate.
Everybody wants a stress free wedding and Party with a Snapp addresses that.
#2 Promise to Solve a Problem
When people visit your website they want to know what problem you help solve. Make it clear from the beginning.
Schultz Photo School makes it clear they help families take better pictures.
#3 State Exactly What You Do
People are impatient and the human brain is always trying to conserve calories.
So make it very clear what you do and who you help. Focus on how you help people survive and thrive. If you confuse, you lose.
Canary Labs clear states what they offer on the home page.
The Grunt Test
In StoryBrand, Miller talks about the Grunt Test. The Grunt Test is a way for you to double-check if the hero section of your website is going to be effective. This above the fold section is the most valuable real estate of the entire website and you only have about 3-5 seconds to convince someone that the rest of your website is worth reading.
The Grunt Test answers three basic questions:
- What are you offering me?
- How will it make my life better?
- What do I have to do to get it?
If you can answer those three simple questions you will have a powerful hero section. We’ll talk more about that third question down below in the Clear Call to Action section.
Navigation Bar with few options
Make sure your navigation bar is uncluttered and clear. Remove anything from your top menu that is unlikely to lead your customer to a conversion or sale. Remmeber, StoryBrand is all about creating clarity. Websites that implement StoryBrand well will have very few links in the navigation bar.
When there are too many items in the navigation bar, visitors get confused about what they are supposed to do. The goal of your website is to show how simple it is to do business with you. You can always relocate liniks to the footer, or provide other ways to access the content.
Your BrandScript determines what you say, but not the order you say it. Here are some other things to consider when it comes to your home page.
This section usually highlights three or four quick-hit value propositions that come from the Success section of your BrandScript. These are usually secondary benefits your customer experience if they get the thing they want and have their problem solved. They might be accompanied by icons or visuals.
Cornerstone Design Remodeling highlights what makes them difference on their home page:
The 3-Step Plan (or 4-Step Plan) comes from the Plan section of your BrandScript. It should succinctly describe the process of how someone would do business with you or the stages that you will engage your client to solve their problem. You might even have different plans for different products or services. Here are a few examples of 3 steps:
Be Missional Finance spells out the 3 steps on their home page:
Fly By Photo Booth makes their steps to do business with them very clear:
Rocket Mortgage uses a vertical visual to show their steps:
Clear Call to Action
Donald Miller says, “don’t hide your cash register.” So many websites hide their direct call to action. Ensure that your call to action is prominently located and repeat it often. The human brain needs to see a message 8 times on average before it processes the information.
Here are some examples of a clear call to action:
- Buy Now
- Schedule a Consultation
- Find a Venue
- Schedule a Call
- Book Now
- Request a Quote
- Find a Location
- Call Us
Visually make the primary call to action button on your website one of your brand colors. It should be big, bright and obvious. If possible, try to avoid unclear calls to action like “View our Work” or “Learn More” or “Get Started” – these are not bad buttons to have but they have an element of uncertainty. The customer may not know what is behind the click.
Bowman Fly Fishing makes their call to action clear both in the navigation and in the hero section:
Authority & Empathy
In this section you want to pull from the Guide part of the BrandScript and communicate how your experience and expertise helps you understand and solve problems for your customers. Don’t get caught up with your company history, your bio or company structure.
You can also include logos of companies you’ve worked with, testimonials from clients or customers or awards you’ve won.
We include testimonials and a number of awards we’ve won on our home page to help demonstrate our authority:
A lot of brands forget to use empathy in their marketing. People are more likely to buy from people and brands that they connect with. If they can relate to you in a human way, you are more likely to help guide them. Start by telling them, that you understand their frustration.
Images of Success
When you’re looking for photos or video to use in your hero section, pick images that display an aspiration identity of your audience. There is real science behind why smiles sell. Low performing websites often show images of their building, their own people or even their product. Better performing websites tend to show images of how their customers lives are in a better state because they chose to do business with you.
The Carnegie Investment home page image above doesn’t show a financial advisor, it shows a retired couple living their dream on a boat. Use images of success.
Looking for the right photo? Check out the Best 15 Best Free Stock Photo Websites.
It’s been proven that people don’t read your website, they scan it. So it’s important when you’re working on your content to use design elements that will help your content stand out and allow them to browse it.
Use design elements like headlines, bolded text, call-out boxes and lists to highlight various items from the Problem, Empathy, Success & Failure sections of your BrandScript.
HEADLINES & CONTENT
When writing text, avoid long paragraphs or visitors will skip right over them. Aim for shorter paragraphs (3-4 lines of text at most) with headings and sub-headings. On the internet, indenting paragraphs is not a thing.
Whenever possible, use headlines to communicate something from your BrandScript so there is no wasted copy.
- Instead of “About Us”, you might say “We Help You Build Your Dream Home” (Success)
- Instead of “Our Services,” say “Building beautiful homes in Northern Virginia” (Success)
If the headline in your hero section doesn’t address the main Problem that you solve, be sure to say it with a large headline in one of your first couple of sections on the home page.
As much (well organized and browsable) content as possible, 300 words minimum per page when possible for good SEO rankings. Learn more about how to write SEO content
When you do have a lot of text, make it easier to read by picking out a few words or phrases to be bolded. That will allow someone to read only the bolded text and understand the whole paragraph or section.
LISTS & CALL OUT BOXES
Use bullets and other called out text (quotes, stats, etc.) when possible. In fact, on the internet you don’t need to use complete sentences. Using a good bullet list can communicate information quickly and will cause visitors to stop and read.
- Bullet points stop “scanners”
- You can use fewer words
- Much more impact
- Visitors will read the content you’ve spent so much time writing
CALL OUT BOXES
You can have text set apart with a border or different color. This is great for quotes, testimonials, reviews and facts:
“I usually don’t read text, but for some reason, this stood out to me and I had to stop and read it.” – A Casual Browser
StoryBrand Website Examples By Category
These websites use the StoryBrand framework to clarify their messaging and call their hero (audience) to action. Pick a category to skip ahead or scroll down to see all of them.
- Service Businesses
- Software as a Service (SaaS) & Online Services
- Product Based Business
- Business with Physical Location
These businesses offer a service and utilize StoryBrand for their website messaging.
6th Ave Homes Home Builder StoryBrand Example
Judy Ingels Lending Consultant StoryBrand Example
365 Performance Fitness Trainer StoryBrand Example
SaaS / Online Services
These Software As a Service (SaaS) Websites and Online Service Websites utilize StoryBrand to create clarity.
LibertyID Identity Theft Protection StoryBrand Example
Fluro Online Church Management Software StoryBrand Example
Accounting Complete Virtual Accounting & Bookkeeping Services
Perfect Venue Online Venue Locator StoryBrand Example
Product Based Business
These are product based businesses that sell products online and utilize the StoryBrand framework.
Drive Audio Wireless Headphone Product Based Business StoryBrand Example
Wilderness Athlete Product Based Business StoryBrand Example
Koha Pet Food StoryBrand Example
Physical Location Business
These businesses have a physical location (brick and mortar) and utilize StoryBrand for their messaging.
Community Preschool StoryBrand Website Example
Christian Brothers Automotive Repair StoryBrand Website Example
Baked In Nashville Cakery StoryBrand Website Example
Churches usually focus on one of three things in their hero messaging: Hope, Community or Purpose. These websites apply the StoryBrand framework.
First Presbyterian Battle Creek StoryBrand Church Website Example
HillCityRVA Church StoryBrand Example
These non-profits utilize the StoryBrand messaging to clarify their message and increase giving.
SendAnna.com Non-Profit StoryBrand Example
Dressember.org Non-Profit Story Brand Example
The Lamb Center Homeless Shelter StoryBrand Example
Looking for more StoryBrand website examples? Visit our StoryBrand Website Examples Pinterest Board.
We walk clients through StoryBrand
Most web designers don’t take the time or know how to help their clients improve their content. At Johnny Flash Productions, we’re different. As a part of our website build process, we walk clients through the StoryBrand framework and help them clarify their messaging for their new website. This ensures you not only have a beautiful new website but messaging that is clear, on-point and encourages conversions.
Ready to take Your Business to the next Level?
We would love to learn about your business or organization and you’re online goals. Whether you already have a website that needs some tweaking or you are ready for a brand new website, we’re here to help hold your hand each step of the way. If you’re not the hand holding type, no problem, we’ll stand on the sidelines and shout instructions. 😁