Most developers build their pricing page the way they'd build an API reference: three columns, the same fields in each, every cell filled in, perfectly even. It feels honest. It feels neutral. You laid out the facts and you let the buyer decide. That neutrality is exactly why the page converts badly.
A pricing page is not a table. It's a decision, and right now you've outsourced the entire decision to a stranger who has been on your site for ninety seconds and does not want to do math. Three identical columns force them to compare every line themselves, hold three sets of features in their head at once, and somehow arrive at a confident choice. They won't. Faced with that much undirected work, the most common thing a visitor does is nothing.
Here's the layout I see on nine out of ten developer-built SaaS sites. Three cards, equal width, equal weight. Same border, same background, same button. A title, a price, and a vertical list of features under each. Often a literal checkmark grid: feature names down the left, three columns of green ticks and grey dashes to the right.
It looks complete. It looks fair. It's a wall.
The problem is that you've built a comparison engine and asked the visitor to be its CPU. Every cell is the same visual weight, so nothing tells them where to look. There's no recommended option, so the page implies all three are equally good — which means the buyer has to derive the answer from scratch. And the moment a decision requires real effort with no guidance, the brain's default is to defer it. Not "buy the cheap one." Defer. Close the tab. Maybe later.
Treating every tier identically isn't neutrality — it's a refusal to have an opinion. You know your product better than the visitor does. You know which plan fits most people. Hiding that knowledge behind a symmetric grid isn't fairness; it's making the customer do your job.
This is also where The Competence Tax comes due hardest. A buyer is at the pricing page because they're about to hand you a credit card. If this is the page that finally looks unconsidered — generic columns, a flat grid, no point of view — they read it as a signal about the product behind it. The page where you ask for money is the worst possible place to look like you didn't try.
Founders agonize over the numbers. Nineteen or twenty-nine. Monthly or annual. Three tiers or four. Those matter, but they're the part you can change in a deploy. The harder, more durable problem is the design of the decision — and that's what this chapter is about.
A good pricing page does work on the visitor's behalf. It says, in effect: most people like you choose this one, here's why, and here's the button. It removes options that don't apply, collapses the comparison to the few lines that actually differ, and points clearly at a default. It's a recommendation with a price attached, not a spreadsheet.
Design the pricing page so the plan you want most people to choose is the obvious default — visually and structurally. Highlight it, recommend it by name, and anchor it between a cheaper option below and a pricier option above. The buyer should be able to pick it without comparing anything; the other two tiers exist mainly to make the middle look correct.
MMO reframes the whole page. You're not presenting tiers; you're staging one choice and surrounding it with context that makes that choice feel obvious. The cheaper plan makes the middle look like a deal. The pricier plan makes the middle look reasonable. The highlight, the badge, and the button make the middle look chosen-already.
A pricing page is a recommendation with a price attached, not a spreadsheet.
This is the same instinct as One Loudest Thing, pointed at commerce. Every screen has exactly one element that's allowed to be the loudest. On a pricing page, that element is the plan you want sold. If all three tiers shout equally, none of them shout — and the visitor hears silence where a recommendation should be.
Start with three tiers. Not because three is magic, but because three is the smallest number that lets you anchor. With two plans, the visitor compares cheap-versus-expensive and usually talks themselves into cheap. With three, you can position the one you actually want as the sensible middle — flanked, defended, framed.
The mechanism is the decoy effect, and you can use it without being slimy. Price and scope your top tier so it makes the middle tier look like the obvious value. Consider a typical case:
Starter $9/mo 1 project, basic features
Pro $29/mo 10 projects, everything most people need ← recommended
Business $99/mo unlimited projects, SSO, priority support
The Business tier isn't there only to be bought. It's there to make $29 feel modest. Against $99, the Pro plan reads as restrained and reasonable; against $9 alone, it might have read as expensive. The top tier reframes the middle. That's anchoring, and it's doing honest work — Business is a real plan some teams genuinely need.
There's a clean line between anchoring and lying. A high tier that some customers genuinely buy is fair framing. A fake tier you never expect anyone to pick, priced absurdly just to manipulate the middle, is a trick — and buyers who notice it stop trusting your numbers entirely. Anchor with a plan you'd be happy to sell.
Ordering matters too. Read left to right, cheap to expensive, so the price climbs as the eye travels. Put the recommended plan in the visual center — literally the middle column — because that's where the eye lands first on a three-up layout and where "the safe choice" is expected to live. The center column is prime real estate; spend it on the plan you want sold.
Three tiers exist so you can anchor: the cheap plan makes the middle a deal, the expensive plan makes the middle reasonable, and the middle is the one you actually want chosen.
Anchoring sets up the choice. Now you have to make the recommended plan visibly, unmistakably the default. This is the part developers skip, because skipping it feels more even-handed. Don't skip it. Give the target plan a stack of advantages the other two don't have.
Badge it. A small label above or on the card — Most popular, Recommended, Best value — does enormous work. It answers the visitor's real question, which isn't "what does each plan cost" but "which one should I pick." One short phrase removes most of the paralysis.
Scale it. Make the recommended card physically bigger or lifted. Taller, slightly wider, raised with a shadow, or simply nudged up so it breaks the row. Size reads as importance before a single word is processed.
Color it. Give the chosen card your accent treatment and leave the other two neutral. A tinted background or a 2px accent border is enough. Reserve the accent for exactly one card. This is One Loudest Thing applied directly: the moment two cards wear the accent, neither one is loud.
Emphasize its button. This is the most-missed move. The recommended card gets the solid, filled, accent-colored primary button. The other two cards get outline or ghost buttons — same size and label style, but visibly secondary.
That last point is One Primary Action at the page level. A screen should have one button that's obviously the button. Three identical filled buttons are three competing primary actions, which is the same as zero. Make one solid and let the others recede.
Here's the button hierarchy in Tailwind. Same shape and padding across all three so the page stays tidy — the only difference is fill versus outline:
// Recommended card — the one primary action
<button className="w-full rounded-lg px-4 py-2.5 font-medium
bg-accent text-white hover:bg-accent/90">
Start with Pro
</button>
// Starter and Business cards — secondary, ghosted
<button className="w-full rounded-lg px-4 py-2.5 font-medium
border border-slate-300 text-slate-700
hover:border-slate-400">
Choose Starter
</button>
And the card itself — the recommended one lifts and takes the accent border, the others stay flat and neutral:
.tier {
border: 1px solid #e2e8f0; /* slate-200 */
border-radius: 12px;
padding: 24px;
background: #ffffff;
}
.tier--recommended {
border: 2px solid #6366f1; /* your accent */
transform: translateY(-12px);
box-shadow: 0 12px 28px -8px rgba(99, 102, 241, 0.25);
}
Three identical filled buttons are three competing primary actions, which is the same as zero.
When you stack these — badge, scale, color, button — the eye doesn't wander across three equal columns deciding what to weigh. It lands on the middle card, reads "most popular," sees the only solid button, and the decision is mostly made before any feature list is read. That's the page doing the work instead of the visitor.
Anchoring and emphasis aim the decision. The last job is to lower the effort it takes to act on it. Every bit of comparison work you make the buyer do is friction, and friction near a checkout is expensive.
The exhaustive checkmark grid — every feature, every tier, ticks and dashes everywhere — is comprehension overhead disguised as transparency. Most rows are identical across plans, so they carry no decision value; they just bury the three or four lines that actually distinguish the tiers.
On each card, list only what changes between plans and what matters most to the buyer. Lead each card's list with the line that justifies its existence: Starter's headline limit, the "everything in Starter, plus…" jump that defines Pro, the team feature that defines Business. If you genuinely need the full grid, put it lower on the page as a reference for the small fraction of buyers who want to audit every line — never as the primary decision surface.
Pro — $29/mo
Everything in Starter, plus:
• 10 projects (Starter has 1)
• Team members & shared workspaces
• Advanced analytics
• Priority email support
"Everything in Starter, plus…" is the most useful phrase on a pricing page. It collapses the comparison to the delta. The buyer doesn't re-read shared features three times; they read what's new and decide on that.
State the period on every price. $29/mo and $290/yr, never a bare $29 that forces the visitor to hunt for whether that's monthly. If you offer annual, show the saving in plain numbers — "$290/yr — save $58" — rather than an unexplained percentage they have to compute against the monthly rate.
The monthly/annual toggle is where developers quietly cheat, and it backfires. The pattern to avoid: default the toggle to "annual," then advertise the divided-down monthly-equivalent price in big type while the card actually bills a year up front.
Showing $24/mo in large type when the toggle is set to annual — meaning the customer is really charged $288 today — feels clever and reads as deceptive. State both numbers plainly: the per-month equivalent and the actual annual charge. A buyer who feels tricked at the price step churns fast and tells people. Honest framing at checkout is the cheapest retention you'll ever buy.
This is the right place to remember The Competence Tax one more time. Honest, legible billing isn't only ethics — it's polish the buyer can feel. Clear periods, a plain saving, no math required, no fine-print surprise: that reads as a company that has its act together, which is exactly the impression you want held at the moment of payment.
Each tier needs exactly one thing to click, and its label should name the outcome, not the mechanism. Start with Pro, Get Starter, Talk to sales — not three identical Buy now buttons, and definitely not a vague Submit. The top tier often shouldn't be a checkout at all; for a Business plan with SSO and contracts, the honest action is Contact sales, and pretending otherwise sends the wrong buyer down the wrong path.
Cut every line, number, and click that the buyer doesn't need; whatever survives is the decision, made obvious.
Decide which single plan you want most people to buy — usually the middle one. Order the cards cheap to expensive, left to right, with the target plan in the center column.
Make sure your highest tier is a plan some customers genuinely buy, priced so it makes the middle look reasonable. If the top tier only exists to manipulate, fix the lineup — anchor with something real.
Give it a badge ("Most popular"), lift it with size and shadow, and apply your accent to that one card only. When you squint, exactly one card should stand out.
Solid accent button on the recommended card; ghost or outline buttons on the other two. Label each by outcome ("Start with Pro"), not "Submit". The top tier may say "Talk to sales" instead of checking out.
On each card, list only what changes between plans and what matters most. Use "Everything in X, plus…" to avoid repeating shared features. Move any exhaustive grid below the fold as reference.
Show the period on every price and the annual saving in plain dollars. Never advertise a divided-down monthly figure while quietly charging a year up front. State both numbers.
Stop building a table and start staging a decision — the page that asks for money is the worst place to have no opinion.