SaaS Homepage Design: The Above-the-Fold Checklist

Most SaaS homepage design advice is a gallery of beautiful examples. Useful for inspiration, less useful when you are staring at your own homepage wondering why visitors leave. This guide is a working checklist instead: what has to be on the first screen, what belongs below it, and the build details that quietly decide whether the page converts. It is the same list I use when I record a homepage audit for a SaaS founder, so you can run it on your own site in about half an hour.

I run Mujeeb Technologies, a small engineering studio that designs and builds websites for B2B SaaS teams on fixed fees. This is practical advice, not survey data. Where I use an external number, I link the source.

Why the first screen matters most

Visitors do scroll, but attention is front-loaded. In Nielsen Norman Group's eyetracking research, people spent 57% of their page-viewing time above the fold and 74% within the first two screenfuls (NN/g, "Scrolling and Attention"). Your first screen is not the whole sale, but it decides whether the rest of the page gets read at all.

For a SaaS homepage, the first screen has one job: let the right visitor recognise, quickly, that this product solves their problem, and show them the next step.

SaaS homepage design: the above-the-fold checklist

1. A headline that names the outcome, not the category

"The all-in-one platform for modern teams" could describe a thousand products. A strong headline says who it is for and what changes for them: "Close your books in days, not weeks" or "Customer interviews, transcribed and tagged automatically". Test it by covering your logo: could a competitor use the same line? If yes, it is too generic.

2. A subheadline that says how

One or two sentences that explain the mechanism in plain language. This is where the category words go, because they help both the visitor and search engines understand what you are.

3. One primary call to action

Decide whether your homepage's main job is "Start free trial" or "Book a demo" and make that the visually dominant button. A secondary, quieter option is fine. Two equal buttons is a decision you have pushed onto the visitor.

4. Real product, visible

Show the actual interface, cropped to the part that delivers the headline's promise. Abstract 3D shapes and stock photos tell visitors nothing about what they will be using. A short, silent, looping clip can work too, as long as it does not slow the page down.

5. A credible trust signal, if you have one

Customer logos you have permission to use, a review-site rating, security or compliance badges you have actually earned. If you are early and have none of these, do not invent them. Say something true instead: "Built by the team behind…", "Free for up to 3 users", or "Cancel anytime, export your data".

6. Navigation that does not compete

Five to seven items is plenty: Product, Solutions or Use cases, Pricing, Resources, Log in, plus the primary CTA. Pricing in the top navigation matters for B2B buyers, who often go there first. Our pricing page design guide covers that page in detail.

7. Fast on a real phone

The first screen is usually where the Largest Contentful Paint element lives: the hero image, video or headline. Google counts an LCP of 2.5 seconds or less as good (web.dev). Heavy hero videos, unoptimised screenshots and web fonts loaded late are the usual reasons a homepage misses it.

Below the fold: the sections that do the selling

Not every homepage needs every section, but each should be a deliberate choice, in roughly this order:

1. The problem, in the buyer's words. Two or three pains your best customers describe before they find you.
2. How it works. Three steps from sign-up to first result. This lowers perceived effort more than a long feature grid.
3. Key features as outcomes. Each feature paired with what it lets the user do, with a screenshot.
4. Use cases or audiences. Short blocks that route different visitors (by role or industry) to dedicated pages.
5. Integrations. B2B buyers want to know it fits their stack before they try it.
6. Proof. Real quotes, case studies and numbers, only if they are real. If not, transparency: pricing, security practices, who is behind the product.
7. Objection-handling FAQ. Setup effort, data import, security, what happens after the trial.
8. Final CTA. Repeat the primary action, with one line that removes risk.

The build details most homepage designs miss

Design reviews look at a static mockup. Visitors experience a live page. These are the items I check that never show up in a Figma file:

• Responsive hero. The headline, subheadline and CTA should all be visible on a common phone screen without scrolling. Mockups often only get designed at desktop width.
• Image formats and sizes. Product screenshots served at the size they are displayed, in modern formats, with the hero image prioritised and everything below the fold lazy-loaded.
• Third-party scripts. Chat widgets, heatmaps, tag managers and A/B testing tools can each add noticeable weight. Load the ones you actually use, and load them late.
• Layout shift. Cookie banners, announcement bars and late-loading fonts that push the page around as it loads hurt both experience and Core Web Vitals.
• Search basics. One H1, a descriptive title tag, a meta description that sells the click, Organization structured data and fast server response.
• Tracking that answers questions. Separate events for CTA clicks, sign-up starts and completed sign-ups, so you can tell where people drop.
• Accessibility. Readable contrast on that trendy grey text, labelled buttons, and keyboard navigation that works.

For a deeper performance checklist, see our Core Web Vitals fix list for SaaS.

A 30-minute homepage self-audit

1. Open your homepage on your phone, on mobile data. Note how long until you can read the headline.
2. Show only the first screen to someone outside your company for five seconds. Ask what the product does and who it is for.
3. Cover your logo and read the headline. Could a competitor use it?
4. Count the buttons above the fold. More than two is a warning sign.
5. Run the page through PageSpeed Insights and note LCP, INP and CLS.
6. Check every claim on the page. Is each one true and provable?
7. Click the main CTA and complete the sign-up or demo flow yourself. Note every moment of friction.

When to fix, and when to redesign

If the problems are copy, CTA clarity and speed, you usually do not need a full redesign. Targeted fixes to the hero, the section order and the performance basics can be done on the existing site. If the site is slow at its core, hard to edit, or no longer matches the product, a rebuild makes more sense. Our redesign checklist helps you decide, and you can compare our fixed-fee packages on the services page.

FAQ

Should a SaaS homepage show pricing?

Link to pricing in the main navigation at minimum. A short "Plans from…" line near the final CTA can help self-serve products. Enterprise-only products can link to a pricing page that explains how pricing works.

Trial or demo as the main homepage CTA?

Match it to how people actually buy your product. Self-serve products with quick time-to-value usually lead with a trial. Products that need setup, data or multiple stakeholders usually lead with a demo.

How long should a SaaS homepage be?

Long enough to answer the questions that stop a sign-up, and no longer. Every section should earn its place by answering one of those questions.

Is a hero video worth it?

Only if it shows the product clearly and does not slow the first screen down. A well-optimised screenshot often does the same job at a fraction of the weight.

Get a free homepage audit

It is hard to see your own homepage the way a first-time visitor does. Send us your URL and you will get a free, personalised Loom video walkthrough of what is stopping visitors from signing up, with fixes ranked by impact and a fixed-price proposal. It is yours to keep either way. Get your free video audit.