pricing-table-design

name	pricing-table-design
description	Use when designing or auditing a SaaS pricing page. Covers the canonical 3–5 tier layout, featured-tier highlighting, per-feature comparison, monthly vs annual toggle patterns, overage handling, and the mistakes that kill conversion.

Pricing Table Design

The pricing page is the second-most-trafficked marketing page. Most SaaS pricing pages convert poorly because they're optimized for the company's needs, not the buyer's.

Canonical structure

Most successful pricing pages have:

1. Header section — "Honest pricing. No 'contact sales.'"
2. Toggle (optional) — monthly / annual with annual = X% off badge
3. 3–5 tier cards in a row with one featured
4. Feature comparison table below (for buyers in research mode)
5. FAQ section below that
6. Final CTA ("Start free" or "Talk to us")

Number of tiers

Count	When it works
2	Free + Paid (consumer)
3	Standard SaaS (Starter / Pro / Enterprise)
4	When you have a clear free tier on top of 3 paid
5+	Only with multi-audience pricing (e.g., Direct + Partner)

3 is the sweet spot. More than 5 = decision paralysis.

Featured tier

Highlight one tier:

• Different border color
• "Most popular" or "Recommended" badge
• Slightly larger or elevated card
• Different background tint
• Solid CTA (vs ghost on others)

Pick the tier you actually want most customers to buy. Usually the middle.

Toggle patterns

Monthly/annual toggle should:

• Default to annual (anchors to higher MRR / discount)
• Show explicit savings ("Save 15%")
• Animate price change smoothly
• Display monthly equivalent under annual ("$199/mo billed annually")

Pricing display

• Big price number (48px+)
• Smaller "/mo" suffix
• Annual price displayed as monthly: "$199/mo, billed annually as $2,388"
• Strikethrough crossed-out prices for promo, used sparingly

Per-tier feature list

• 5–9 bullet points per tier
• Each line starts with "✓ " or a check icon
• Lower tiers show what they include, NOT what they're missing
• Upper tiers say "Everything in [lower tier], plus..."

Overage pricing

If pricing has overage (e.g., per-truck above 50):

• Show base price prominently
• Show overage rate in subtext: "$7/truck/mo above 50"
• Optional: ROI calculator that lets buyer estimate their actual bill

Pricing comparison table (below cards)

For buyers in research mode, a feature matrix:

• Rows = features
• Columns = tiers
• ✓ / — for binary; specific value for quantitative ("10GB / 100GB / Unlimited")
• Sticky header row when scrolling

Common mistakes

• "Custom" pricing on enterprise without any range — buyer can't research without a call
• Hiding pricing behind a form — kills trust, signals you're expensive
• Tiers named cryptically ("Spark / Forge / Apex") — buyer can't tell which is bigger
• Price cliffs (jump from $299 → $999 between tiers) → arbitrary, predatory
• Annual-only with no monthly option — limits trial users

Where this fits in X3 Compass

X3 Compass pricing uses 5 tiers (Free / Starter / Pro / Enterprise / Partner). Pro is featured. Pro includes 11–50 trucks with $7/truck overage above 50 — no cliff. Partner is segregated visually (violet vs teal).