SaaS Pricing Page Design Guide - The Page That Makes or Loses You Money

Your pricing page is the single highest-leverage page on your website. It's where interest becomes revenue.

• It converts. Users who reach pricing pages convert at 5-10x the rate of users browsing blog content.
• It qualifies. Pricing filters out users who aren't a fit, saving sales time.
• It positions. Pricing signals your place in the market — premium, mid-market, SMB.
• It sets expectations. The pricing page shapes customer satisfaction post-purchase.

Yet most SaaS pricing pages fail at their job. They're cluttered, confusing, or hide pricing behind "Contact Sales."

This guide covers everything from pricing strategy to visual design, including 8 detailed pricing page teardowns.

Who this is for: SaaS founders, product marketers, UX designers, and growth teams responsible for pricing page conversion.

A complete SaaS pricing page includes:

1. Page Header & Value Proposition

What goes here:

• Page title ("Pricing" or "Plans & Pricing")
• Subheading that reinforces the value ("Simple pricing that grows with your team")
• Brief social proof (e.g., "Trusted by 10,000+ teams")

Avoid:

• Long marketing copy before getting to the actual prices
• Vague headers like "Find Your Plan"

2. Billing Frequency Toggle

Essential for most SaaS: Monthly vs. Annual billing toggle.

Design considerations:

• Position prominently (near the top of the pricing section)
• Show the discount clearly ("Save 20%" or "2 months free")
• Default to annual (shows lower per-month price, aligns with user behavior)

3. Tier Cards

Each tier card includes:

