A landing page’s goal should be to communicate, as simply and quickly as possible, how you help and provide value. The person reading should feel like a hero on a journey being guided by you to fulfill their mission. This is the detailed version of our earlier overview post here. Feel free to read it as well if you'd like the overview first.

Step 1- If you haven’t thought through your brand messaging thoroughly yet, this will help you condense it all into one page. If you have multiple target user personas, you may want to make copies that are tailored to each. This will help you clarify your value.

https://www.mystorybrand.com/

Step 2- let’s convert that into your landing page details! Below are the list of components in a Storybrand-framework landing page; the core ones and some optional. With this information (and the brand form you filled out earlier with us or the brand guide you may have shared), it helps us to know what we should be designing.

Some goals as we build:

1. Clearly say what the company does
2. Use images that reflect the business & clients
3. Avoid using insider language
4. Avoid too much text- people don’t tend to read, but skim; use images instead, side pages for details that link through, or collapsible text so they can expand what they want to.
5. Don’t waste words
6. Repeat key points
7. Don’t overwhelm with information
8. Avoid talking about yourself if it doesn’t add value to the customer
9. In doing all this, we optimize the site for sales, not just looking pretty.

Section 1- “Above the Fold”

This is the content that a client would first see on loading a page on desktop, possibly on mobile as well. This is the MOST IMPORTANT section of your site. If the clients can’t clearly understand what you do in a few seconds from reading this, they will almost always leave, or “bounce” as the term is used in marketing.

Main Header

The header is that initial “catch phrase” that grabs the viewers attention. Do not try to be witty. Be clear. If you confuse, you lose. For example,”Get a 6-Step Plan to Grow Your Small Business.” That’s both enticing and pretty clear. Sounds like some sort of consultancy or course. The goal here is to say what you do and how it makes their life better. Simple. The shorter, the better.

We’ll now use the sub-header to further clarify this phrase.

Sub-Header

The sub-header can be a bit longer and is used to give further clarity to the main header. A viewer should know exactly what you offer, who you offer it to, and how it can help them, based on these two parts of your page.

A bad example would be: “Proudly Canadian, Fiercely World Class / we are here to make your business the best it can be.”  This is sooo vague. No one has any idea what you do.

A good example would be: “Clarify Your Message So Customers Engage / Without a clear message, customers will ignore you. When you clarify your message using the StoryBrand Framework, orders and revenue increase.”

Yes, that last one was very meta.

Call to Action Button

Many businesses could do much better if they just let their customer buy from them. It’s not that hard to setup a way to take action online. Ideally, you have a call to action button (CTA) not just here, but on most sections of your site, including the header. While you may have a transitional call to action that is a little different, or a way to learn more to answer their questions, most of these should be worded the same.

Ex. “Schedule a Call”, “Sign Up Now”, “Get Free Access”, “Request a Consultation”, “Learn How”, “Start Now”.

3 Key Benefits

This one is optional but highly recommended. It could also be exchanged with the 3 Step Plan below. The goal is to give your customer a high-level overview of how you will benefit or help them, or how easy it is.

Ex. “Save the Environment, Save Money, Save Time.” Except space them out and use an icon for a visual.On one of our landing pages, we use “Reduce Repetition, Save $$$, Build Faster & Better.”Increase Profits, Productivity, and Industry Leadership.

There are many examples, but the goal is to think of what 3 key benefits that you provide do your customers can care about. Clearly touch on these right away.

Section 2- Problem, Product, and Results

In this section, you’ll elaborate on who you help, what problem you solve, how you do so, and what the results are from working with you.

One Liner/Value Proposition

The goal of the one liner is to explain, in 1-3 sentences, a more felt version of “problem + product + results”. It is said in such a way that we want the viewer to feel the problem, and that the product/service offered will be a direct resolution to it for them.

For us, we’ve talked about our fractional CTO services in this way:

Having custom software doesn’t mean having to spend $200,000 on a CTO or engineer. With StayShure, you can have control over your technology and innovation at a fraction of the cost and on flexible payment terms.

Similarly, for Storybrand itself, you can see their more detailed approach:

Marketing should be easy and it should work. Most people don’t know how to explain what they offer. Instead, they ramble and confuse their customers. Learn the StoryBrand Framework and you’ll finally get the sales you’ve been looking for.

Establish “Guide” Authority

If your prospect is the hero, you are the guide. They want to feel like you will help them succeed in their mission. To choose you as their guide, they need to know they can trust you. You need to establish authority to prove you can help them do it.

There are a few primary ways to do this, but here we want to use empathy to show that you understand them and have been there, and then a form of evidence as authority that you can help them through it like you have authors.

Here’s a solid example from an e-bikes company:

This youth shelter has a done a great job of clearly conveying this (and the whole Storybrand framework) too:

