How to create a SaaS landing page that converts
Build a SaaS landing page that delights visitors, converts prospects, and gains customers
Last Updated on March 11, 2022
When it comes to creating a landing page that converts, there’s always been a lot of uncertainty over what the ideal outcome would look like.
While building Cruip, I’ve encountered many questions from founders about whether they are getting different aspects of their landing page right. Questions like:
- Is the foundation of my landing page good enough?
- Is the key information in the right order?
- Is the product message clear?
Let’s be frank: There are countless compelling articles about how to create a conversion-driven landing page, but from our experience, none of them is distinct from SaaS products and most importantly, they don’t outline the fundamentals of how to structure your landing page for maximum conversion. Topics like:
- What’s the end goal of your landing page
- What kind of information you should include
- How to present the key messages in the right order
So in this guide, we’re going to focus on the anatomy of a perfect landing page, and how to structure your contents for maximum conversions.
Are you ready? So, let’s get started :)
Defining your goal
The first critical step to creating a high-converting landing page starts by having a deep understanding of your product/business end goal.
For a SaaS company, for example, a typical end goal is to influence visitors to sign up for a free trial or to grow an email list before launching a new product.
The end goal very depends on your kind of product and business model, so it’s very important to get it right before you start developing your landing page.
Here are a few examples of landing page goals:
- Convince a prospect to sign up for a free trial
- Collect pre-orders to validate a business idea
- Grow an email list before launching a new product
Are you building a landing page? Use one of these beautiful templates to help you get started👇
When you start developing your landing page with your end goal in mind, you can work backwards to determine what information is essential to achieving that goal, and what to leave behind as secondary information.
When everything is important, nothing is important
Remember: Including more information than what’s necessary will dilute the power of your message, and when that happens, your landing page quickly loses focus. And your visitor’s bounce.
Did you know? It’s estimated that up to 50 per cent of prospects will bounce your landing page in the first eight seconds, so your critical mission is to capture their attention as quickly as possible, and to deliver your key messages straight away.
Crafting the basic structure
For this guide, we were unable to cover multiple SaaS landing page goals, so in order to generate a specific development route, I’ve created an imaginary product (a social media management tool) and the landing page foundation based on its specific goal. In this case:
Convince prospects to sign up for a free trial
If your product doesn’t fall under this particular case scenario, don’t worry, you can always apply these practices.
The first important step to define the landing structure of our social media management tool begins by establishing what contents we’re going to include and in what order. Let’s begin with the contents first:
- Header
- Hero
- Social proofs
- Product features (and benefits)
- Customer testimonials
- Bottom call to action
- Footer
Remember: Our main goal is to convince prospects to sign up for a free trial
Later in this article, will talk about each content separately, but before that, let’s set the order of our landing page: What we’re going to include first, and what later, and most importantly, what’s the logic behind the content hierarchy?
There are countless powerful frameworks to organize your landing page content hierarchy, but for this specific scenario, we’re going to stick with a straightforward structure that we’ve tested and utilized several times. It includes three main sections:
1) Above the fold (hero and header) — It’s estimated that 80% of all visitors abandon a landing page before moving to the body section, so getting this section right is crucial to capture your prospect’s attention and motivate them to keep reading.
2) The body (social proofs and product features/benefits) — This is probably the longest section of your landing page. It’s where you will explain what your product does (in detail), why it’s perfect for your audience, and how it makes your customers’ lives better.
3) Final call to action (customer testimonials and bottom call to action) — The moment of truth. This is where you will ask your visitors to do your desired action, and where you’ll prove why it’s secure to believe you via customer testimonials.
As you can see, we’ve deliberately left the footer aside from the three main sections. The reason is that we’ll use this part for all the secondary information so we can’t consider it as an indispensable element to reach our goal.
Here is an example of all three-page sections working together:
Feel free to download the landing page mockup here (Sketch file).
A huge inspiration for this approach comes from the beautiful book Websites that Convert by Claire Suellentrop (that I strongly recommend).
Content details
From that point on, you should have a deep understanding of the importance of your landing page goal, and how to organize your content for maximum conversions.
Now it’s time to explore each content individually, starting from the header.
Header
It includes a product logo, navigation links, and call to actions
Navigation links (best practices):
Traditional navigation requires the presence of additional inner pages and isn’t always mandatory (especially with stand-alone landing pages).
I would suggest having the main website links on the header (e.g: pricing, product features etc..) and leaving all the secondary information for the footer (e.g: social icons, newsletter etc..).
Call to actions (best practices):
Header call to action should match the main landing CTA (the ones on the hero and above the footer), with the exception of the sign-in button (if required).
Hero
It includes a headline, sub-headline, imagery, and call to actions
Value proposition:
Your value proposition (the value you bring to your customers) should tell potential prospects why they should choose you over everyone else.
The be effective a value proposition must answer these three important visitor questions:
- Does your product or service solve my own problems?
- What benefits can I expect?
- Why should I buy from you over your competitors? (unique differentiation)
You have to present your value proposition as the first thing they see on your landing page and it has to be presented between your headline and sub-headline.
Headline (best practices):
For a highly effective headline, you should provide a clear description of the purpose of your product, and what problem are you actually solving.
Be short and descriptive and avoid useless slogans at all costs. You’re not Nike, at least, not yet.
If your prospect doesn’t understand what your product does from the headline, you probably won’t get a second chance.
Sub-headline (best practices):
If your headline explains what you do, use your sub-headline to describe how your product does what says it does.
Specifically, your sub-headline should provide a specific explanation of what you do/offer, for whom and why is it useful.
Pro tip — Keep it within 2 lines of text, and avoid overwhelming your visitors with too many details before moving to the product features part.
Here is an example of a powerful value proposition in action:
Product: https://www.mailpoet.com/
Target: WordPress-based websites
Problem: Email bounces and delivery rate
Benefit: By improving the delivery rate you can win more loyal subscribers
Imagery (best practices):
Your hero imagery must match (or reinforce) the value proposition of your product (headline plus sub-headline) and has to deliver an extra level of clarity if your copy doesn’t make the job.
There is no secret souse for perfect imagery but as a designer, I personally prefer high-fidelity product screenshots instead of generic illustrations that don’t add any value in terms of clarity and product purpose.
Effective imagery should provide an immediate understanding of what you’re doing, and show off your value proposition in a visual and compelling way.
Here are 3 examples of powerful imagery:
Call to actions (best practices):
A CTA needs to reflect a benefit; an action that your audience wants to complete.
The more descriptive you are about the action you want your visitor to take, the better your chances to activate a prospect into a potential customer.
Make it stands out and ask yourself: What will they get by clicking that button?
Social proofs
It includes logos of press coverage you’ve collected around the web
Social proofs (best practices):
Especially in the early stages of your company, you probably won’t have a long list of press coverages from big tech publications like TechCrunch, Wired, The Next Web etc.
That’s not a problem.
If you’re just starting out, you have to include social proofs to demonstrate that someone is talking about the solution you’re providing, and your product has already been recognized.
If you have close to zero coverages, you can use social proofs from portals where you’re product has been featured (e.g: ProductHunt, Betalist etc..) or from blogs, social media or lists where you’ve been (positively) mentioned (e.g: Reddit, HackerNews etc..).
A final note about social proofs: If you run a fully bootstrapped business, you will have a hard time getting any form of traditional recognition at the beginning. In this case, just do the work and don’t worry.
Product features
It includes app screenshots, videos, imagery etc.
Product features (best practices):
One of the biggest mistakes I see founders making with their product features is highlighting too many functionalities and ending up with something that is barely impossible to digest.
Just as a reminder: Including more information than what’s necessary will dilute the strength of your message
As a rule of thumb, a product features section should contain between 3 and 6 features.
If you’ve more than 6 features, I would suggest highlighting them with different hierarchies. For example:
4 zig-zag main features, plus 3 secondary bullet points.
Pro tip — If you’re having a hard time choosing which product feature to highlight first, study your current customers and ask what functionality they care about most and why. Don’t forget, they were all prospects once.
Product benefits
It includes app screenshots, videos, imagery etc.
Product benefits (best practices):
We’ve intentionally divided product features from benefits to discuss them separately but they always match each other on a landing page. Specifically:
[FEATURE] offers [ADVANTAGE] that [CREATES BENEFIT]
So we first explain the advantage of using a particular feature and then we demonstrate why that functionality can make them happier, more productive etc.. (the benefit).
Here is an example of features versus benefits (we'll use our social media management tool as a reference):
[FEATURE]: Powerful analytics and reporting for social engagement
[BENEFIT]: We put actionable data at your fingertips with easy-to-read reports on a variety of key metrics, so you can improve your engagement and celebrate your success.
Thank you Buffer for the inspiration.
Customer testimonials
It shows off how your current customers have benefited from your product or service
Customer testimonials (best practices):
When a potential prospect is still sceptical to trust you right away, there is no better way of showing off how your customer testimonials establish trust and encourage your visitors to take the final action.
To be truly effective a customer testimonial needs to resonate with your targeted audience, and convince your visitors that your product is trustworthy, and used by people just like them.
Basically, it has to contain that specific answer:
- What’s the biggest benefit you’ve seen as a result of using our product?
Never make up fake reviews and always use real client testimonials. Customer testimonials are used to build trust and establish credibility and publishing fake reviews will destroy your credibility and eliminate trust.
Pro tip — Include a name and picture of the customer who provided it. This information will serve to legitimize the authenticity and credibility of your customers.
Bottom CTA
It includes 1+ calls to action and a short paragraph
Bottom CTA (best practices):
Generally, this is where all the magic happens, and where your prospect is eager to find the “AHA” moment using your product.
Ok, it’s time to wake up :)
We’ve already discussed some CTA best practices above, but in addition for this part, I would recommend avoiding any note of confusion adding too many calls and in order to prevent any kind of analysis paralysis (the inability to reach a decision).
Pro tip — Consider having a second call to action to push hesitant visitors into action. Here is an example from Stripe Billing:
Footer
It includes a product logo, navigation links, social media icons etc..
Footer (best practices):
As discussed previously, the footer should contain all the secondary information such as social media icons, newsletter, formal company details etc.
My unique advice is to never overcrowd this part and to keep all the information as tidy as possible. Here is a good example from Gumroad:
Conclusion and further reading
We hope this article has given you enough resources to put this knowledge into practice and to build your next SaaS landing page with more confidence.
If you feel stuck, I would recommend you to have a look at these additional resources:
- SaaS Landing Page (a collection of beautiful SaaS landing pages for design inspiration)
- Websites that Convert (by Claire Suellentrop)
- Landing Pages (by Julian Shapiro)
- Writing copy for landing pages (by Joanna Wiebe via Stripe)