• Tier name ("Starter," "Pro," "Business")
• Tier description (1-2 sentence description of who it's for)
• Price (large, prominent)
• Billing cycle ("per month," "per user per month," "per year")
• Primary CTA ("Start Free Trial," "Get Started," "Contact Sales")
• Feature list (key features included in this tier)
• Highlight badge (for the recommended tier — "Most Popular" or "Best Value")

4. Recommended Tier Highlighting

How to highlight:

• Larger card size (scaled up 5-10%)
• Different background color or accent border
• "Most Popular" or "Recommended" badge at the top
• Slight elevation (shadow)
• Different CTA color (the most prominent action button)

Why: Users want guidance. Without a recommended tier, they suffer decision paralysis.

5. Feature Comparison Table

Below the tier cards: A detailed comparison of features across all tiers.

Structure:

• Features listed vertically on the left
• Tiers as columns on the right
• Checkmarks (✓) and X marks or "—" for features included/excluded
• Optional: Feature values instead of checks ("10 GB" vs "100 GB" vs "Unlimited")

Best practices:

• Group features into logical categories (e.g., "Core Features," "Collaboration," "Admin," "Support")
• Don't list every feature — focus on the ones that differentiate tiers
• Use tooltips for features that need explanation

6. FAQ Section

Always include: Users have questions. Answer them on the pricing page so you reduce friction and support requests.

Common SaaS pricing FAQs:

• What happens when my trial ends?
• Can I change plans later?
• Do you offer discounts for nonprofits / students / startups?
• What payment methods do you accept?
• Can I cancel anytime?
• Is there a setup fee?
• Do you offer refunds?
• What's included in support?

Recommended: 8-12 FAQs. More than that feels overwhelming.

7. Trust Signals / Social Proof

What to include:

• Customer logos (especially recognizable brands)
• Testimonials with photos, names, and titles
• Specific metrics ("4.8/5 on G2" or "Used by 10,000+ teams")
• Security/compliance badges (SOC 2, GDPR, ISO 27001, HIPAA)
• Certifications and awards

Placement: Distributed throughout the pricing page — not crammed into one section.

8. Enterprise / Custom Pricing CTA

For B2B SaaS with enterprise tier:

• "Contact Sales" or "Talk to Sales" clearly visible
• Can be its own card (4th tier) or a separate section below tier cards
• Include what enterprise adds: SSO, custom contracts, dedicated support, custom integrations, SLA guarantees

Avoid: Making "Contact Sales" the only option (unless you're truly enterprise-only).

9. Money-Back Guarantee / Risk Reversal

Common patterns:

• "14-day free trial, no credit card required"
• "30-day money-back guarantee"
• "Cancel anytime, no questions asked"

Placement: Near the primary CTA buttons and in the FAQ section.

10. Clear CTA Per Tier

Different tiers may have different CTAs:

• Free tier: "Get Started Free"
• Starter: "Start Free Trial"
• Pro (recommended): "Start Free Trial" (most prominent)
• Enterprise: "Contact Sales"

Rules:

• CTAs are verbs that describe the action
• Avoid generic "Get Started" for everything
• Visual distinction between the recommended tier's CTA and others

11. Secondary Content Below the Fold

Below the main pricing section, include:

• Expanded feature comparison (full list)
• Additional FAQ
• Customer testimonials or case studies
• Integration logos
• "Why choose us" differentiators
• Final CTA ("Still have questions? Talk to us")

Let's analyze 8 well-known SaaS pricing pages and what each does well.

1. Notion

What works:

• Clear 4-tier structure: Free / Plus / Business / Enterprise
• Prices start low ($0 free tier sets an anchor of "it's accessible")
• Transparent pricing — no "Contact Sales" until Enterprise
• Billing toggle (Monthly/Yearly) prominent
• Feature comparison table is clean and comprehensive

What to learn:

• Starting with a robust free tier that delivers real value builds trust and adoption
• The 4-tier structure works when tiers are distinctly different (individual → small team → business → enterprise)

2. Linear

What works:

• Minimalist design — extreme focus on essential information
• Clear pricing per user ($8/mo, $16/mo)
• Billing toggle (Monthly / Yearly, showing ~20% savings)
• Concise feature lists (doesn't overwhelm)
• Typography is gorgeous and hierarchy is perfect

What to learn:

• Minimalism can be powerful — don't add information that doesn't serve the decision
• Per-user pricing is clear and predictable for buyers

3. Stripe

What works:

• Usage-based pricing clearly explained
• No tier confusion — one primary rate for everyone (2.9% + 30¢)
• Enterprise-like options clearly separate (volume discounts, custom pricing)
• Calculator tool embedded to estimate costs
• Extensive FAQ

What to learn:

• For usage-based products, transparency is everything
• A pricing calculator reduces friction for users with variable usage

4. Figma

What works:

• 4-tier structure with clear segmentation (Starter / Professional / Organization / Enterprise)
• "Most Popular" highlighting on Professional tier
• Clear feature comparison showing what each tier adds
• Prominent annual/monthly toggle with savings shown
• Strong social proof at the bottom

What to learn:

• Highlight the recommended tier prominently
• Show savings from annual billing clearly (a visual "Save 25%" badge)

5. HubSpot

What works:

• Products split by function (Marketing Hub, Sales Hub, etc.) with their own pricing
• Freemium plan available for each
• Clear enterprise positioning
• Bundle discounts for multiple hubs shown

What to learn:

• For broad product portfolios, split pricing pages by product is clearer than one mega-table
• Freemium + clear upgrade path works well

6. Basecamp

What works:

• Radically simple: one flat price ($299/mo for unlimited users)
• "No per-user pricing" as a differentiator
• Clear explanation of why their pricing is different
• Strong founder voice (Basecamp's philosophy about SaaS pricing)

What to learn:

• Counter-positioning (being different from competitors) can be a pricing advantage
• Simple pricing signals simple product — works for specific positioning

7. Intercom

What works:

• Product-based pricing (different pricing for different products)
• Clear tier differentiation
• Interactive pricing calculator
• Strong enterprise positioning

What to learn:

• Interactive calculators help when pricing depends on multiple variables
• Enterprise tier should feel clearly different, not just more expensive

8. Mailchimp

What works:

• Free tier is generous and well-defined
• Usage-based tiers (based on number of contacts)
• Clear upgrade prompts as users outgrow their tier
• Billing frequency options clearly shown

What to learn:

• Usage-based tiers work well when a clear usage metric drives value
• Let users start free and graduate naturally to paid tiers

A/B Tests Worth Running

In order of typical impact:

1. Recommended tier selection Test which tier is labeled "Most Popular." Default middle tier, but test others.

2. Pricing presentation

• "$29/mo" vs. "$348/year"
• Ending in 9 (e.g., $29) vs. round numbers (e.g., $30)

3. Annual billing default vs. monthly default Default to the option you want more users to take (usually annual).

4. CTA button copy "Start Free Trial" vs. "Get Started" vs. "Try [Brand] Free"

5. Number of tiers Test 3 vs. 4 tiers (or consolidate/split).

6. Feature comparison format

• Detailed table with checkmarks
• Expandable sections per tier
• Bullet points within each tier card only

7. Social proof placement Above the fold vs. below pricing cards vs. distributed throughout.

8. Trial length 7 days vs. 14 days vs. 30 days (shorter trials often convert better — creates urgency).

• Price Intelligently / ProfitWell research on SaaS pricing
• Patrick Campbell, "Pricing SaaS Products"
• Kyle Poyar, "Pricing Strategy for SaaS"
• ChartMogul research on SaaS pricing
• Baymard Institute pricing UX research
• Intercom research on SaaS pricing

Created by Desisle — SaaS UI/UX Design Agency desisle.com | hello@desisle.com Free to use and share with attribution.

For a custom pricing page design and conversion optimization project, contact us at hello@desisle.com.