---
title: "SaaS Website Design: A Founder’s Playbook"
source: https://refact.co/insights/digital-product/saas-website-design
author: "Hossein Karami"
date: "2026-09-05"
---

# SaaS Website Design: A Founder’s Playbook

Most SaaS homepages fail a basic test. A visitor lands, scrolls, and can’t explain what the product is, who it is for, or what would be different if they used it. The site looks good. The traffic looks good. The signup graph is flat. That gap is rarely a visual issue. It’s a design gap in the grand sense, where the message, the page layout, the proof, and the first product action all need to line up for a stranger.

This is SaaS website design in 2026. Templated hero-plus-features layouts are still dominant, but they don’t really differentiate and increasingly fail to convert. Studio Maydit’s [SaaS conversion analysis](https://studiomaydit.com/blog/saas-website-conversion-rate) says that average B2B SaaS sites are in the 1.5% to 3% range for lead conversion, with the most successful sites in the 8% to 15% range. The gap isn’t about the quality of the traffic. It’s about how well a site does each distinct task it needs to do. This playbook is for the person choosing a place to start fixing things.

## Your Site Is the First Part of the Product

Treating the marketing website as packaging, a slick exterior of what something really is, has a cost. A visitor who can’t relate to the text never becomes a user. A user who gets to an empty app never becomes a customer. The product and the website are one complete experience, and the gaps are noticeable.

Practitioners report the same findings. A CRO-first designer working in Webflow discusses how he justified every element of his design with a hypothesis rather than with a template and reported a 49% increase in lead generation in under 8 months. Take that number as an individual case study and not a metric to compare yourself to. The real takeaway is the approach, not the number. Each page element needs to answer a question that a visitor has.

Homepages have four critical functions that need to be prioritized in sequential order:

-   Explain the product to the right audience with a clear, concise summary
-   Develop trust between the visitor and the company
-   Identify what that next step is that requires the least amount of friction
-   Deliver on the promise and experience the visitor will encounter within the product.

A page that excels in one of these four functions and falls short in the other three is a leaky funnel. Correcting the design layer is insufficient in closing the leaks. This is where most [product design engagements](https://refact.co/services/product-design) start. It does not start with building a new page/section. It is better to understand where the visitors have hesitation.

## Message Before Pixels

The pattern that comes up most often in people writing about SaaS design is copy-centric design at the forefront. While strong art direction can help a page, it can’t make up for a weak message, yet the overwhelming majority of design briefs start with visual examples and save the copy for the last minute.

Use this three-step structure when establishing a hero.

1.  **Outcome.** What is the change the customer experiences?
2.  **Mechanism.** How does the product create said change?
3.  **Proof.** Why does the customer need to believe this?

Compare two samples of hero lines. One says “Manage everything in one place.” This example provides a category and asks the customer to interpret the statement. The other one says “Turn client requests into tracked projects.” This example provides the customer something specific to identify. The second example limits the audience. That’s the point. If your heading can be applied to five of your competitors, it doesn’t represent any of your competitors.

A common failure mode in one of the practices is worth mentioning. Most SaaS websites think of the other SaaS tools as their competition. In reality, the competition is WhatsApp, a spreadsheet, or a phone call. If a page doesn’t communicate a distinct advantage over the workaround the customer is using today, then there is no reason for the customer to switch. Comparisons of features to other software solutions are a false answer to the problem.

## The Pages a Modern SaaS Site Needs

Homepage, features, and pricing are no longer enough. Buyers do more independent research and expect the website to provide the answers to their questions before they contact sales. The website has to provide that.

The pages that consistently move the needle are:

-   Workflow Pages, which demonstrate how the product will solve the customer’s problem without calling out features.
-   Pages for two or three main use cases which show the customer where and how to get value.
-   Pages for specific audiences, (certain company sizes and employee roles) to show that specific customer that they are talking to.
-   Pages for alternatives and competitor comparisons, which are the actual competitors that the buyer is comparing to the company.
-   **Case studies** with named customers, a real before and after, and numbers you can defend.
-   **A pricing page** that lets buyers qualify themselves without a sales call.
-   Free tools or demos for buyers who want verifiable proof before committing to a purchase.

Notes on implementation. Do not try to tackle all of these at once. For a launch, get the homepage, one workflow page, one use case page, and a carefully crafted pricing page. Build the rest as the market demands. The CMS must be able to facilitate all of the above.

### Pricing pages carry more weight than most teams realize

The second most visited page after the homepage is the pricing page. This is where silent losses occur. Make sure to include each plan’s salient features in an easy-to-understand format. List the limitations in the table and not in footnotes. If annual billing reduces costs, compute that discount on the page instead of directing the buyer to contact sales. For higher tier deals that require sales calls, justify the need for such a call by briefly describing what is complex about those deals.

![Example SaaS pricing page with tiered plans and feature comparison](https://cdn.refact.co/uploads/2026/09/image_placeholder_1-12.avif)

Clear, tiered pricing, like ActiveCampaign’s, allows buyers to easily self-qualify for the perfect plan, streamlining their journey without a sales call. · Source: www.eleken.co

## Design for Two Audiences, Humans and Agents

A recurring theme across many posts by practicing professionals in 2025 and 2026 is that many SaaS websites were being modified to cater to Human buyers and AI agents concurrently. Before visiting a website, buyers utilize LLM-based tools to generate a shortlist of potential vendors. Agents visit the web pages, analyze the features, and then summarize the content. If your website is not optimized for AI users, you will be overlooked.

Two shifts will continue to be relevant. On the human layer, continue work on clarity, proof, contrast, risk reduction, and visible support. On the machine-readable layer, add structured data (JSON-LD for product, FAQ, and organization), make capabilities parseable in copy rather than in imagery, keep important content in HTML rather than in JavaScript, and explain the product’s capabilities in terms an LLM can reproduce.

AI agents are becoming a more important consideration. Conventions like llms.txt and Model Context Protocol are still taking shape, and adoption remains uneven. Assume the broader structures will be more permanent while the tactics will be more ephemeral. The broad structure is: make your site intelligible to whatever is reading it.

## Trust Signals Belong Where Doubt Is

Logos, testimonials, and security seals don’t do much good as pure decoration. They work as answers to concerns, presented where those concerns are. A logo bar under the hero can feel like wallpaper. Place the same logos on the same claim the logos support (“teams like these use this to ship faster”). The former work is decorative, the latter is functional.

A guide on [enterprise buyer trust signals](https://dgitl.co.uk/blog/designing-for-enterprise-buyers-trust-signals) makes the same point in stronger terms. Enterprise buyers scan for credibility before they scan for features. The security posture, references, and depth proof outrank aesthetics. A separate [trust-signal hierarchy](https://www.homepageauditor.com/blog/trust-signals) argues the highest-impact signals are the ones founders most often bury below the fold.

Worth checking on your site:

-   Testimonials next to the claims they validate, not clustered in one strip.
-   Case study quotes with role, company, and the situation that made the outcome useful.
-   Security and compliance information should be included near pricing and the trial CTA since that’s where risk is perceived to be the highest.
-   Say you can get your money back anytime next to the primary CTA instead of at the footer.

Only publish numbers you can verify. If you do not have a measured result yet, describe the before-and-after workflow in specific terms. A concrete story reads as more trustworthy than an unsupported percentage.

## Performance Starts in the Design File

A heavy hero video is itself a design decision, and so are choices like loading six font weights, animating every card on scroll, or hiding first-screen content behind JavaScript. By the time an engineer opens Lighthouse, those costly choices are already locked in.

The Catchpoint report helps quantify the [2025 benchmarks for SaaS website performance](https://www.catchpoint.com/learn/2025-saas-website-performance-benchmark-report). Standard targets around Core Web Vitals, like keeping LCP under 2.5 seconds, are worth building into the design system from the start rather than patching in later at QA. This is not a case of vanity metrics. Speed fuels conversions. Users that wait will leave.

What is truly important on the first screen is:

-   **Images.** Use formats that help minimize image size. A hero image doesn’t need to be sent to the browser at 3x the size.
-   **Fonts.** Limit the total number of weights and variants used. Choose what text has to render immediately.
-   **Motion.** If an animation doesn’t provide value to the product, it should not be on the page.
-   **JavaScript.** Don’t load an interactive JavaScript library for a section that doesn’t actually need it.
-   **Layout Stability.** Be conscious of the amount of space used to display an image or an embed. Make sure images don’t abruptly jump to fill the remaining space.

The relationship between SEO and accessibility is similar. Both problems are the result of poor design choices and cannot be fixed after the fact. Including headings, links, semantics, sufficient contrast, and placing forms that can be controlled with the keyboard are part of the design phase. A system that places these items as defaults will outperform a QA checklist at the end.

## The Mistakes That Make Redesigns Expensive

Some of the costliest mistakes when redesigning SaaS are due to an inferior design process more than an inferior design aesthetic. According to the discussions of practitioners and reviews of our own projects, the most consistent problems are:

-   **Designing based on assumptions rather than observation.** The necessity of many website redesigns is not due to the site’s appearance, but the fact that teams have not documented real users getting stuck. New sites address complaints of team members, but do nothing to address conversion leaks.
-   **Reliance on split-testing.** Some of the most thoughtful comments in a popular Hacker News article argued that although improving the wording of a page is quick and easy, if the real problem is that the page does not do its job, structural redesigns will outperform minor changes that are the result of A/B testing.
-   **Skipping mobile and empty states.** Approval of desktop designs is frequently followed by shipping broken designs for empty states, long content, form errors, and broken projects.
-   **Dark patterns.** Some designs use hidden cancellation paths, forced upsells, and opt-in traps to increase the short-term number of sign-ups, but decrease long-term trust and increase the real cost by reducing the retention rate.
-   Poor design-to-engineering handoff. Fonts get hardcoded, states go undocumented, and the shipped site drifts from the file. After half a year, no one knows what “on brand” even means anymore.

A [structured handoff](https://refact.co/insights/design/figma-to-webflow-handoff) and working design token system help avoid these issues. The rest require a discovery phase. If you’re thinking about a complete overhaul, our advice on redesigning a [website without](https://refact.co/insights/digital-product/how-to-redesign-a-website) ruining it provides a sequence.

## Measure What the Redesign Was Supposed to Change

A redesign without measurement is a new opinion, so capture baseline metrics that you plan on moving before you brief. Grafit’s [five CRO metrics for a SaaS redesign](https://www.grafit.agency/blog/5-cro-metrics-before-a-growth-focused-saas-website-redesign) is a good starting point: conversion rate by traffic source, bounce and exit rate, scroll depth, form completion rate, and CTA click-through rate.

Layering on an event taxonomy helps capture the things that matter for your funnel (CTA clicks, user signups, first user actions, product use, pricing queries, demo requests). Build dashboards to answer your customer acquisition funnel questions rather than build every possible dashboard.

![Analytics dashboard showing SaaS conversion funnel and CRO metrics](https://cdn.refact.co/uploads/2026/09/image_placeholder_2-12.avif)

Without a clear conversion funnel dashboard tracking percentage changes in key metrics, a redesign remains just a new opinion about the same problem. · Source: www.databloo.com

A/B test the largest area of uncertainty, typically the headline, primary CTA, or pricing, and then give each test sufficient time to reach a meaningful conclusion. Do not run several tests concurrently. Do not call a winner after a few days. The test exists to lower the risk on a call you cannot make with logic.

## A Founder Checklist Before You Brief a Redesign

Use this to analyze your current site or to scope a new one. Complete this document prior to commissioning visual design.

1.  **Messaging.** Can the right visitor explain the product to a colleague after 20 seconds on your homepage?
2.  **Audience specificity.** Does the copy narrow the audience enough that the wrong visitor bounces on purpose?
3.  **Real competitor.** Does the site address the actual alternative (spreadsheet, email, another tool) rather than a generic category?
4.  **Homepage hierarchy.** Is the primary action obvious at every logical stopping point?
5.  **Pricing transparency.** Can a buyer compare plans and qualify themselves without a call?
6.  **Workflow and use-case pages.** Does the site have pages for the two or three ways customers actually get value?
7.  **Trust placement.** Are proof points beside the claims they validate, not clustered in a logo strip?
8.  **Signup friction.** Does the form ask only what you need to activate the user?
9.  **Onboarding continuity.** Does the first in-app action reflect what the homepage promised?
10.  **Empty states.** Do they teach the next step instead of stating that nothing is there?
11.  **Performance budget.** Are hero media, fonts, and motion inside a target the team has agreed to?
12.  **Accessibility basics.** Keyboard navigation, contrast, focus states, and form errors handled in the design system?
13.  **Machine readability.** Structured data in place, key content in HTML, capabilities described in plain language?
14.  **Analytics.** Are signup and activation events tracked, with dashboards someone actually reads?
15.  **CMS flexibility.** Can marketing publish new pages without engineering time?

Most sites fail on five or six of these. That is normal. The point of the list is to sequence the work.

## Where Refact Fits

Most of our SaaS website work is not “make it look better.” It’s more along the lines of, “Yes, there is a product. Yes, there is traffic. Yes, there are sign-ups. Why aren’t the sign-ups growing?” That’s a “how” question, not a “what” or “why” design question. We did a similar project with [CinemaAssist, the SaaS ticketing platform](https://refact.co/work/cinemaassist). The technology build was a piece of the work and so was designing the customer journey. Our studio exists to address the challenge of getting both of those right simultaneously.

If you want strategy, design, and engineering in one conversation, our [product design service](https://refact.co/services/product-design) and [UI/UX services](https://refact.co/insights/design/ui-ux-design-services) are designed around that. The discovery phase is a prerequisite and is covered by a money-back guarantee, as the largest risk in a SaaS redesign is committing to the wrong scope before the actual problem is identified.

Pick one thing this week. Define your primary conversion action. Establish a baseline for the five CRO metrics. Walk through your signup flow on your phone. If the biggest hesitation turns out to be about the message rather than the pixels, lock the message first. The rest becomes easier when the page leads the right person to the product.

## FAQ

### Should I write copy or design first for a SaaS website?

Write and validate the copy first. Message clarity drives conversion more than visual polish, and designing around a vague headline usually produces a page that looks finished but does not convert. Lock the outcome, mechanism, and proof for each page, then design around them. If the headline could belong to five competitors, rewrite it before opening Figma.

### How many pages does a SaaS marketing site need at launch?

Ship a homepage, one workflow page, one use-case page, and a clear pricing page. Add comparison, audience, and case study pages as demand shows which ones matter. Building all of them upfront usually produces thin content across every page. The point is depth on the pages that carry pipeline, not breadth for its own sake.

### Do A/B tests actually improve SaaS website conversion?

Split tests work well for small, defined decisions like button copy or pricing layout. They do not fix structural problems like an unclear value proposition or a broken page hierarchy. If the site's underlying job is wrong, testing wording will move the number by fractions of a percent. Fix structure first, test details second.

### What is the biggest mistake in SaaS website design right now?

Copying a templated hero-plus-features layout from other SaaS sites and assuming it will convert. The template is now the default, which means it no longer differentiates. Combined with a headline that names a category rather than an outcome, this is the pattern that keeps average B2B SaaS conversion at 1.5 to 3 percent while the top tenth reach 8 to 15.

### How should I design a SaaS site for AI agents and LLM search?

Keep important content in HTML rather than JavaScript. Add structured data using JSON-LD for product, FAQ, and organization schemas. Describe capabilities in plain language that an LLM can quote back. Conventions like llms.txt and MCP endpoints are still emerging, so treat the underlying discipline of machine legibility as durable and specific tactics as provisional.