What You Need in a StoryBrand Website Design

  Website Design & Development | Storybrand
Kerry DeVito
Kerry DeVito

03.24.2020 | 6 min read

Pop quiz: what’s your first step when you take on a website redesign? Hire a developer?

Heck NO (please tell us it’s not).

The most important aspect of overhauling a website design must start with a marketing strategy. Think of it like building a house—there’s no place to put curtains if the foundation doesn’t exist. And to build a strong foundation, there must be a clear, strategic blueprint to follow.

Enter — the StoryBrand Framework.

StoryBrand in a Nutshell

The StoryBrand Framework is a methodology explained in Donald Miller’s best-selling book, Building a StoryBrand. In it, he poses the idea that your marketing message is most effective when it follows the framework of a story. If your message doesn’t possess the critical elements of a good story (character, problem, guide, plan, success and failure), your audience may be missing vital information about why they should do business with you. To sum it up, a clever marketing message means nothing if it isn't clear.

StoryBrand Website Design: So Easy a Caveman Can Get It

First thing’s first: does your website pass the grunt test? In other words, could a caveman understand what you offer? Before we step into the land of UX, design and SEO, you’ll need to nail down what it is you offer and how that will make your customer’s life better. You need clear messaging so that your potential customer knows what they need to do to get what they want.

Why should you care about the grunt test? If you don’t carefully consider it, you’re going to lose customers within the first few seconds of them landing on your website. They will likely abandon your landing page the minute they have to stop and ask, “What does this company even do?”

As human beings, we don’t like being bombarded with information. We may even recoil. (TL;DR exists for a reason, folks.) And once we hit that information overload point, well, we’re outta' there as fast as our mouse can scroll.

The best way to approach the grunt test is to start by developing a clear, to-the-point headline. And remember that clear over clever always wins.

What’s In StoryBranded Websites?

If there is one thing to take away from this section, it’s that web design and content should exist in a very happy marriage. They are not separate from each other, and it’s dangerous to think that they are. With that said, there is one thing you'll want to settle before you get deep into your design: your brand message. StoryBrand organizes this into a “BrandScript." Others might call it your core messaging. Either way, this helps set the tone for the design and layout of your website.

And now, the juicy stuff.

1. A Clean Nav Is a Happy Nav

We’ve all seen the websites with a link to basically every single page and anchor section. And to be fair, these websites are probably worried that the user either won’t be able to find what they’re looking for or not even know what they need. However, this type of solution is information overload, and instead, should be pared down to reflect the three questions we ask during the grunt test.

Don’t be afraid to include as few as two links in your header (plus the CTA button). If those two links are the essential options for a user, then that is all you need.

2. Above the Fold

In other words, the header. This area of your webpage is the first thing your potential customer sees when they land on your page. (It’s been said you have around 8 seconds to get their attention — and keep it.) It is critical to give your users a reason to stay and scroll through the remaining information.

With a StoryBrand website, this is where your carefully crafted headline will go. A tagline that clearly addresses the customer's problem and draws them in is essential.

Using images and (relevant) illustrations in a header is a great way to convey emotion and capture attention. The key is to balance it out with the headline and ensure that it won’t distract from the message.

As text-only heroes gain popularity (a big trend for 2020), consider letting the typography and message do the bulk of the work. Strip things back and experiment with type that has personality, rather than just your plain serifs and sans-serifs.

example of hero image for website

Animated text-based header by nytfoodfestival.com

Somewhere in this section or right after it, you need to convey your value proposition. Sometimes this is done in the headline or tagline, but often it goes right below the hero. This allows you to communicate the unique value that you provide your potential customer. Depending on your product and your audience, this may be the very thing that grabs their attention for good.

3. Laying Out Your Process & Services

As StoryBrand designers, it can be easy to fall into a template-mindset. (Templates are great though, and they serve a very important purpose.) While there are specific aspects that effective StoryBrand websites should have, the look and feel will A) depend on the industry, and B) need to remain uncluttered.

Enter the process and services section, a.k.a how you work with customers. This is an excellent opportunity to get creative with the layout. Yes, a single row with three cards and icons will work just fine and likely look attractive and clean. But after a while, this gets boring. And every website starts to look the same.

For example, a broken grid design can bring an unexpected element of asymmetry. Rather than keeping everything in neatly divided containers, use overlapping images or colored boxes to call out services or parts of the process.

website design broken grid example

Broken Grid by startuplab.no

Again, this will all depend on the industry. A law firm using colorful illustrations or animations might be too distracting and seem unprofessional. Keep it relative.

4. All Hail the Call to Action

A clear call-to-action button (CTA) lets you know exactly what’s going to happen when you click it. And when it comes to the primary CTA, bigger and bolder is better.

Your primary CTA should be front and center, preferably in the header or navbar. Remember that the language of the CTA button is the core of the design. A good rule of thumb is to use contrasting colors while considering the intent, your brand’s colors and the background of the website. This CTA is the one that's going to move your prospects most efficiently through your sales funnel, so make sure it's clear and applicable.

Your transitional CTA should look like just that — secondary, less risky than the primary. Think of the primary and transitional CTAs as a pair. They should go together but also be distinct. Try using different hierarchies like visual weights, solid colors vs. outlines, and colors.

direct vs transitional call to action in storybrand website design

Primary Vs. Secondary CTAs, Dadapixel

5. Share the Things Your Customers Say

If you don't have testimonials on your site, you're missing out on an easy way to show your potential customers that they aren't taking a leap of faith. In fact, other people have used your product and it was life-changing. Your customer's testimonials should definitely appear on your homepage, but don't be afraid to sprinkle them throughout the rest of your website too! They are a great way to add some authority and trust to the statements about your products, services and guarantees.

website services c

The Step-by-Step Process for Creating Your New Website Design

Step 1: Develop a clear brand message

{Our copywriters made me put this in here.} I know, I know. This blog is supposed to be about designing a StoryBrand website, but trust me, it isn’t worth a thing if you haven’t crafted a clear message for the design. Your potential customers might be impressed by how beautiful your website is, but that doesn’t matter if they have no idea what you do.

Step 2: Wireframe your pages

Okay, now that we’ve got that whole “messaging” thing out of the way, it’s time to wireframe! Wireframing might seem like a waste, but trust us, it’s not. A wireframe is a black and white, undesigned layout of your website. Its purpose is to determine how we are going to organize all the essential things that the page needs to accomplish (a.k.a the story it needs to tell) before us designers start getting all creative with shapes and stuff.

Step 3: Design!

And now the fun stuff. First off, there are a ton of website templates out there if you’re looking for something low-cost and feel comfortable with building a simple website yourself. Just Google it. But if you're looking for something custom, several companies build websites for people that are on board with the StoryBrand Framework (us included, wink wink).

Step 4: Develop!

If you are building something custom, the final step is getting that beautiful design developed. This is the stage where everything starts coming together! One thing to note, with all the different devices and screen sizes of our day, this stage can get a bit tricky. You need to make sure that the design works for desktop and mobile. When interviewing a designer, make sure they understand this and that they design your site in such a way that will translate across screen sizes.

Building a StoryBrand Website That Sells

We often say that your website should be your best salesperson. Following the StoryBrand Framework allows it to be just that, but it can be easy to get stuck in the weeds when you're working out the process. That's why many companies hire a StoryBrand Certified Guide or *cough cough* a StoryBrand Certified Agency (another shameless plug, sorry not sorry?).

While website design is just one step in achieving marketing goals, we take that step quuuite seriously — learn more about the how we turn your website into your best salesman. And if you need more inspiration, we've compiled a bunch of StoryBrand website examples for you to peruse.