StoryBrand
Website Examples

How to Design a StoryBrand Website

Quick Links

  • 1

    The Elements of a StoryBranded Site

  • 2

    Header/Hero Section

  • 3

    Value Stack

  • 4

    Section Headlines, Call-out Boxes, & Lists

  • 5

    Authority Signifiers

  • 6

    How to Use Images & Icons Effectively

  • 7

    3-Step Plan

  • 8

    Call to Action Buttons

Who is Designing Your Next Website?

Let's talk about how Banker Creative can help you develop a new website using Storybrand principles that will grow your business .

What makes a "StoryBrand Website"?

Donald Miller's Building A StoryBrand has been a game-changer for how businesses approach their marketing. It's been the catalyst for hundreds of companies to redesign their websites, but it poses the question:

What makes a "StoryBrand Website"?

We're going to dig into some of the important concepts that make a website "StoryBranded" and will also look at some Storybrand website examples that have applied those principles well.

I've been a StoryBrand Guide since April 2017 (the 2nd month they began certifying people), and since then I've built over 140 StoryBrand websites and have seen companies double and triple their leads after launching their new website design. I hope this is a helpful guide as you work on your own website design.

If you'd like to talk about hiring our team to design your Storybrand website, schedule a call so we can learn more about your company and see how we can help.

Screenshot of Mediator Connect's homepage displayed on desktop and mobile screens

Mediator Connect

mediatorconnect.com
Designed by BankerCreative

1. The Elements of 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. There is no RIGHT way to do it, but there are BETTER and WORSE ways.

Before we get into the elements of a StoryBranded site there is some foundational work to be done: developing your BrandScript.

THE BRANDSCRIPT

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 your 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. Network speeds and the ubiquity of WIFI have made it possible for large pages with a lot of photos to load quite quickly.

WIREFRAME

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, use a program like Adobe XD (what we use), 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 that's not true. 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, SUBHEADLINE, 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 possibly awards that you've won.
  • 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. You might even have more than one PLAN on your page.
  • 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.

Wireframe Example:

Who is Designing Your Next Website?

Let's talk about how Banker Creative can help you develop a new website using Storybrand principles that will grow your business .

Screenshot of Hope International School's homepage displayed on desktop and mobile screens. This Storybrand website cost around $12k.

AISB - Hope International School

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 sales.

HEADLINE

Your headline should be aspirational and specific. Either communicating what your customer wants (character section of your BrandScript) or how they want to feel about themselves (transformational identity).

SUB-HEADLINE

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 (see Cottages of Dakota).

Header/Hero Section Examples

Screenshot of G&N Insurance's website homepage displayed on desktop and mobile screens. This StoryBrand website cost around $12k.

G&N Insurance

An image of Atteign Accounting's website displayed on multiple screen sizes by Banker Creative a Minneapolis web design agency

Atteign

CALL-TO-ACTION BUTTON

Always give your customer a clear option to hire or purchase from you. The button should say: Hire Me or Schedule a Consult or Buy Now. Avoid things like: Learn More and Get in Touch. 

Your CTA buttons should be the same throughout the page. Don't ask someone to "Schedule a Consultation" in the header, and then "Speak to a Consultant" in the next section. They should be the same so they are not confusing.

PHOTO OR VIDEO BACKGROUND

Choose a photo that shows your customer experiencing the SUCCESS that comes from doing business with you. The photo should by aspirational. You can use photos of yourself interacting with your clients, but don't use photos of your building or group team photos.

Who is Designing Your Next Website?

Let's talk about how Banker Creative can help you develop a new website using Storybrand principles that will grow your business .

3. Value Stack Section

An example of a website using icons to display a value. Desktop and mobile versions.

Amish Craftsman Furniture

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 (character) and have their problems solved (problem). 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

Value Stack Examples

An example of a website using icons in a value-stack. Desktop and mobile versions.

Roof Razor

An example of a website using icons to communicate the organization's top values. Desktop and mobile versions.

Center for Mulitcultural Mediation

ICONS

Icons are a good way to focus additional attention on your value stack. We know from research on how people read web pages that visitors often skip over blocks of text, but they scan and read headlines, bolded text, bullet points, and text paired with images or graphics. An icon is a signifier to the brain that this is more important and you should pay attention.

Most website platforms and themes have some icons already installed that you can use. Another great place to get icons is https://flaticon.com

4. Headlines, Bolded Text, Call-out Boxes, & Lists

An example of a website using callout sections and bullet points to highlight content. Desktop and mobile versions.

Moffatt Products

It's been proven that people don't READ websites, they SCAN them. So when you're trying to communicate clearly, it's important to use design elements that will stand out so your visitors are more likely to read them.

Use these elements to sprinkle ideas into your website design from the Problem, Empathy, Success, & Failure sections of your BrandScript.

HEADLINES

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.

BOLDED TEXT

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.

LISTS

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.

 

CALL OUT BOXES

Set content apart by using boxes with a border or different color background. These are great for testimonial quotes:

"I wasn't going to read this text, but for some reason, it stood out from the rest of the page and I just had to stop."

-A Casual Browser

Examples

An example of a website using icon lists to communicate with clients. Desktop and mobile versions.

Big Sky Franchise Team

