The pricing page on a SaaS website serves a different purpose from most other pages. Visitors arrive with buying intent, and the page either moves them towards sign-up or sends them to a competitor. For a SaaS founder or operations manager, the pricing page is also a technical component: it needs to reflect the actual billing configuration, handle currency and tax correctly, and stay in sync with any changes to plans or add-ons.
Presentation is separate from pricing strategy. The question of whether to charge per seat, per usage or a flat monthly fee is a model decision covered elsewhere. This guide assumes you have already settled on a structure — tiers, metered components, or a combination — and focuses on how to display that structure clearly on the page.
There are three practical pressures that shape pricing-page design. First, buyers compare options quickly and will leave if they cannot understand the difference between tiers within seconds. Second, the page must not create a support burden — if every prospective customer emails to ask what is included, the presentation has failed. Third, the page needs to be accurate: a price shown on the website that does not match what the billing system charges will erode trust immediately.
| Stage | Decision or action | Evidence to retain |
|---|---|---|
| Who the page needs to serve | Most SaaS products have at least two distinct buyer profiles visiting the pricing page. | There is the self-serve buyer — typically a smaller team or individual who wants to pick a tier, enter card details and start. |
| Tier layout and visual hierarchy | The most common layout presents tiers as side-by-side columns. | The recommended tier — often labelled "Popular" or "Most chosen" — is visually emphasised with a border, background colour or slight vertical offset. |
| Feature comparison tables | A comparison table below or alongside the tier cards lets buyers check specific capabilities. | The table should list features that actually differ between tiers. |
| Annual versus monthly pricing | Many SaaS businesses offer a discount for annual billing. | The standard presentation is a toggle at the top of the pricing section that switches all displayed prices between monthly and annual figures. |
Who the page needs to serve
Most SaaS products have at least two distinct buyer profiles visiting the pricing page. There is the self-serve buyer — typically a smaller team or individual who wants to pick a tier, enter card details and start. Then there is the procurement-driven buyer, who needs a clear summary to put into an internal approval process or to compare against a shortlist. The same page must work for both, which is why feature comparison tables and exportable summaries are common patterns.
Tier layout and visual hierarchy
The most common layout presents tiers as side-by-side columns. The recommended tier — often labelled "Popular" or "Most chosen" — is visually emphasised with a border, background colour or slight vertical offset. This anchoring technique reduces decision time but only works if the highlighted tier genuinely matches the majority of your customers. If most users end up on the lowest tier, highlighting the middle one creates friction rather than guidance.
For products with more than four tiers, a horizontal card layout becomes difficult to read on smaller screens. Some SaaS businesses switch to a stacked layout or a selectable comparison tool at that point. The practical test is simple: open the page on a 13-inch laptop screen and check whether every tier's price and primary differentiator are visible without scrolling horizontally.
Feature comparison tables
A comparison table below or alongside the tier cards lets buyers check specific capabilities. The table should list features that actually differ between tiers. Including rows where every column shows the same tick mark adds visual noise without helping the decision. Group features into logical categories — "Core features", "Integrations", "Support" — rather than presenting a flat alphabetical list.
Be explicit about what is not included. A dash or "Not available" is more useful than a blank cell, which buyers may interpret as an oversight. If a feature is available as an add-on, note that rather than leaving it ambiguous.
Annual versus monthly pricing
Many SaaS businesses offer a discount for annual billing. The standard presentation is a toggle at the top of the pricing section that switches all displayed prices between monthly and annual figures. Two points matter here. The annual price should be clearly described — "billed annually" or "£X per month, billed yearly" — so there is no confusion about whether the figure shown is a monthly equivalent or a total. Second, the toggle state should persist if the user navigates away and returns, or at minimum default to whichever option generates more conversions for your product.
Currency and VAT for UK businesses
If you sell to UK businesses, the question of VAT arises quickly. Prices displayed should state clearly whether they are inclusive or exclusive of VAT. For B2B SaaS where most customers are VAT-registered, showing prices exclusive of VAT with a note is common, but this depends on your customer mix. If you sell to a mix of businesses and consumers, or if you sell into multiple jurisdictions, the presentation may need to adjust based on the buyer's location — which is a billing-system configuration question as much as a design one.
Enterprise and custom pricing
Many SaaS products include a "Contact us" or "Custom" tier alongside self-serve options. The practical risk is that this becomes a catch-all that provides no information. At minimum, list the capabilities that differentiate the enterprise tier — dedicated support, SLA terms, custom integrations, data residency options — so the buyer understands what they are enquiring about. A vague "Enterprise" card with no detail signals that pricing is negotiable in a way that makes procurement teams suspicious rather than curious.
Connecting the page to the billing system
The pricing page is not static copy. Prices, feature lists and plan names should ideally be drawn from the same configuration that the billing system uses, or at minimum be updated through a process that prevents drift. When a plan price changes, the website, the checkout flow and the invoice template all need to update together. If your pricing page is hard-coded HTML while your billing lives in a separate platform, build a clear checklist into any price-change process to ensure nothing is missed.
Trial and free-tier presentation
If you offer a free trial, the pricing page needs to explain what happens when it ends. "Start free trial" is a clear call to action; what is less clear is whether the user will be charged automatically, whether they will be downgraded to a free tier, or whether they will lose access. State the post-trial behaviour on or adjacent to the pricing page. If you offer a perpetual free tier, distinguish it visually from paid tiers so buyers do not assume it is a time-limited trial.
Hiding pricing entirely
Some B2B SaaS businesses remove pricing from the website entirely, replacing it with a "Contact sales" form. This can be appropriate for highly customised enterprise products, but for products with self-serve sign-up it adds unnecessary friction. The middle ground — showing tiered pricing for standard plans and "Contact us" only for enterprise — usually serves both buyer types better.
Too many tiers
More than four or five visible tiers tends to cause decision paralysis rather than a sense of choice. If your billing system supports many plan variations, consider whether all of them need to be presented on the public page. Some can be offered as add-ons or discussed during the sales process for larger accounts.
Inconsistency between page and product
If the pricing page lists a feature called "Advanced reporting" but the product interface labels it "Analytics dashboard", buyers who sign up expecting the former will feel misled even if the functionality is identical. Feature names should match between the pricing page, the product itself and any marketing materials. This is a content-governance issue that becomes more acute as the product evolves.
Forgetting mobile users
Pricing tables that work well on desktop can become unreadable on a phone screen. Horizontal scrolling is a poor experience for comparison. Test the pricing page on a mobile device and check whether a buyer can understand the tier differences and see the call-to-action button without pinching or scrolling sideways.
Key checks before publishing or updating
- Do the prices on the page match the billing system's current configuration?
- Is it clear whether prices include or exclude VAT?
- Does each tier have a distinct, understandable differentiator?
- Are feature names consistent with the product interface?
- Is the post-trial or post-free-tier behaviour stated?
- Does the page render correctly on mobile devices?
- Is the "Contact us" tier, if present, descriptive enough to be useful?
- Has someone unfamiliar with the product reviewed the page for clarity?
Pricing presentation is not a one-time design task. As plans change, features are added and customer segments shift, the page needs regular review against the checks above. The goal is straightforward: a prospective customer should be able to identify the right plan, understand what it costs and start the sign-up process without needing to contact support.