Donald Miller’s Builing a StoryBrand has been a game-changer for a lot of businesses and how they approach their marketing.
So what makes a StoryBrand website?
There is no one “official” way to create a StoryBrand website. StoryBrand (the company) doesn’t prescribe a particular layout or flow for a website design. But there are common best practices that are recommended.
If you have read the book or participated in one of the online courses you understand the concept of a Marketing BrandScript. Using the StoryBrand 7-Part Framework you develop marketing copy that invites you customers into a story. StoryBrand has a great tool that you can use to help you develop your BrandScript.
If you don’t have a BrandScript, you can’t develop a StoryBrand website. Some people try to skip this stage and jump right to reworking their site based on whatever they remember from reading in the book. The problem is, half of effective marketing copy is deciding what NOT to say. If you don’t do the hard work or simplifying, clarifying and deleting, your messaging is going to be a mess.
Do yourself a favor and get your BrandScript in order first.
THE FRONT PAGE
The front page of your site is a sales tool. Even if you have returning customers or other people that use your site, the front page is for PROSPECTS. Everything there should be focused on turning browsers into buyers.
When people think about a StoryBrand website, they are mostly thinking about the front page of a website. This article is going to be focused almost exclusively on the front page.
The most common layout for a StoryBrand website is a “long scroll” page with multiple horizontal blocked sections. Part of the reason this is good website design is that more than 50% of your visitors will be viewing your site on a mobile phone and it’s much easier to scroll through content than it is to click on links and navigate to interior pages to find what you’re looking for.
A wireframe is a simple outline of your front page that shows the order of your page sections with the copy (headlines, bullet points, body text, etc) filled in, but with very few design elements.
You can draw out a wireframe in a notebook or even use Powerpoint as a way to organize your sections.
IMPORTANT NOTE: Your BrandScript determines WHAT you say, not the ORDER you say it.
A common misconception is that the sections of your website design sections should follow the same order as your BrandScript (Character wants > Problem > Guide….) but not necessarily. There are no hard and fast rules for what order your content should be presented. It’s more art than science.
That being said, there are common types of sections that sync up with sections from your BrandScript.
• Hero Image Section
This is the first thing someone sees when they land on your site. It includes your HEADLINE, SUBHEAD, and CALL TO ACTION button. You may also consider in your website design how your logo and navigation menu fit here.
• Value Stack
This is usually three or four quick-hit value propositions that usually come from the Success section of your BrandScript. They are often accompanied by icons.
• About Us
This section of your website design is usually the place for content from your Guide section. The goal is not really to tell your customers ABOUT your company (history, structure, bio), but instead to explain how your experience and expertise helps you understand and solve problems for your customers.
• Authority Signifiers
Another Guide section. Display logos of companies you’ve worked with or a testimonial from a client, or both.
• 3-Step Plans
From the Plan section of your BrandScript. Ideally no more than three or four steps, usually describing the process of how someone would start to do business with you, or the stages that you will engage in with your client to solve their problem.
• Agreement Plan
Another Plan section. This is where you describe your promise to the customer, or a philosophy behind how you do business so that you serve your customer well.
• Other BrandScript elements
The Character, Problem, Call to Action, & Failure pieces of your BrandScript don’t usually have their own defined section on a website. Instead, they are sprinkled throughout the other sections as headlines, bullet points, call-outs, etc.
A good Storybrand website design employs a header answers three questions within 5 seconds of someone landing on your page:
1. What do you do?
2. How will it make my life better?
3. How do I get it?
If your above-the-fold content doesn’t answer these questions, or if there’s too much going on and it’s is confusing the message, you’re losing prospects.
Your headline should be aspirational and specific. Either communicating what your customer wants or how they want to feel about themselves.
A super clear description of what your company does/offers. Avoid vague words like: strategies or solutions. Instead say things like: “we build houses and commercial buildings” or “Seminars and workshops to train you to be a better leader”.
Sometimes the Headline and Sub-headline can switch roles where the headline can be specific and clear, and the subhead can be more aspirational.
A “Value Stack” usually refers to a block of 3-4 statements that describe the value proposition of your service or product. These should be secondary benefits that your customer will experience if the get the thing they want and have their problems solved. These usually come from the success section of your BrandScript.
Here are some great Value Stack statements:
• Save Money
• Peace of Mind
• Grow your business
• Be confident
HEADLINES, BOLDED TEXT, LISTS, & CALL-OUT BOXES
As much as possible, use every section headline to communicate something from your BrandScript. No wasted copy. Instead of “About Us”, title that section: “We Help You Save Time & Make Money” (Success). Instead of “Our Services” say: “How We Help You Accomplish Your Goals” (Success).
If your main headline doesn’t tackle the main Problem that you solve, make sure you say it in a big font size within the first couple sections of your site.
As much as possible, try to limit big blocks of text. Paragraphs should be 3-4 lines at the most, or visitors will skip right over them. If you do have a lot of text, pick out a few words or phrases to be bolded. If you do it well, someone could only read the bolded text, they would understand the whole paragraph.
On the internet you don’t have to use complete sentences. In fact, there are many times when you just SHOULDN’T. A good bullet point or icon list can communicate more information quickly and is more likely to cause a viewer to stop and read.
• Bullet points arrest “scanning”
• They allow you to use fewer words
• Much more impact
• Get more people to read the content that you’ve spent so much time crafting.
The best signifiers of authority come from others. While you’re building your Storybrand website, make sure to use past clients and third-parties to show your authority.
Display the logos of 5-6 companies that you’ve worked with on your site. The more recognizable the logo the better, but since not everyone gets to work with Coca Cola and Apple, and logo is better than none. You don’t need to explain the type of work you’ve done, but be honest in your representation of who you’ve worked with, and make sure you use logos of companies that are satisfied with the work you’ve done.
The purpose of client logos is to show that other companies have put their trust in you before, so prospective clients can feel confident about trusting you in the future. Client logos communicate a lot without muddying your message with extra copy.
Certification badges are similar. A certification shows that you have been vetted and verified by a third party and engenders trust.
The best testimonials are succinct, to the point, and describe a problem your client had and how you solved it. Bad testimonials are long, focus on your personality (“he was so courteous”), and use phrases like “We’re so happy we chose so-and-so”. No one cares if you’re a nice person, they care if you can solve problems. Extra phrases get in the way of the core message in a testimonial.
If you ask a client to write a testimonial, odds are they will write a lot of nice things about you. The best thing to do is aggressively edit the testimonial while still preserving the heart of what your client said, then send it back to them and explain “Thank you for such a lovely testimonial, I’ve edited it for length, does this capture your experience working with us?”
No matter what sort of business you’re in, you need a three-step plan. This lets your customers know what they need to do next. It’s also a way to alleviate some anxiety that they might have about making a decision too fast. You know that feeling when you should go to the doctor, but you just keep putting it off? That’s called anxiety, and we’re looking to stay far, far away from it.
While there’s some wiggle room on this, here’s the basic idea of what you need. Call, Meet, Do! It can actually be labeled that simply too. Don’t get quote heavy or have too much wording. If you need some explanation, use the space under each numbered item for a BRIEF explanation. Here’s an example:
Schedule a Call: We get to know you, you get to know us. We get to understand your goals and desires for this project and you can decide if we would be a good fit.
Discovery & Planning: A Guide will work with you to define exactly what you need and establish a plan that works for you and accomplishes your goals.
Make it Happen!: Our Guide coaches you through the process, keeping you up to date on progress and getting your feedback along the way.
CALL TO ACTION BUTTONS
A call-to-action (CTA) is exactly what it sounds like: the moment everything changes. You want your potential client to feel like they’re making a heroic choice that will completely change the way their story unfolds. While there are a couple different ways to go about this, you need to ALWAYS keep it simple. Three words simple – maybe four if you need it.
Make it happen – Works.
Call today – Yup.
Give our sales team a ring – NOPE.
Get the idea? We’re looking for a simple phrase that will spur the reader to click. That’s it. Honestly, it can be a little generic – just make sure that it’s easy to understand and short. More than that and it’s just going to get lost in the shuffle. That’s it, that’s how you get people to do things.
Your website is often the first way that your clients and prospects learn about you, so it has to work for you— making a visual impression, loading quickly and helping users find the content they seek — ultimately driving engagement and conversions.
Story Brand WebsiteHome Page & Contact
- 1 HR Consultation
- STORY BRAND Template
- Switch to Divi Theme
- Customize Settings
- Up to 5 Stock Images
- Set Up CTA Buttons
- Stylize to Tell Story
- Email Opt In
Pro WordPress Website5-7 Page Brochure Style
- 1 Hour of Consultation
- Set Up Hosting (3 mo free)
- Free SSL
- Install & Configure WordPress
- Install & Configure Plugins
- Customize Divi Theme (Best)
- Up to 7 Free Stock Images
- Google Analytics (if needed)
- Contact Forms
- One hour of training
Ecommerce SitesStarting at
- 3 Hours of Consultation
- Set Up Hosting w/ SSL
- Install & Configure WordPress
- Install & Configure Woo Commerce
- Customize Theme
- Up to 20 products & 5 Categories
- Google Analytics & SEO
- Contact Forms
- 3 Hours of Training
WordPress ExpertFor Project Work
- Customize Settings
- Problem Solve
- Update Content
- Add Features/Plugins
- Optimize SEO
- Training Using Zoom