An example of a website using headings and font hierarchies to clearly communicate a message. Desktop and mobile versions.

Schwartz & Associates CPA

5. Authority Signifiers

An example of a website using certifications, membership, and associations to establish authority. Desktop and mobile versions.

Accounting Complete

It's great when the copy on your website shows that you really understand your customer and the problems they have. That's called empathy, and it's half of what you need to prove yourself a trustworthy guide. But the other part of the equation is showing that you are actually ABLE to solve their problems. A guide who understands you, but can't help you is pretty worthless.

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. Here's how:

CLIENT LOGOS

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.

AWARDS & CERTIFICATIONS

If your company has been recognized for good work it's ok put it on your website as an authority signifier, just make sure that it's in the context of how you serve your clients. A badge or a logo of the award is nice to include next to the "About Us" section.

Certification badges are similar. A certification shows that you have been vetted and verified by a third party and engenders trust.

TESTIMONIALS

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?."

Authority Signifier Examples

An example of a website using testimonies to establish authority. Desktop and mobile versions.

Wits Realty

An example of a website using client icons to help establish authority. Desktop and mobile versions.

Joe Schmit

6. How to use images and icons effectively

An example of a website using images and icons to communicate with clients. Desktop and mobile versions.

Mile One

Images and icons aren’t going to make your website -- but they could break them. Focus on simple, beautiful images that tell a story. Image-wise: we want to see happy people, folks who were helped after utilizing your expertise. Icon-wise: Just don’t get too weird. You might think you’re being clever and original, but remember -- clear is better than clever. Say it again so the people in the back can hear it. Clear is better than clever!

Images are amazing tools, but only when you use them correctly--in this can be a tough balance to find. When used in the right way, they can be powerful signifiers that speak immediately to your audience. Our color choices, images, and icons all should flow from our BrandScript. Our design process typically starts with developing a style guide for our customers. That let’s us understand the primary, secondary, and tertiary colors that best describe their brand. Once we have that, we can apply it to the basics we’ve built from the wireframe.

Icon & Image Examples

An example of a website using images and icons to communicate with clients. Desktop and mobile versions.

Timber Bay

An example of a website using images, headings, and buttons to communicate with clients. Desktop and mobile versions.

Redpost Real Estate

7. Three-Step Plan

An example of a website using a three step process to communicate with clients. Desktop and mobile versions.

Moving Performance

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 from our homepage.

  1. 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.
  1. Discovery & Planning: A strategist will work with you to define exactly what you need and establish a project scope that works for you and accomplishes your goals.
  1. Make it Happen!: Our account manager guides you through the StoryBrand process through to completion, keeping you up to date on progress and getting you feedback along the way.

Three-Step Plan Examples

An example of a website using a three step process to communicate with clients. Desktop and mobile versions.

Fusion Designed

An example of a website using a three step plan to clarify their message to their clients. Desktop and mobile versions.

Atteign

8. Call to Action Buttons

An example of a website using an icon list to communicate with clients. Desktop and mobile versions.

Made to Impact

A call-to-action (CTA) is exactly what it sounds like: the moment everything changes. You want your potential customers 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. Like, really simple. Three words simple -- maybe four if you need it.

Make it happen Works.

Call today Yup.

Give our sales team a ring NOPE.

Call to Action Button Examples

An example of a website using bullet point lists to communicate with clients. Desktop and mobile versions.

Mediator Connect

An example of a website using headers, columns, and buttons to communicate with clients. Desktop and mobile versions.

J Williamson CPA

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. OK, are you ready for your CTA? It's a choose your own adventure.

Go make websites.

or...

Download

Price Sheet & Service Offerings

We’re not the cheapest agency out there (but we’re also not the most expensive). We are always transparent about our pricing, so you’ll never get billed for something you weren’t expecting.

Please enter your name.
Please enter a valid email address.
Something went wrong. Please check your entries and try again.
price-sheet-2021

Examples

Screenshot of Eliza Wheeler's website homepage.

Wheeler Studio

After screenshot of The Amish Craftsman Furniture's website.

Amish Craftsman

Monson Wealth Web Design

Monson Wealth Management

After screenshot of Mediation Connect's website.

Mediator Connect

Screen Shot 2022-06-03 at 4.56.12 PM

Lucid Day

Bluebotics web design

Bluebotics

screencapture-stabler-wealth-featured

Stabler Wealth Management

Screen Shot 2022-06-02 at 11.01.26 AM

Guide Studio

After screenshot of Fusion Designed website.

Fusion Designed Website

After screenshot of Wits Realty's website.

Wits Realty and Property Management

screencapture-valentines-cpa-featured

Valentine & Associates CPAs

screencapture-payroll-complete-featured

Payroll Complete

screencapture-rise-org-2022-06-06-16_43_46 (1)

Rise.org

Quick Links

  • 1

    The Elements of a StoryBranded Site

  • 2

    Header/Hero Section

  • 3

    Value Stack

  • 4

    Section Headlines, Call-out Boxes, & Lists

  • 5

    Authority Signifiers

  • 6

    How to Use Images & Icons Effectively

  • 7

    3-Step Plan

  • 8

    Call to Action Buttons

Who is Designing Your Next Website?

Let's talk about how Banker Creative can help you develop a new website using Storybrand principles that will grow your business .