Having a well-optimized landing page can make or break a business, especially a business that relies heavily on customers self-serving themselves a digital product.

When it comes to planning, designing, and building a landing page, there is a well-established playbook that we will go through in this guide, that will help you understand the thinking behind how we design website pages.

The key point that we would like to get across is that building a high-conversion website is a combination of great value propositions, a key goal, a clear target market, clear design, and great copywriting. All these elements need to work together to create a compelling reason for our website visitors to take the actions we want the to take.

If you're an existing client of ours, this will provide you with the framework and context required to give great feedback to our work, and if you're not our client, you can use this guide as a launchpad to optimize your own landing pages.

Prerequisites.

A Clear Target Audience.

Your website (and business) cannot target absolutely everyone. The more you niche down, the easier it will be to speak directly to your target market. You need to have a clear understanding of who your target audience will be, and constantly refer back to how they think as you are doing all your optimization work.

Value Propositions.

Value propositions are, quite literally, the proposed value that you will provide to the target audience. The reason why you need to have these in place is because they will inform the precise content of all the various pages of your website, especially key landing pages such as your home page.

Goals.

The most important point, before ever starting to optimize, is to have a clear goal in mind. This is because, without a goal for your landing page, you cannot possibly optimize.

Here are some examples of good goals:

  • Sign up for our 14-day free trial.
  • Contact our sales team.
  • Read x articles.
  • Sign Up to the Newsletter.

The Anatomy of a Landing Page.

All great landing pages have a variation on the following layout:

Let's dig a little deeper.

  • Navbar. This is the main navigation element of your website, and will often have a main CTA (Call to Action) alongside the various menu items.
  • Hero. This is where your initial website message lives, and normally includes a header, subheader, image, and another CTA (Call to Action).
  • Social Proof. Some time of proof that shows why you should be trusted as a product or service.
  • CTA. Another ask to your potential customers to have them achieve the goal you have set out for this landing page.
  • Features. This is where you showcase your features as benefits that solve problems for your customer.
  • CTA. Again, same as above.
  • Footer. Where you can place a lot more navigation items so you don't clutter your main Navbar

Our recommendation is not to deviate from this tried-and-proven model, unless you have a very good reason for doing so and you've tested things out extensively.

As an example, the Mäd home page completely breaks all the rules, and yet it works for us on many levels.

You don't see many websites like this.

Our key goal online is to showcase our expertise and brand. The way that potential clients of ours can understand our expertise is by engaging with our website and reading our content, including case studies, service offerings, and insights like the one that you are reading right now.

Our home is extremely minimalist, but it invites the visitor to do one thing: click on any of the navigational items to discover other parts of the website.

We also like the fact that our home page is very different to all other websites, and this again calls back to brand and the fact that we are unique. However, this is our fifth version of our website in five years, so we've had time to understand what works and what doesn't for our specific use case.

The 3 Second Test.

The first time that someone visits your website is a key moment. They will spend approximately 3 seconds or less to decide if they want to invest any more time on your website, or if they will hit the back button and go back to doing whatever else they were doing before.

This means that the initial content that they see needs to be highly optimized to ensure that they will scroll down and learn more.

The hero section is what users will see first, and this should contain:

  • Header. The what and why of your offering. If the visitor only reads the heading, they should know what you do, and why they should care about it.
  • Sub-header. This is where you explain the "how" of what you do.
  • Image. Showcase your product or service in the best possible light.
  • CTA. Ask the visitor to take an action.

Bloo.io Example.

Let us give you an example from our very own project management software-as-a-service tool Bloo:

This Hero section has everything required. 

The header text does a lot in one sentence:

  • What is Bloo? Simple Online Project Management Software.
  • What's special about it? It's simple, and it's affordable.
  • What problem does it solve? Most project management software are not actually used a lot by the teams that are supposed to use it, but Bloo is.

Then, the subheader text goes on further to show how this is the case:

  • It really is affordable, it's only $50/month for unlimited everything.
  • It has been designed specifically for small business owners (our target audience) that don't want complexity, they just need to get things done fast.

The Start Now button is extremely straightforward, and we have social proof in the form of a 5/5 star rating from a well-known software review website.

Finally, we show a partially cut out screenshot of the actual software, but if the website visitor wants to see the entire thing, they are going to have to engage with the website and actually scroll down to see the full image.

Mercury Example.

Mercury is a modern online bank based out of the USA. Coincidently, its the bank of choice for Mäd in our backend technology stack. You can read more about our BackOffice digital transformation here:

How We Automated 95% of our BackOffice.
Any time that anyone at Mäd spends on activities that are not related to either client projects or furthering business objectives, is a waste of time.

Their landing page hero looks like this:

You can instantly tell the target audience of this page. 

You can immediately notice a similar pattern here, and you can spot that the navigation menu, very much like our previous example of Bloo, is kept very minimalist. Only 3 links (with drop downs) and then a login button and a CTA to open an account.

This is not a mistake or a coincidence. The less clutter on your navigation bar, the more your CTA stands out and the more often it will be clicked on.

The subheader also speaks directly to founders of tech startups, literally using the words "tech companies" followed by the word "scale", which is what every startup is trying to do. This word "scale" has a lot of great connotations in the startup world, and ensures that Mercury is perceived in the right manner.

