---
title: "SaaS Website Design: Pricing Pages, Product Tours, Signups"
description: "SaaS website design for US software teams: category positioning, pricing pages, product tours and signup flows tracked into your product analytics."
url: "https://dardo.studio/en/services/saas-website-design/"
language: "en"
translations: {"es":"https://dardo.studio/es/servicios/diseno-web-saas/","pt":"https://dardo.studio/pt/servicos/site-para-saas/"}
updated: "2026-10-14"
---

# SaaS website design: positioning, pricing pages and signup flows

SaaS website design is the marketing site around a software product: the homepage that positions it, the pricing page, the product tour and the path into a trial, signup or demo. Dardo designs and builds these sites for US software teams and connects each signup to your product analytics.

By Dardo editorial team · Updated Oct 14, 2026 · 8 min read

[Get a proposal](https://dardo.studio/en/contact/?service=saas-website-design) · [Message us on WhatsApp](https://wa.me/573163373216?text=Hi%20Dardo%2C%20I%27d%20like%20a%20proposal%20for%3A%20SaaS%20website%20design%3A%20positioning%2C%20pricing%20pages%20and%20signup%20flows)

## What a SaaS website project includes

It covers the pages that sell the product and the handoff into it; the product's own screens are a separate scope, and your proposal lists what is included.

- Positioning and a homepage narrative built from what customers say the product replaces
- A pricing page: plans, monthly and annual billing, limits, a billing FAQ and a route to sales
- A product tour: a scroll-driven story, an interactive walkthrough or a captioned demo video
- Signup, trial and demo-request flows, with events agreed with your product team
- CMS templates for integration, comparison and changelog pages
- Development, launch checks and every account handed over in your name

## Product-led or sales-led: what changes on the site?

Your sales motion sets the main call to action, and that shapes most of the design. Product-led companies want visitors in the product today; sales-led ones want the right buyers talking to sales. Many run both, and the site must keep the two paths from competing on one screen.

__Product-led or sales-led: what changes on the site?__
| Site element    | Product-led (self-serve trial)                     | Sales-led (demo request)                           |
| --------------- | -------------------------------------------------- | -------------------------------------------------- |
| Main action     | Start a trial or a free plan                       | Book a demo or talk to sales                       |
| Pricing page    | Full prices, limits and a plan comparison          | Starting prices, or a contact tier scoped by sales |
| Product tour    | The first task a new user will complete            | The outcomes a buyer must justify internally       |
| Signup form     | Email or single sign-on, as few fields as possible | Company, role and team size to route the lead      |
| What we measure | Signups, activation and trial-to-paid              | Demo requests, qualified leads and closed deals    |

## How do you explain a product in a crowded category?

Say what the product replaces, who it is for and what it does that the alternatives don't, in your customers' words. We work from sales-call notes, support tickets and lost-deal reasons, then check the first screen against one question: could a visitor tell a colleague what the product does?

Software categories tend to open with a wall of capability labels. For [Hyper](https://dardo.studio/en/work/hyper/), an AI customer-intelligence product, we designed and built a homepage that starts with one person instead: as the visitor scrolls, scattered signals reconcile into one customer profile, and each candidate offer is tested against it. The motion carries the argument rather than decorating the screen.

Motion has rules too: under WCAG 2.2, animation that plays on its own for more than five seconds beside other content needs a way to pause, stop or hide it, and demo videos with sound need captions. Our [web accessibility](https://dardo.studio/en/services/web-accessibility/) service covers the rest.

## What should a SaaS pricing page show?

A pricing page should let a buyer find their plan, see the monthly and annual cost and know what happens at each limit without booking a call. We design it around the metric you charge by, whether seats, usage or features.

- The monthly price and the amount billed per year, side by side
- Limits, overages and what happens when a team outgrows its plan
- A billing FAQ: currency, taxes, trials, upgrades, refunds and cancellation
- A route to sales for custom contracts and security reviews

The page must say what billing actually does. Under the Restore Online Shoppers' Confidence Act, a US subscription sold online with automatic renewal must disclose all material terms clearly and conspicuously before collecting billing information, get express informed consent before charging and offer a simple way to stop recurring charges. We design the disclosure, consent step and cancellation path; your counsel approves the wording.

[Superame](https://dardo.studio/en/work/superame/), a product with verified payments that we designed and built, follows the same principle: its public rules say how a payment moves the ranking, and the code counts only payments the provider verifies.

## Signups, trials and demo requests, measured end to end

A signup is useful data only if the site, checkout and product agree on who the person is and where they came from. We agree the event plan with your product team: GA4's recommended sign\_up event for accounts, generate\_lead for demo requests, then qualify\_lead and close\_convert\_lead as your CRM reports progress.

Domains are where that data breaks. Across different domains, GA4 counts one person as two users unless cross-domain measurement carries their ID in a link parameter, and a redirect that drops it breaks the chain, so we test every hop. In PostHog, identifying the user at signup links their earlier anonymous visits to the account.

Trials need a decision too. As of October 2026, Stripe Checkout collects a card for trials by default; if you skip it, the subscription cancels or pauses when no card is added by the trial's end, and the signup page should say which. The full plan belongs to [analytics setup](https://dardo.studio/en/services/analytics-setup/); with steady traffic, [conversion rate optimization](https://dardo.studio/en/services/conversion-rate-optimization/) tests changes against it.

## Integration, comparison and changelog pages

These pages answer late-stage questions: does it work with our stack, how does it compare, is it still improving? We build them as CMS collections marketing can publish without a developer; an integration entry holds what syncs, setup steps and who maintains it.

We template the layout, not the words. Google's spam policies call many pages made mainly to manipulate rankings, with little value to readers, scaled content abuse, so an integration page without real setup details stays unpublished. Comparisons can name competitors: the FTC's comparative advertising policy encourages it when the claim is truthful and its basis clearly identified. We date each one and check it against the competitor's public pricing and docs.

A changelog fed by the same CMS shows the product is moving; docs and status pages usually stay in their own tools, linked from a shared header. If customers will run your product on their own domains, our guide to [custom domains for SaaS](https://dardo.studio/en/blog/custom-domains-for-saas/) covers the setup.

## Working alongside your product team

The site changes weekly and the product ships on its own schedule, so we agree what is shared and who publishes before design starts. Shared colors, type and components keep site and app consistent; across several products, a [design system](https://dardo.studio/en/services/design-systems/) deserves its own scope.

The platform follows who edits. A marketing team publishing without developers is usually well served by [Framer](https://dardo.studio/en/services/framer-development/) or [Webflow](https://dardo.studio/en/services/webflow-development/); a site sharing sign-in or live data with the app fits [Next.js](https://dardo.studio/en/services/nextjs-development/), which runs Hyper's front end.

## What moves the cost, and when does another service fit better?

The price follows the work: unique templates, whether we write the positioning and copy, the product tour, analytics and CRM connections, languages and any migration. Each proposal separates design, development, content and third-party costs; our [pricing page](https://dardo.studio/en/pricing/) lists the budget ranges our inquiry form uses.

Some briefs fit another scope. For one launch page, choose [a landing page](https://dardo.studio/en/services/landing-pages/). For onboarding inside the app, start with [product design](https://dardo.studio/en/services/product-design/); to build the product itself, choose [web app development](https://dardo.studio/en/services/web-app-development/). If buying committees and long sales cycles define your market, [B2B website design](https://dardo.studio/en/services/b2b-website-design/) fits better.

## Questions before you choose

**How much does a SaaS website cost?**

There is no fixed package: the price follows the templates, copy, product tour, integrations and languages in scope. The proposal separates design, development, content and recurring costs, and our inquiry form offers budget ranges from under USD 5,000 to over USD 60,000.

**How long does a SaaS website take to design and build?**

We set the schedule in the proposal once the scope is known. The biggest variables are positioning work, content readiness, unique templates, integrations and how quickly reviews come back. If the launch is tied to a product release, tell us at the start.

**Do you write the positioning and copy?**

We can. We draft positioning and page copy from interviews with founders, sales and support, plus the language customers use in calls and reviews, and you approve every claim. If your team already has messaging, we design around it and flag the gaps.

**Should we publish prices or ask buyers to contact sales?**

Publish them when a buyer can choose a plan without help: hiding prices adds a sales step a self-serve buyer may never take. Keep a contact route for tiers that depend on volume, security reviews or custom contracts.

**Can a studio in Colombia work with a US SaaS team?**

Yes. Dardo works from Bogotá, on UTC−5 all year, so our working day overlaps with US Eastern and Central time. We work in English, and in Spanish when you also sell in Latin America; a Spanish version gets its own URLs, copy and reviewer.

**Who owns the site, the CMS and the analytics?**

You do. Repository, hosting, domain, CMS, analytics and any payment or CRM integrations are set up in your company's accounts where the platform allows it, with Dardo added as a user. At handover you get the design files, CMS documentation and the event plan.

## Sources & further reading

Sources behind this page, with further detail from the original publishers.

- [Google Analytics Help: Recommended events](https://support.google.com/analytics/answer/9267735) · support.google.com
- [Google Analytics Help: Set up cross-domain measurement](https://support.google.com/analytics/answer/10071811) · support.google.com
- [PostHog Docs: Identifying users](https://posthog.com/docs/product-analytics/identify) · posthog.com
- [Stripe Docs: Configure free trials for Checkout](https://docs.stripe.com/payments/checkout/free-trials) · docs.stripe.com
- [Cornell Law School LII: 15 U.S. Code § 8403, Negative option marketing on the Internet (ROSCA)](https://www.law.cornell.edu/uscode/text/15/8403) · law.cornell.edu
- [Federal Trade Commission: Statement of Policy Regarding Comparative Advertising](https://www.ftc.gov/legal-library/browse/statement-policy-regarding-comparative-advertising) · ftc.gov
- [Google Search Central: Spam policies for Google web search (scaled content abuse)](https://developers.google.com/search/docs/essentials/spam-policies) · developers.google.com
- [W3C: Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) · w3.org

[Dardo](https://dardo.studio/) · [Services](https://dardo.studio/en/services/) · SaaS website design

## Related work

[![Hyper product website designed and built by Dardo](https://dardo.studio/work/hyper-1.webp?v=5726a67d1048) · Delivered product story / AI software · **Hyper** · A scroll-driven homepage that explains an AI customer-intelligence product through one customer instead of a list of features. · See the project](https://dardo.studio/en/work/hyper/)

## From a product to a site that sells it

A useful estimate starts with your sales motion, pricing model, page types and the tools behind signup. Inspect a product story we built, then send your brief for a written proposal.

[01 · **See a product story** · Hyper](https://dardo.studio/en/work/hyper/) · [02 · **Compare adjacent scope** · Product design for the app itself](https://dardo.studio/en/services/product-design/) · [03 · **Request a proposal** · Send your product, pricing and launch date to Dardo](https://dardo.studio/en/contact/?service=saas-website-design)

## Keep exploring.

- [![Hyper — website preview](https://dardo.studio/_astro/01M4H70HD3NW1PAQM0M1QWWAAR_ZfRO4A.webp) · Case study · **Hyper — web design case study**](https://dardo.studio/en/work/hyper/)
- [Service · **Product design and UX/UI for web apps and SaaS**](https://dardo.studio/en/services/product-design/)
- [Service · **Web app, SaaS and MVP development**](https://dardo.studio/en/services/web-app-development/)

- [Service · **Conversion rate optimization (CRO) services**](https://dardo.studio/en/services/conversion-rate-optimization/)