StoryBrand Website Examples

Posted on
March 26, 2019

StoryBrand Website Examples

The Nonprofit and the Production Company

What do StoryBrand websites look like?

and even more importantly...

Do StoryBrand websites really work?

Chances are you are here because you are doing a bit of research.  

You’ve probably heard about StoryBrand and the extraordinary claims--many businesses are seeing double, triple, and even quadruple revenue growth! I’d probably run from someone making too-good-to-be-true claims like that.

But before you run off, take a second to look at what StoryBrand is trying to sell: Clarity

The minimum  outcome of a business or organization that applies the StoryBrand principles to their website includes:

  1. Their website will be easy to understand.
  2. Their brand message will be easy to understand.
  3. Their website will be simple and easy for their customers to interact with.
  4. Their website will be way different from their competitors. (Most websites are full of noise!) 😫

Today we are going to look at two organizations: Purposeful Pallets and Daylight Blue.

Purposeful Pallets is a super rad organization that exists to help every person make a difference in the lives of foster kids. Most people are overwhelmed by the idea of becoming foster parents themselves, so Purposeful Pallets makes it easy for everyone to be a part of the solution. They can purchase pallet art and throw art parties, all to raise money and awareness to the foster care crisis. All proceeds raised go to A Door of Hope.  

Daylight Blue is a production company staffed with an awesome group of creatives, putting an emphasis on pairing beautiful imagery with crafted storytelling. They truly bring projects to life for the clients they serve. Their StoryBrand message and website were built by Echo Clarity.

So let’s look at their websites and see StoryBrand principles come to life!  

“Above the fold”

“Above the fold” is what is seen when a page is loaded before someone starts to scroll. “Above the fold” is the most important part of a website because this is where a browser decides to stay, start clicking around on your site, or start scrolling -- or they decide to leave. You better capture their attention fast! Studies show you have 5 - 8 seconds to grab their attention.

Both these websites do great with “Above the fold”.  

The Navigation Bar has few options.  

What you will end up seeing with good StoryBranded websites is there are very few options in the navigation bar. Many businesses fill this up with an insane amount of clickable links. This goes against the main thing StoryBrand is about: Clarity.

When a navigation bar is full of options, the customer gets super confused about what they are supposed to do. To do business with these guys, am I supposed to click on “learn more,” “contact,” “about,” “services,” “blog,” “testimonials,” “biography,” “stories,” or “fun cat videos”?

Go to almost any company website and you will see the navigation bar is cluttered with options. A good StoryBrand website will only have the most important options in the navigation bar and no more. If a link is not super important, place it in the footer of your website.  

When the navigation bar is super cluttered,  the user ends up getting confused about how simple it should be to do business with you! And that should really be the goal of your website. Make your website easier to navigate and maneuver than your competition and you might start seeing those 2x and 3x returns we talked about earlier.

When they are confused there is a high chance they won’t click on the right option (the one that makes you more money or gets them to your real message).

I’d encourage you to look critically at every item in your navigation bar and evaluate how important that link is to move your customer to action. If they can find that info easily somewhere else, get rid of it!

Purposeful Pallets and Daylight Blue do a wonderful job with their nav bars.

The website headers and sub-headers communicate simply and clearly

I love the headers and sub-headers for both of these websites! A good header and sub-header should quickly communicate:

  1. What problems the organization solves - If you can’t identify the problem your customer is facing it’s going to be hard to convince them to buy from you or connect with you.


  1. What the organization does to solve the problem - If you can’t communicate quickly how you solve the customer’s problem, they will disengage because they won’t be able to see how you can help them.  

I don’t have to spend too much time figuring out that Purposeful Pallets helps solve the problem of kids in foster care needing good homes through pallet art.

And Daylight Blue solves the problem of companies needing better exposure through compelling videos and photography.  

These headers are super clear and help a potential customer get the message quickly. In an information-saturated age where people have the attention span of a gnat, you are losing customers if your header is confusing. In fact, it’s really amazing you’ve read this far! Congrats!

Many headers on websites shoot to be clever and end up sacrificing clear. It’s awesome to have both clever and clear, but if you have to pick one, go for clear!

Next, what these StoryBranded websites do great at...

The call to action is clear.

What you will notice about a good StoryBrand website is a clear call to action button, such as: “Donate” for Purposeful Pallets and “Schedule a Meeting” for Daylight Blue. Visually, the primary call to action button on your website should be a color in your brand color that clearly stands out. Make this button big and bright and obvious.

A clear call to action also needs to have a strong action verb. “Schedule” and “Donate” tell the customer the exact action that is expected of them.

You will notice that the second button on both of these websites doesn’t require as much from the customer. “Learn More” and “View our work” are super fine if they take the customer deeper into the value you offer the customer.

However, many websites will use “View our work” or “Learn More” as the primary call to action along with the ever popular “Get Started” and “Contact.” None of these are bad buttons to have on your website, but each one has an element of uncertainty. The customer doesn’t know what’s behind the click.

A good primary call to action should communicate clearly what’s happening. When you click “schedule” you know you will be pulling out your calendar. When you click “donate” you know you will be pulling out your wallet.

But when I click “Learn More” I’m not totally sure what I’m going to learn. Or with “View our work” I have no idea what I’m about to see. “Get started” can be super scary! What am I starting? And with “Contact” I have no idea what will happen to that email I send. All of these have an element of uncertainty.

Good StoryBranded websites will have one clear call to action all over their website letting the customer know, “There is one successful outcome while you are on this website. You will not be confused one bit what you should be doing to begin business with us!”

It’s crazy how many websites I’ve looked at require me to click 3 or 4 pages deep before I find some sort of contact button halfway down the page. These companies often seem super great and I’m sure have some stellar people working for them. I just wish they wouldn’t make it so difficult to work with them!        

As you can see, a lot happens “above the fold.” This is where 90% of the hard work happens when trying to create high converting websites.

Three resources to help with your StoryBrand website:

  1. Take a look at a before and after example of how StoryBrand changed this career consulting company's website StoryBrand Website Example (Before & After).
  1. Check out this free StoryBrand website template on The 10 Sections Every Great StoryBrand Website Needs.
  1. If you’d like a to see if your website is doing well above and below the fold, I want to offer you a free 15 minutes website review. I’ll walk through your header and give you actionable steps to improve your website immediately. If you are interested, Schedule a Website Review!

Before you leave... do StoryBrand websites really work?

After Purposeful Pallets launched their website, they said this: “Since we have deployed the website I have had so many people reaching out lately asking to host events and wanting more information on buying pallet art. The StoryBrand principles just work at communicating your message to help grow something you are passionate about!”

It sure seems to be helping these guys! I believe it can help you too!

Don’t forget to schedule your free website review here: Schedule a Website Review

Posted on
March 26, 2019