Finally, we get to the product screenshot, which instantly gives you an idea that Mercury is unlike most banks: the interface itself is beautiful and minimalist, and you almost cannot wait to try the product already.

The product mockup is also quite clever because it shows precisely the type of services such as Gusto, AWS, Stripe, and Square that technology startups would likely be using, and so it makes it feel that much more real and relatable.

What's incredible, is that all of this is just to try and get past the three second test, and ensure that visitors do not bounce away immediately once they land on the website.

Building Trust.

Now that we have intrigued the visitor, we have bought ourselves some time, and the next objective that we need handle is with regards to trust:

Why should visitors trust us?

The way we handle this is by showing what's called social proof. Typically, this means showcasing your existing client base, publications where you organization has been featured, or key statistics such as the number of customers or users.

See below two examples showcasing different methods:

  • At Mäd, we have a dedicated clients page with our "wall" of logos that showcases the dozens of international brands that we have worked for. This instantly builds credibility.
  • Clickup, another project management software startup, they showcase the total number of customers (200,000+!) and show a few famous brands, plus they highlight the fact that they have 10,000+ reviews on various third-party sites.
  • Dropbox follows as a similar approach, and then they also thrown in a slider of quotes from customers, and you can click to read case studies.
Our client list that showcases social proof. 

Now that we have shown the visitor that they can trust our product or service, we can hit them with a Call To Action to try and convert them into one of our desired goals.  

However, it is also likely that by this stage they are highly engaged and want to read more about the types of problems that you solve.

Validate & Agitate The Problem.

If you can position yourself as understanding the problem of your target audience even better than they do, your proposed solution will automatically appear in a positive light. You've now become the expert.

One way to clearly showcase that you are an expert is define, in the clearest possible manner, the problem at hand. Describe it in a nutshell, and showcase why it's a pressing problem. Show the downstream effects of the problem.

For instance, for a project management application, one key problem that business owners face is getting their teams to actually use the software in the first place. While this is problematic, the real problem is that the business owner will not have a clear picture and status of key project initiatives, things will slip through the cracks, and work will be late and of poor quality, which costs money and creates headaches.

Once that the problem is clearly serious and urgent, you then come in with your offering.

Features as Benefits.

Every business should have unique value propositions. These are "features" that make the business unique in the eye of the customers. You need to find yours, and then present each feature as a benefit to your potential customer.

So for instance, we can analyze some of Mäd's value propositions to our target audience, and see how we take some of our "features" and turn them around and showcase them as benefits.

  • The fact that we work across a dozen+ industries is a unique value proposition, few professional service firms are quite as diverse this.  The benefit to our clients is that they gain a unique and diverse perspective on their problems.
  • We invest heavily in education for our team. Now, highly educated team members is not actually an end benefit to our clients. The benefit is the fact that we can effectively use the latest strategies and best-practices to ensure their success.

Let's take a few examples from Bloo to further cement this idea of flipping your "features" into benefits. In Bloo's case, it quite literally has features that can presented as a benefit:

So the above feature is that the software is easy to use. The perceived benefit is that there is no training required for end customers. This hits at one of the key pain points in the project management space.

A second example is that Bloo has various different applications for different platforms. Instead of just saying that we have applications, we turn this into the benefit of being able to work anywhere.

At the end of this section explaining why you are well positioned to solve the problem with all the benefits you offer, you will most likely want to have a call to action as this will convert well.

Testimonials & Case Studies.

This an optional component of a great landing page. Finish with testimonials and, where applicable, case studies. This gives anyone who wants to dig deeper into how you help you customers the chance to do so, and it serves as a final reassurance point before website visitors are ready to commit.

Where possible, use real photos of your customers when having testimonials, as this makes it feel a lot more real and engaging.

With regards to social proof, there are quite a few overall tactics that you can look at:

  • Client Showcase. Logos of well-known companies/brands that use your services.
  • Statistics. Key (and impressive!) statistics about your business (i.e. 250,000+ customers to date!).
  • Testimonials. The best approach here is to email your clients with a ready-made quote that they can approve. This is a win-win because you get exactly the messaging you want on your website and they do not have to make the effort to write anything. In our experience, almost everyone will approve these right away or with minor tweaks.
  • Reviews. If it makes sense in your business and industry, report full or partial reviews from third-party sites into your landing page.
  • Case Studies. In-depth case studies can be extremely convincing, because they allow visitors to understand your process. This works well for B2B companies compared to B2C companies. If you can have videos, that's even better.
  • Certifications & Awards. If you are in an industry where certifications and awards matter, then getting these and show-casing them on your landing page can also work extremely well.
  • Team/Office Showcase. If you can show a large and dynamic team and office, that will often work as a proxy of social proof -  because how would you be able to have this team if you weren't any good?

Conclusion.

Following these rules as a foundation, high-conversion landing pages can be built that will reliably convert website visitors to take the next step in your marketing and sales funnel.

That said, you also need to understand where your situation is unique, and continuously test out landing page variations to gain better and better results. As mentioned previously, at Mäd our current website home page breaks all the rules, but this has been done as conscious choice, not due to a lack of thinking.

If you have any questions or queries, we encourage you to reach out to our team.




Request a Proposal.

If you would like to #workwithmad then send us an email at hi@mad.co and let's Make It Happen.™