SaaS Website Design: A Founder’s Guide to Clarity and Conversion

Most SaaS websites are not badly designed. They are badly ordered.

The typography is fine, the screenshots are sharp, the animation is tasteful. And a visitor still leaves in nine seconds without knowing what the product does, because the page answered questions in the wrong sequence — or answered a question nobody had asked yet.

This is a guide to the sequence. It is the framework we use on every SaaS site we design, and it is deliberately boring in its ordering, because the ordering is the part that does the work.

The short answer

A SaaS website converts when a visitor can climb four rungs, in order, before they are asked to do anything:

1. What is this? — the category, in words the visitor already owns.
2. Is it for me? — who it is built for, specifically enough to exclude people.
3. Do I believe you? — proof for each claim that matters.
4. What happens next? — what the button does, and what it costs.

Skip a rung and the ones above it stop holding weight. A visitor who does not know what the product is cannot evaluate whether it is for them, and a visitor who is not sure it is for them does not care what your customers say about it.

We call this the Comprehension Ladder, and the rest of this article is how to build each rung.

Why the order matters more than the design

There is a well-known piece of research behind this, and it is worth being precise about because a lot of what circulates on this topic is invented.

Nielsen Norman Group, reporting on a study by Chao Liu and colleagues at Microsoft Research, analysed dwell times across 205,873 web pages with at least 10,000 visits each — over two billion recorded visits. The finding: time on page follows a Weibull distribution with what the researchers call negative aging. In plain terms, visitors are most likely to leave immediately, and the longer they stay the more likely they are to keep staying. The first ten seconds decide most departures. Only after roughly thirty seconds does the curve flatten out.

Read the full NN/g write-up — it is short, and it is the single most useful thing a founder can read about their own homepage.

Two consequences follow, and they are not the ones usually drawn:

First, you are not fighting for attention — you are fighting for a decision. The visitor is not idly grazing. They are running a fast test: is this worth more of my time? Everything above the fold is evidence in that test.

Second, surviving the first ten seconds buys you a disproportionate amount of the next few minutes. This is why clarity compounds. A page that is instantly legible does not just avoid a bounce; it earns a reader who will scroll through your pricing and read your FAQ.

Which is also why the most common failure is not ugliness. It is a beautiful page that spends its first ten seconds being atmospheric.

Rung one: what is this?

The visitor needs a category before they can process anything else. Categories are how people file new information — you cannot evaluate a thing until you know what kind of thing it is.

The failure mode is the aspirational headline. "Reimagining how teams build." "The future of operations." These are not categories. They are the feeling you want someone to have after they understand the product, deployed before they understand it.

A category headline is almost embarrassingly plain:

Founders resist this, and the resistance is understandable: the plain version sounds like your competitors. But a visitor who cannot categorise you does not think "how distinctive" — they think "I don't know what this is" and leave. Differentiate on rung two. Rung one is for being understood.

The test

Show your hero to someone outside your company for five seconds, then hide it and ask what the product does. If they cannot name the category, the headline is not doing rung one. It does not matter how many people internally liked it.

Rung two: is it for me?

Now differentiate — and the sharpest tool is specificity about who.

"For teams" tells a visitor nothing; every product is for teams. "For engineering teams at Series B and later, where the roadmap has outgrown a spreadsheet" tells a visitor a great deal, including that they might be the wrong reader — which is a feature, not a cost. A page that excludes nobody persuades nobody.

Three ways to make this concrete, in rough order of effectiveness:

• Name the reader. Role, company stage, or team shape. "For finance teams closing the books monthly."
• Name the situation. The moment the problem bites. "When your onboarding is three spreadsheets and a Notion page."
• Name the alternative you are replacing. Instantly locating: "If you are running this on Airtable and it has stopped scaling."

The third is underused and unusually powerful, because it borrows a category the visitor already understands and positions you against it in one line.

Where this belongs

Not buried in a "Who it's for" section eight scrolls down. Rung two belongs in the subheading directly under the hero headline, or in the first line of body copy. It is the second thing read, so it should be the second thing written.

Rung three: do I believe you?

Here is the model we find most useful, and it reframes what proof is for.

Every claim a page makes opens a question in the reader's head. "Set up in five minutes" opens really, what's the catch? "Enterprise-grade security" opens says who? "Loved by 4,000 teams" opens which teams, and are any like mine?

Proof is what closes those questions. A page carries proof debt when it has opened more questions than it has closed. And unpaid proof debt does not read as ambition — it reads as risk.

