How to convert repeat order samples to pre-orders

How to create a SaaS landing page that converts

Create a SaaS landing page that inspires visitors, wins over prospects, and wins customers

When creating a landing page that would convert, there was always great uncertainty about what the ideal result would be.

During the creation of Cruip, I encountered a lot of questions from founders as to whether they are correctly presenting various aspects of their landing page. Questions like:

  • Is the foundation of my landing page good enough?
  • Is the key information in the correct order?
  • Is the product message clear?

Let's face it: there are tons of compelling articles on creating a conversion-driven landing page, but in our experience none of them are different from SaaS products, and most importantly, it doesn't explain the basics of structuring your landing page for maximum conversion. Themes like:

  • What is the end goal of your landing page?
  • What kind of information should you include
  • This is how you present the key messages in the correct order

In this guide, we'll focus on the anatomy of a perfect landing page and how to structure your content for maximum conversions.

Are you ready? So let's get started :)

Define your goal

The first important step in creating a high-conversion landing page starts with a deep understanding of your product / business goal.

For example, a typical end goal for a SaaS company is to get visitors to sign up for a free trial or create an email list before a new product is launched.

The end goal depends heavily on the nature of your product and your business model. So it is very important to get it right before you start developing your landing page.

Here are some examples of landing pages:

  • Convince a prospect to sign up for a free trial
  • Collect pre-orders to validate a business idea
  • Before starting a new product, compile an email list

Are you building a landing page? Use one of these lovely templates to get you started

Once you start developing your landing page with the ultimate goal, you can work backwards to determine what information is essential to achieving that goal and what information to leave behind as secondary information.

When everything matters, nothing matters

Remember, adding more information than required will degrade your message's performance. In this case, your landing page will quickly lose focus. And the impact of your visitor.

Did you know? It is estimated that up to 50 percent of potential customers will reach your landing page in the first eight seconds. So your important job is to get their attention as quickly as possible and get your key messages across immediately.

Establish the basic structure

We couldn't cover multiple SaaS landing pages in this guide. To generate a specific development route, I created an imaginary product (a social media management tool) and the landing page foundation based on each goal. In this case:

Convince potential customers to sign up for a free trial

If your product doesn't fall under this particular scenario, don't worry, you can always use these approaches.

The first important step in defining the landing structure of our social media management tool is determining what content we want to include and in what order. Let's start with the content first:

  • Header
  • hero
  • Social evidence
  • Product features (and benefits)
  • Customer recommendation
  • Basic call to action
  • footer
Remember: our main goal is to convince prospects to sign up for a free trial

Each piece of content is discussed separately later in this article. Before doing this, however, we determine the order of our landing page: what will we include first and what will we include later and, above all, what is the logic behind the content hierarchy?

There are tons of powerful frameworks for organizing your landing page content hierarchy. For this particular scenario, however, we will stick to a simple structure that we have tested and used several times. It consists of three main sections:

1) Above the Flap (Hero and Header) - An estimated 80% of all visitors leave a landing page before moving to the body area. Hence, getting this area right is crucial to grab your prospect's attention and motivate them to read.

2) The Body (Social Evidence and Product Features / Benefits) - This is probably the longest section of your landing page. Here you 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 (Client Testimonials and Bottom Call to Action) - The Moment of Truth. This is where you'll be asking your visitors to take whatever action you want and using customer testimonials to show why it's safe to trust you.

As you can see, we've deliberately removed the footer from the three main sections. The reason for this is that we use this part for all secondary information so we cannot consider it an indispensable element to achieve our goal.

Here is an example of how all of the tripartite sections work together:

You can download the landing page model here (sketch file).

A great inspiration for this approach is the beautiful book websites converted by Claire Suellentrop (which I highly recommend).

Content details

From this point on, you should have a deep understanding of the importance of your target to the landing page and how to organize your content for maximum conversions.

Now is the time to examine each piece of content individually, starting with the header.

Header

It contains a product logo, navigation links and a call for actions

Navigation links (best practices):

Traditional navigation requires the presence of additional inside pages and is not always mandatory (especially for stand-alone landing pages).

I would suggest having the main website links in the header (e.g. prices, product features, etc.) and leaving any secondary information in the footer (e.g. social icons, newsletters, etc.).

Call to Action (Best Practices):

Action header calls should match the main target CTA (the ones on the hero and above the footer), with the exception of the login button (if required).

hero

It contains a heading, a sub-heading, images and a call to actions

Value Proposition:

Your value proposition (the value you bring to your customers) should let prospects know why they should choose you over everyone else.

To be effective, a value proposition must answer these three key visitor questions:

  1. Does your product or service solve my own problems?
  2. What benefits can I expect?
  3. Why should I buy from you through your competitors? (clear differentiation)

You need to present your value proposition first on your landing page and it needs to appear between your headline and the subheading.

Heading (Best Practices):

For a highly effective headline, you should provide a clear description of the purpose of your product and the problem you are actually solving.

Be short and descriptive and avoid unnecessary slogans at all costs. At least you're not Nike yet.

If your prospect doesn't understand what your product makes of the headline, you probably won't get a second chance.

Subtitles (Best Practices):

