Six weeks after launching a SaaS pricing page I was genuinely proud of, the client called me. Conversions were running at roughly half what we'd seen with their old, ugly, cobbled-together pricing section. The old page had mismatched fonts, inconsistent card sizes, and a CTA button in a color that wasn't even in their brand guide. Mine had none of those problems. It was clean. It was polished. It had a proper typographic scale, consistent spacing, a highlighted "recommended" plan — all the things you're supposed to do.
And it was failing quietly, in a way that took me an embarrassingly long time to diagnose correctly.
This is a walkthrough of what I got wrong, how I found it, and what the actual fixes looked like. Not the fixes you'd expect from a "10 pricing page best practices" listicle — the specific, contextual decisions that were wrong for this product and this audience.
The Setup: What the Page Actually Looked Like
The client ran a B2B project management tool aimed at small agencies and freelancers in Indonesia. Three pricing tiers: Starter (free), Pro (Rp 199,000/month), and Business (Rp 499,000/month). Standard stuff. The page I built followed a pattern I'd used before successfully — three side-by-side cards, the middle plan visually elevated with a distinct background color, a feature comparison below the fold, and a FAQ section at the bottom.
On desktop it looked exactly like a modern SaaS pricing page should. Cards had 8-point consistent spacing (a habit I've written about before). The "Pro" card had a subtle drop shadow and a highlighted border. The CTA buttons were large, had enough contrast, and were clearly labeled. By every design checklist I knew, the page was solid.
But when I watched session recordings through Microsoft Clarity — which we had running on the site — something immediately stood out. Users were scrolling down to the feature comparison table, spending time there, then scrolling back up, hovering over the cards again, and then… leaving. The pattern was consistent across dozens of sessions. They were doing work. The page was making them do work it should have been doing for them.
The Real Problem: I Had Hierarchy Without Clarity
Here's what I initially got wrong in my diagnosis. I thought the problem was the feature table — too long, too much information. So I trimmed it. Cut about 30% of the rows. Conversions barely moved.
The real problem was upstream. The visual hierarchy on the page told users what to look at in the wrong order. It said: look at the plan names, look at the prices, look at this recommended badge, now look at the features. What it failed to say — clearly, immediately, without scrolling — was: here's which plan matches what you're trying to do.
The "Pro" plan was highlighted because it was the most profitable tier. Not because it was right for the most common user type visiting the page. Agencies landing from their Google Ads traffic were typically 2–5 person teams who needed the Pro plan. Freelancers coming in from organic were often fine with Starter. But the page didn't acknowledge either of those people. It just pointed a big arrow at "Pro" and said "this one."
When users couldn't quickly locate themselves in the options, they fell back to the feature table trying to figure it out manually. That's the tell. A feature table should be a confirmation tool — "yes, this plan has what I need" — not a decision tool. I had accidentally made it the primary decision-making interface.
The Session Data That Made It Undeniable
I pulled heatmap data from Clarity and cross-referenced it with our analytics. A few things stood out:
- The "Recommended" badge on the Pro card was getting looked at, but users were clicking the Starter CTA most often — even users who had spent significant time on the page. This suggested they weren't confident the Pro plan was actually right for them, so they defaulted to the safe (free) choice.
- The FAQ section at the bottom had almost no engagement. Users weren't making it there. They were bouncing or converting before that point.
- On mobile — which accounted for about 38% of traffic — the three-card layout was stacking vertically, which meant the "recommended" Pro card appeared second in the DOM order. Users were seeing Starter first, and Starter's free positioning was anchoring their perception of value before they even got to Pro.
That last point was particularly painful because I thought I'd accounted for mobile. I had. I just hadn't thought through the psychological effect of DOM order on anchoring.
The Fixes: What Actually Moved the Number
1. Lead With the User's Situation, Not the Plan Name
Above the pricing cards, I added a short decision primer. Not a feature list — literally two or three sentences for each common user type: "Running a freelance operation solo? Starter covers everything you need. Leading a team of 2–10? Pro gives you client workspaces and approval flows." Nothing fancy. Just an explicit match between user context and plan.
This reduced the time users spent in the feature table noticeably. They were arriving at the cards with a hypothesis already formed, and using the table to confirm rather than discover.
2. Reframe What "Recommended" Means
I changed the badge copy from "Recommended" to "Best for growing teams." Subtle shift, but it does different work. "Recommended" is vague — recommended by whom, for what? "Best for growing teams" is a claim users can evaluate against their own situation. If they're a growing team, great. If they're a solo freelancer, they're not confused by it — they self-select out, which is exactly what you want.
3. Fix the Mobile Stack Order
This was a CSS fix, not a design fix. On mobile, I used CSS order to push the Pro card to the top of the vertical stack, even though it sat in the middle in the desktop three-column layout. One targeted media query. The anchoring effect immediately shifted — users were seeing the "serious" option first, which reframed Starter as the lighter-weight alternative rather than the default.
@media (max-width: 768px) {
.pricing-card--starter { order: 2; }
.pricing-card--pro { order: 1; }
.pricing-card--business { order: 3; }
}4. Ruthlessly Reduced the Feature Table
The second time I trimmed the feature table, I did it with a different question in mind. Instead of "what can I remove?" I asked "what are the actual decision-making differentiators between these plans?" The answer was five things, not twenty-two. I cut everything that was the same across all plans (table rows that were all checkmarks give users no signal), and cut features that only technically-minded users would care about at the decision stage.
What remained: client workspaces, team member limits, approval workflows, export formats, and priority support. Those are the five things that separate the tiers in ways that matter to the user types coming to this page. Everything else went into a "full feature comparison" expandable section below.
5. Rewrite the CTA Copy Per Plan
Every card had the same "Get Started" CTA. I changed them to match the plan context: "Start Free — No Card Needed" for Starter, "Start 14-Day Free Trial" for Pro, and "Contact Us for Business" for the top tier (which required a sales conversation anyway). The Starter CTA change in particular mattered — "Get Started" felt like it might require a credit card. "No Card Needed" is an objection eliminated in four words.
This kind of microcopy intervention is small-looking but high-leverage. I've seen it repeatedly across projects: the copy on a button isn't decoration, it's information. Users use it to calibrate risk.
What the Results Looked Like
Over the four weeks following these changes, the Pro plan conversion rate increased by about 34% compared to the previous four weeks. More importantly, the ratio of Starter-to-Pro conversions shifted: we weren't just getting more total signups, we were getting a higher proportion of paid conversions. The client's churn data a couple of months later also looked healthier — users who converted were more likely to be in the right plan for their use case, which meant fewer "I didn't realize this was limited" cancellations in week three.
None of these fixes required a design system overhaul. The visual design of the page barely changed. What changed was the informational logic — the sequence in which the page surfaced things, the words it used to frame choices, and the assumptions it made about what users already knew when they arrived.
The Lesson I Keep Relearning
Pricing pages are not display cases. They're decision environments. Your job is not to present all the information — it's to build a path from "I'm curious" to "I'm confident" that requires as little effort from the user as possible. Hierarchy is only useful if it's arranged around the user's decision-making sequence, not around what you want them to notice.
The painful irony of this project is that the old, ugly page was probably doing a better job of this by accident. It was so undesigned that users had to engage with the text — there was nothing visual to distract them. My polished version created a beautiful experience that paradoxically demanded more cognitive work.
If you've ever run into a similar situation where a redesign performed worse than the thing it replaced, I'd look at session recordings first, feature table engagement second, and mobile DOM order third. Those three things, in my experience, reveal the problem faster than any A/B test will. Tests tell you which version wins. Recordings tell you why.
Frequently Asked Questions
What's the most common mistake designers make on pricing pages?
The most common mistake is treating all information as equally important — cramming features, prices, CTAs, and fine print into the same visual weight. Users need a clear visual path from "what does this cost?" to "which one is right for me?" to "how do I start?" When everything competes for attention, nothing wins.
How do you decide which pricing plan to visually highlight?
Highlight the plan that's best for your most common user type, not necessarily your most profitable one. If you push users toward a plan that's wrong for their needs, they churn faster. Talk to your actual users, look at your conversion-to-retention data, and let that determine which plan gets the visual emphasis treatment.
Should pricing pages show all features or just key differentiators?
Show key differentiators between plans, not exhaustive feature lists. Long feature tables create cognitive overload and actually slow decision-making. Lead with the two or three capabilities that genuinely separate each tier, and offer an expandable "see all features" section for users who want the full picture.