This is why beautiful SaaS pages fail. Visual polish raises the number and boldness of claims without adding anything that settles them.

Auditing your own proof debt

Print your homepage. Genuinely print it. Then:

1. Highlight every claim in one colour — anything asserting a fact about the product, its results, or its users.
2. Highlight every piece of proof in another — a named customer, a real number, a screenshot showing the thing actually happening, a specific integration, a security certification, a quote with a full name and company.
3. Count both.

If claims outnumber proof, you have your diagnosis. Most pages we audit come in around four to one.

What actually counts as proof

Ranked, roughly, by how much weight it carries:

The pattern: proof works when it is specific and fails when it is general. A single named customer with a real number outperforms twenty logos, because logos answer "are you real?" while the visitor is asking "will this work for me?"

Place proof next to the claim it settles

The most common structural mistake is a proof section — testimonials collected in one band, halfway down. That treats proof as a category of content rather than as an answer to a specific question.

Put the security proof beside the security claim. Put the setup-time proof beside the setup-time claim. A testimonial that mentions how fast onboarding was belongs next to the onboarding claim, not in a carousel with four unrelated quotes.

Rung four: what happens next?

The fourth rung is the one most often treated as a styling decision when it is an information one.

A call to action has to answer three things: what happens when I click, what it costs me, and what I am committing to. "Get started" answers none of them. "Start free — no card required" answers all three in five words.

Two rules that survive most situations:

One primary action per page. Not per section — per page. You may repeat it several times, but a page offering "start free trial" and "book a demo" and "download the guide" with equal weight is asking the visitor to choose a sales process, which is your job, not theirs.

Match the action to the product's complexity. Self-serve products with a shallow learning curve should push to signup. Products requiring configuration, procurement or a data migration convert better to a demo. Forcing self-serve on a complex product produces trials that never activate, which looks like a conversion win and is a churn problem.

Putting the ladder on a real page

Here is the structure the four rungs imply, in the order a page should present them:

Note that rung four appears early. Stating the terms of the next step is not something to hold back — a visitor who knows there is a free tier with no card reads the rest of the page more generously.

Note also that rungs one and three keep recurring. A long page is not one climb of the ladder; it is the same four questions asked again, more specifically, at each depth.

What this framework does not cover

Three honest limits.

It says nothing about whether your positioning is right. The ladder makes a position legible. If the position itself is wrong — you are aimed at the wrong buyer, or your category does not exist — a clearer page will only help people reject you faster. Positioning is upstream of design, and no amount of design fixes it.

It says nothing about traffic quality. A page can climb all four rungs perfectly and convert nothing if the visitors arriving were never plausible buyers. If your paid traffic bounces and your organic traffic converts, the problem is upstream of the page.

It is a structure, not a substitute for craft. Everything here concerns order and content. Typography, hierarchy, motion and restraint are what make a well-ordered page feel worth trusting. The ladder tells you what to say and when; it does not do the design.

Where to go from here

If you are diagnosing an existing site rather than building one, start there: why SaaS websites get traffic but no signups works through the six causes and how to tell them apart, because fixing the wrong one is the expensive mistake.

If you are building one page rather than a site, the decisions inside each block matter more than the architecture — that is the anatomy of a landing page that converts.

If your product is genuinely hard to explain — an AI product, an API, anything with no visible interface — rung one is your hard problem, and it needs its own approach.

If you are replacing a site that already exists, read how to redesign without making it worse before you delete anything.

And if the open question is what to build it on, we have written the honest Framer-versus-custom comparison.

Frequently asked questions

How long should a SaaS homepage be?

As long as it takes to climb the ladder with proof at each rung, and no longer. In practice that is usually six to nine sections. Length is not the variable that matters; unanswered questions are. A short page that leaves three objections open converts worse than a long one that closes them.

Should the hero have a product screenshot or an illustration?

A screenshot, unless the interface is genuinely unintelligible out of context. A screenshot does double duty — it explains the category and proves the product exists. Illustration is the right call when the product has no meaningful visual surface, but it should then be doing explanatory work, not decorative work.

How many CTAs should a SaaS landing page have?

One action, repeated as often as the page is long — typically in the hero, after the main product explanation, and at the end. The number of buttons matters far less than the number of different things they ask for.

Does any of this apply to B2B sites with a sales-led motion?

Yes, and the ladder gets more important rather than less. A sales-led site has a longer consideration period and more stakeholders, which means more people reading with more specific objections. Rung three carries most of the weight there.