| 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:
- Header section — "Honest pricing. No 'contact sales.'"
- Toggle (optional) — monthly / annual with annual = X% off badge
- 3–5 tier cards in a row with one featured
- Feature comparison table below (for buyers in research mode)
- FAQ section below that
- 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).