3-5 Step Plan- the Process

This is one of my favorites, and I personally find it frustrating when sites lack it. You can place this near the top of your site, and you can even use it twice if you change it up a bit. The goal is to paint a picture to the client of how easy it is to work with them with a few memorable steps. 3 minimum, but max 5, as the human brain can’t instantly recognize more than 4 or 5 items at once.

You can see on our pricing page here that we use this alongside a few graphics. And yes- you can apply this whole framework to different pages across your site and to specific products and services!

In a simpler way, we also use this on one of our pages:

If you check out Storybrand.com you’ll see that they also elaborate on each step, which is also an option, especially if they need more clarity.

Set the Stakes

This last one could be placed a little later on your page or wherever a little spice of “if you don’t work with us, here is how you will feel.”

This could be said very simply. For example, for an e-bike company:

“Life is too short to sit in traffic. Traffic is no fun. Don’t be held back. You were designed for more.”

In this case, you can feel the aspirational tone lift you up at the end. Life is better working with you, right?

Section 3- Authority, Details, & Conversion

In the final section, you’ll lean on appealing to those who scrolled to the bottom because they are still looking for more details and convincing. You’ll lean into establishing authority, answering questions, and giving away value to generate a conversion or transitional conversion.

Explanatory Paragraph

While as a general rule we want to avoid too much text, you can avoid that here. Go all out, but continue to write through the lens of a Storybrand framework so that every word counts and your writing is focused. You can always add a “read more” link for them to get more info still.

There is an example below and you can also read the one on this website. My guess is you’ll be able to figure out which part it is at this point in your learning from this article.

Lead Generator- Transitional CTA

A lead generator is one of the most important but often glanced over parts of your website. This is where you offer free or low-cost value to transition a prospect or lead towards becoming a client. Think of it as a date before marriage- most people like to get their confidence built before committing.

A few examples of this are custom calculators, free e-books, custom excel docs, a free trial, or a newsletter series. The main goal is for them to get value from you to trust you, and then you can then follow up with manual or automated emails. You can also tracks who goes here to target them with retargeting ads. If you see some StayShure ones after this, you now know why.

Widgets of Confidence

Widgets are optional, though using one or two is definitely helpful. They can be dispersed higher up in section 2 as well to breakup the overall flow of the site visually.

Widgets of Confidence are ones that boost your authority and relationship with prospects. Think a logo showcase of your clients, a google reviews embed, or a portfolio showcase.

Widgets of Clarity

Widgets of clarity are ones that help your client to understand more clearly how you can help. Think a pricing/plans table, a FAQ (a small one; if you need more we recommend a separate page for that), a list of examples (ideally visual), or an explainer video.

Widgets of Connection

Widgets of connections can connect your clients to what you are up to elsewhere or to you directly. Think social feeds, chat support, “meet the teams”.

For more examples of a whole host of widgets that you can easily add to your site, check out Elfsight. They have over 90 easy to use widgets you can embed onto your pages.

As a side note- embeds don’t always translate into SEO content. So if you have a bunch of keywords, it may be best to build them directly onto the page, like with an FAQ.

Header & Footer- Do’s and Don’ts

All landing pages should have a header and footer- but what we do with them doesn’t need to follow the “default” that we’ve seen on older sites. A few rules of thumb:

• Your logo should always take users back to the homepage; everyone assumes this. You do not need a “home” button.
• Limit yourself to as few links in the top as possible, and only the most valuable. 3-5 max.
• Have more links to share? That’s what the footer is for- a junk drawer, really.
• Where you can, avoid “contact us” pages. Use a widget/bubble so people can contact you from any page or have a more custom form using Typeforms to automatically filter and screen your clients.
• Make sure you have your social links and your privacy policy and terms and conditions here. Key for connection and legal reasons. If you’re a service company, having your standard terms can be helpful here.

The Final Touches

While we love the Storybrand framework, we’ve also come to love the value-based sales of the 100M Offer by Alex Hormozi. A few quick tips that you can add into how you craft offers and value-based language:

• Increase the value of their dream outcome
• Increase the certainty of achievement
• Reduce the time delay, or perceived speed, to receive results
• Reduce the effort & sacrifice on their end to make it happen
• Create a sense of urgency (promo-offers, temporary opportunities)
• Create a sense of scarcity (limit on how many clients you take, only a few spots left)
• Create guarantees that take away perceived risk

And you’re done!

The key from here is to implement and to change and tweak as your company changes overtime. As a right this, we’re realizing we need to update our messaging to more appropriately align with our present value offering and target clients. So I’m off to follow my own advice. Having read this, it may be worth checking out our landing page again with fresh eyes; try to see if you can identify each section and element of the framework. Good luck!

‍