How do I design websites

What content should be on your homepage (start page)?

Why is the content of your homepage so important? Because you only have 4 seconds until a visitor decides whether to stay or continue surfing again. Visitors to your homepage do not care about your company, they only care about themselves.

In 2014, the marketing expert Mark Schäfer sparked the discussion about the content shock. He was quite right: if more and more companies publish good content on the Internet, the content explodes in such a way that users can no longer perceive it. In fact, between 2014 and 2020, the number of websites has doubled to 1.8 billion.

So if you want your website to be noticed today, you have to offer interesting content that captivates users in such a way that they stay on your website for as long as possible. We learned the best way to do this at StoryBrand.

The StoryBrand method

StoryBrand's Don Miller discovered that Hollywood is the best guide to captivating visitors online. All good Hollywood movies follow this script:

  1. There is a character
  2. he has a problem
  3. he meets a guide,
  4. he has a plan
  5. the guide asks to follow the plan
  6. and thus prevents damage
  7. and leads the character to a happy life

For the design of the start page, Don Miller wrote a guide with this script, which we and many other agencies now use. We have therefore built our new start page according to these instructions. Now stay tuned and learn from it.

1. The header

The header must answer these 3 questions within 4 seconds:

  1. What are they doing?
  2. Is this something for me?
  3. Where can i get this?

If you don't answer these three questions clearly, then the visitor is already gone. Overall, clarity is the most important thing in this context. Don Miller: "Do not try to be smart, be clear. Clear always wins." He is right!

This is what our header currently looks like:

  1. What are they doing? They do HubSpot. Apparently good, because they were the first to do so in Austria.
  2. Is this something for me? Actually yes, because everyone is talking about HubSpot and we finally need a digital marketing and sales process that works.
  3. Where can i get this? Two calls to action. One in black just below the subheadline and one in blue in the menu.

By the way: We built our website with the HubSpot CMS. We can test every side A / B. So there is also a B variant of our homepage where we test a different headline.

2. The stakes

In this section we explain the problem. What are we talking about? There is no story without a problem. The problem opens the story loop. Any narrative without a problem is bland or, in the worst case, propaganda. So we say what the problem is as high up as possible on our homepage.

We have left a lot of white space in this section in order to communicate the problem as clearly as possible. We show what potential customers are losing and we sharpen the problem.

3. The plan

We are not the hero in our story, but the guide. Corporations are never the hero. Sorry! Your client is the hero and you are always the guide.

These are always the roles: your client is Luke Skywalker and you are Obi Wan Kenobi.

A guide has a plan, this is our plan:

In this plan we show our "heroes" how we can help. Our plan has a title: Get HubSpot up and running with us in 3 steps.

Always use 3 steps, a maximum of 4 steps. People can hardly remember more than 3 steps.

And then make a clear request to accept this plan. The guide asks the hero to follow him. Therefore, there is also a call to action here: Select an appointment.

4. The guide

Now is the time for us to introduce ourselves. Who are these takeoff people and what makes them tick? Nobody follows a guide if they don't know him. The best way to introduce yourself on the internet is with a team video. That's how we solved it:

Shouldn't we have introduced ourselves better before the plan? It's like the chicken and egg problem. We know that potential customers don't actually care about us. Most of all, you care about yourself and want to solve a problem. On the other hand, no one will follow a prompt without trust.

We decided to offer the plan first and then to introduce ourselves.

5. What others say

Trust creates even more when others say something about us. Therefore, 2 sections now follow where we let others have their say. We present case studies and then we bring testimonials. It looks like this:

Case studies and testimonials are ideal sections to show our heroes that we have experience and that other heroes value us.

6. Lead Generator

We want as many visitors to the homepage as possible to contact us immediately. Of course, most of them don't. Who would accept a wedding proposal after the first date? We therefore have to offer our visitors more dates. We do this with so-called lead generation offers.

We are saying: There is more information here. First, do your research and then let's get in touch. We have 3 such offers on our homepage.

By the way: We have many more such offers. At the end of each blog post we invite you to find out more about the respective topic.

7. The footer

The footer is the ideal place to accommodate everything that otherwise needs a place on the home page. In practice, it is certainly the case that it is not that easy to build such a tidy home page. There are still things that are super important and need to be on the start page. I'm sure you know that.

No problem: Everything that does not contribute to clarity goes into the footer. As Don Miller says: Clarity always wins.

With us, even the footer is very clear, because Rebecca doesn't allow our designer anything that would interfere with a simple, clear design.

Conclusion: content that you should have on your homepage

Isn't that an incredibly simple and at the same time illuminating guide to designing the homepage of a website?

Let's go over the story in our head: There are people who have the problem of getting HubSpot up and running.

You encounter takeoffs who have a plan and urge you to follow a plan. They're pretty personable too, as the video shows. There are also other customers who have had positive experiences with takeoff.

The visitor does not have to contact us immediately, but is offered further information to find out more. But then he wants to talk to this takeoff to find out how they can help me.