If your headline explains what you do, use your subheading to describe how your product does what it says it does.

In particular, your subheading should include a specific explanation of what you do / offer, for whom and why it is useful.

Pro tip - keep the text within 2 lines and avoid cluttering your visitors with too much detail before moving on to the product features section.

Here is an example of a powerful value proposition:

Product: https://www.mailpoet.com/

Goal: WordPress-based websites

Problem: email bounces and delivery rate

Advantage: By improving the delivery rate, you can gain more loyal subscribers

Images (Best Practices):

Your hero images must match (or reinforce) your product's value proposition (headline plus sub-headline) and must provide an extra level of clarity if your copy doesn't do the job.

There is no secret source for perfect images, but as a designer, I prefer product screenshots with high fidelity to generic illustrations that add no value in terms of clarity or product purpose.

Effective imagery should provide an instant understanding of what you are doing and showcase your value proposition in a visual and compelling way.

Here are 3 examples of powerful images:

Call to Action (Best Practices):

A CTA must reflect a benefit. An action that your audience will want to complete.

The more informative you are about the action you want your visitor to take, the higher your chances of getting a prospect for a prospect.

So, find out and ask yourself: what do you get when you click this button?

Social evidence

It contains logos of the reporting that you have collected on the internet

Social Evidence (Best Practices):

Especially in the early stages of your business, you probably won't have a long list of press releases from major trade magazines like TechCrunch, Wired, The Next Web, etc.

This is not a problem.

If you're just starting out, you'll need to include social evidence to show that someone is talking about the solution you provided and your product has already been recognized.

If you have almost no coverage, you can use social evidence from portals that featured your product (e.g. ProductHunt, Betalist, etc.) or from blogs, social media, or lists where you were (positively) mentioned ( e.g. Reddit, HackerNews etc ..).

One final note on social proofs, if you run a business that is not fully mature, you may find it difficult to get any form of traditional recognition in the beginning. In that case, just do the job and don't worry.

Product features

It contains app screenshots, videos, pictures, etc.

Product Features (Best Practices):

One of the biggest mistakes founders make with their product features is highlighting too many features and ending up with something that is hard to digest.

Just a reminder, adding more information than is required will make your message less meaningful

As a rule of thumb, a product features section should contain between 3 and 6 features.

If you have more than 6 features I would suggest highlighting them with different hierarchies. For example:

4 main zigzag features plus 3 secondary bullet points.

Pro Tip - If you're struggling to decide which product feature to use, ask your current customers which features they are most interested in and why. Remember, they've all been prospects at one point or another.

Product benefits

It contains app screenshots, videos, pictures, etc.

Product advantages (best practices):

We have purposely separated the product features from the benefits in order to discuss them separately. However, they always match on a landing page. Specifically:

[FEATURE] offers [ADVANTAGE] that [CREATES BENEFIT]

We'll first explain the benefit of using a particular feature, and then show why that functionality can make you happier, more productive, etc. (the benefit).

Below is an example of features versus benefits (we'll use our social media management tool for reference):

[FEATURE]: Powerful social engagement analysis and reporting

[BENEFIT]: With clear reports on various important metrics, you have actionable data at hand that you can use to improve your engagement and celebrate your success.

Thanks to Buffer Reply for the inspiration.

Customer recommendation

It shows how your current customers have benefited from your product or service

Customer recommendations (best practices):

If a prospect is still skeptical about trusting you right away, there is no better way to show how your customer testimonials build trust and encourage your visitors to take the final action.

To be really effective, a customer testimonial needs to appeal to your target audience and convince your visitors that your product is trustworthy and used by people like them.

Basically, it must contain this specific answer:

  • What is the biggest benefit that you have seen using our product?

Never make false reviews and always use real customer testimonials. Customer testimonials are used to build trust and create credibility and posting fake reviews will destroy your credibility and trust.

Pro Tip - Include a name and picture of the customer who posted it. This information is used to legitimize the authenticity and credibility of your customers.

Below CTA

It contains 1 call to action and a short paragraph

Lower CTA (Best Practices):

Generally, this is where all the magic happens, and your prospects want to find the "AHA" moment with your product.

Ok, it's time to wake up :)

We've already discussed some CTA best practices above, but in addition to this part, I'd recommend avoiding any confusion by adding too many calls and avoiding any kind of analysis paralysis (inability to make a decision) .

Pro Tip - Consider making a second call to action to get hesitant visitors to act. Here is an example from the strip accounting:

footer

It includes a product logo, navigation links, social media icons, etc.

Footer (Best Practices):

As mentioned earlier, the footer should contain any secondary information, such as: B. Social media icons, newsletters, formal company details, etc.

My unique advice is never to clutter this part and keep all information as neat as possible. Here is a good example from Patch:

Conclusion and read on

We hope this article has provided you with enough resources to put this knowledge into practice and create your next SaaS landing page with more confidence.

If you are unsure of yourself, I recommend checking out one of these additional great resources:

  • Websites that convert (by Claire Suellentrop)
  • Landing Pages (by Julian Shapiro)
  • Copy for landing pages (by Joanna Wiebe via Stripe)

Did you like this article? Get the next articles, tutorials, and templates straight to your inbox