Pricing page design works when a visitor can read the plans, see the prices and click one button without a second thought. Prioritise clarity over cleverness: three or four tiers, prices shown up front, strong CTAs, social proof near the decision and a layout that holds up on a phone. Below, we show the patterns worth borrowing and finish with a quick audit checklist.
- Show a real example price when costs vary instead of using a vague “starting at” label, and state the billing period and annual savings clearly.
- On phones, stacked cards are the safest default for up to four plans; tabs suit fewer, while carousels need clear swipe cues.
- Use a comparison table only when buyers need details cards cannot answer; group features, keep headers visible, and replace horizontal scrolling with mobile cards or tabs.
- Pass the selected plan, billing period, and currency into checkout or the inquiry form, then track payments or CRM leads without manual copying.
- Mark the recommended plan with text as well as colour, and ensure pricing toggles work by keyboard and announce updated prices to screen readers.
Table of Contents
- What does a high-converting pricing page need?
- Which design patterns are worth borrowing?
- How should pricing pages work on mobile?
- How many tiers should you show, and how should you phrase prices?
- How do you design a comparison table that people can use?
- Which CTAs and microcopy move the needle?
- How do you connect a pricing page to your CRM and payment gateway?
- What accessibility checks matter on a pricing page?
- How should you localise pricing for different markets and currencies?
- A pricing page audit we use
- Want us to build or fix your pricing page?
- FAQ
- Sources
What does a high-converting pricing page need?
A good pricing page tells people what they get, what it costs and why it is worth it. Figma’s pricing page guidance puts it in much the same terms, and it also stresses simple layouts and ongoing testing. Here is what we put on every pricing page we build or review:
- A value-focused headline and subheading that say who each tier is for, not just what it contains.
- Plan cards with a one-line description, a visible price and a monthly/annual toggle where both options exist.
- Trust signals such as testimonials or customer logos, placed next to the CTAs where last-minute doubt creeps in.
- A short FAQ block answering billing, trial and cancellation questions right where the buyer is deciding.
- Measurement through GA4, heatmaps and session recordings, so you change what the data points to rather than what feels wrong.
The headline is the part most people rush. “Choose your plan” says nothing. “Simple plans for small teams who want to launch this month” tells the right visitor they are in the right place.
Social proof deserves a little thought too. A wall of logos nobody recognises does less than one specific testimonial from a customer who looks like your buyer. If you need better portraits for that, a client testimonial photography session is a quick way to make founder and customer quotes feel real.
Which design patterns are worth borrowing?
Copy the intent behind a pattern, not the pixels. A layout that works for a larger software team may not suit a small service business, but the thinking underneath usually transfers. A compact gallery such as Pricing Pages is a handy place to see tier cards, comparison tables, monthly/annual switches and contact-sales options side by side. For ready-made layouts, Tailwind UI’s pricing sections cover two, three and four tiers, toggles and comparison tables.
Three patterns we reach for most often:
- Three-up or four-up tier cards with one recommended plan lifted by a contrasting badge, so the eye lands there first.
- Left-to-right ordering with an anchor. Place a higher-priced plan beside your target plan and the target looks sensible by comparison. Order also shapes where people linger, so put the plan you want chosen where attention naturally rests.
- A contact-sales card for enterprise or custom pricing, kept as the last card or a slim row under the grid so it never clutters the main choice.
Badges, small icons and short feature bullets all speed up scanning. Keep each bullet to a few words and lead with what the buyer gains.
Pro Tip: Squint at your page from arm’s length. If the recommended plan is not the first thing you see, the badge contrast is too weak.
How should pricing pages work on mobile?
Most pricing page failures on phones come from cramming a desktop grid into a narrow screen. The mobile pattern should follow the number of plans you offer. CXL’s study of mobile SaaS pricing pages found that 78% of the sites it looked at used stacked cards, while tabs appeared on 14% (averaging 2.5 plans) and carousels on 8% (averaging 5.5 plans).
- Stacked cards suit up to four plans and are the safest default.
- Tabs work well when you have fewer plans, with each tab representing one clear choice.
- Carousels can handle many plans, but need obvious swipe cues or visitors will never see the second card.
- Sticky CTAs keep the next step in reach while people scroll, with buttons large enough to tap with a thumb.
- Less copy on small screens: trim descriptions and move detail into expandable sections.
Speed matters here as well. Heavy images and scripts make a pricing page feel broken on a mobile connection, and our guide to page speed and Core Web Vitals covers how to keep the critical assets light.
How many tiers should you show, and how should you phrase prices?
Fewer choices usually win. HubSpot’s best practice round-up advises limiting choices to three or four tiers. Our rules of thumb:
- Three or four tiers, never more on the main grid.
- Whole numbers where you can, with the period spelled out (“per month”, “per user”) and annual savings shown clearly.
- No bare “starting at” labels. If a price truly varies, show a real example price so the visitor can anchor on something.
- One highlighted plan, chosen for the customer you most often serve rather than the one with the best margin.
If the plans feel hard to tell apart, the fix is usually removing a tier, not adding a feature row.
How do you design a comparison table that people can use?
A comparison table earns its place when buyers have detailed feature questions the cards cannot answer. It should be a second layer, not the first thing people meet.
- Group related features under labelled sections, so nobody hunts through forty undifferentiated rows.
- Keep the plan headers visible with a floating or fixed header, so people always know which column they are reading.
- Write short inline explanations for anything that differs. Hover-only tooltips hide exactly the detail a buyer needs and do nothing on a touchscreen.
- Rebuild it for mobile. Smashing Magazine points to horizontal-scroll tables as a primary failure point on phones, and recommends tabs, accordions or stacking so people keep their place. Repackaging the table as cards is often the cleanest answer.
If your plans differ by only a few features, skip the table and say so in the card bullets.
Which CTAs and microcopy move the needle?
Make the button obvious, and make what happens after the click equally obvious. Action-first copy (“Start your free trial”, “Get a quote”) beats vague labels, and a high-contrast colour helps. Repeat the CTA on every tier, in a sticky footer on mobile and near your social proof.
- Add microcopy that removes doubt: “billed monthly”, “money-back guarantee”, “no card needed”.
- Test one thing at a time: headline wording, recommended-badge copy, then button colour.
- Measure each change with GA4 and heatmaps before moving on.
- Keep first contact short. Every extra form field costs you a few enquiries.
Pro Tip: Write your button label so it completes the sentence “I want to…”. If it does not read naturally, rewrite it.
For more CTA wording and accessibility notes, see our website CTA examples, and for hero-to-pricing flow, our piece on high-converting landing page design.
How do you connect a pricing page to your CRM and payment gateway?
A pricing page is the front of a sales process, so what happens behind the button matters as much as the layout. The goal is that a click on a plan becomes a tracked lead or a completed payment with no manual copying in between.
Start with the plan itself. Pass the chosen plan, billing period and any currency through the link as parameters, so your checkout or enquiry form opens already knowing what the visitor picked. That removes a step and stops people choosing one thing and being billed for another.
For self-serve plans, send people straight to a hosted payment gateway checkout, and return them to a confirmation page that fires a GA4 conversion event. For higher-value or custom plans, route the form into your CRM, tag the lead with the plan of interest and trigger an instant acknowledgement by email or WhatsApp. This is the kind of job our CRM plans, Silver and Gold, are built around: every enquiry can be managed in one place.
Keep prices in one source of truth. If the pricing page, the checkout and the invoice each hold their own copy of the number, they will drift apart. Store prices once, in your billing system or a single configuration, and let the page read from it. Finally, test the whole route on a real phone, from tap to receipt, before you publish any change.
What accessibility checks matter on a pricing page?
Pricing pages are dense with numbers, colour cues and interactive controls, which is exactly where accessibility slips. A buyer who cannot read the page cannot buy from it, so treat these checks as part of conversion work, not a compliance chore.
- Contrast. Price text, badge text and button labels need enough contrast against their backgrounds. A pale grey price on white looks refined and reads badly.
- Do not rely on colour alone. If the recommended plan is marked only by a coloured outline, someone with colour blindness will miss it. Add a text label such as “Most popular”.
- Toggle controls. The monthly/annual switch must work from a keyboard, show which option is active and announce the change to screen readers, including the updated price.
- Tables. Use proper header cells so a screen reader can tell which plan a feature row belongs to. A table built from styled boxes loses all that meaning.
- Tap targets and focus. Buttons should be comfortably large and show a clear focus outline when tabbed to.
- Plain price phrasing. A clear monthly price with the billing period spelled out is easier to understand, and to hear read aloud, than a string of symbols and abbreviations.
Run through the page using only your keyboard, then again with a screen reader switched on. A brief manual review tends to turn up more than any automated checker.
How should you localise pricing for different markets and currencies?
Showing the right currency is the minimum. Showing a price that feels native to the buyer is the goal. Pick one currency per market and display it with the symbol and number format people expect there, rather than leaving visitors to convert it in their heads.
Decide early whether you set one fixed price per market or convert from a base price. Fixed local prices look cleaner and avoid awkward amounts that change with exchange rates, but they need a review now and then so they do not drift out of line. Whichever you choose, state clearly whether the price includes tax, since expectations differ between markets, and have your accountant confirm the rules for each place you sell to.
Detect location to suggest a currency, but always let people change it. A visitor travelling or using a VPN should not be stuck with the wrong figure. Keep the currency switcher visible near the plan cards, not buried in the footer.
Localise the surrounding copy too. Billing terms, refund wording and payment methods all vary, and a familiar local payment option reassures more than any badge. Keep your plan names and structure the same across markets so support and sales teams are not juggling several versions of the same offer.
A pricing page audit we use
When we review a page for a small business, we check whether the headline is clear, a price is visible, the tier count is sensible, every plan has a CTA, the page behaves on mobile, social proof sits near the buttons, and the FAQ answers real objections. Fix the weakest one first and test it. Small, steady changes beat a full redesign nearly every time, and I have rarely seen a team regret going slowly.
— Chris
Want us to build or fix your pricing page?
If you would rather hand this over, we design mobile-first pricing pages that put clear plans and clear CTAs in front of the right visitors. Here is what we can take on:
- Mobile-first, conversion-focused layouts for your plans
- Hosting and maintenance to keep the page fast and up to date
- A site audit and proposal before any build begins
You tell us about your plans, we audit your current page, then we propose either a rebuild or a set of targeted improvements. Our web design packages start at £120 per month for Starter, with Growth at £170 per month and Smart at £560 per month. Get in touch for a quote or an audit.
FAQ
How do you design a pricing page?
Start with a clear headline, three or four plan cards, visible prices and one obvious CTA per plan. Add social proof near the buttons and a short FAQ, then check how it behaves on a phone. After launch, test one change at a time.
What is a pricing page?
A pricing page is the page on your website where visitors compare your plans, see what each costs and choose one. It also has to answer the doubts that stop a purchase, such as billing terms and cancellation. For most businesses it is among the most visited pages before a sale.
How do you choose how many pricing tiers to show?
Aim for three or four. HubSpot’s guidance recommends limiting choices to that range because complex packaging confuses buyers. If you have more plans, group them or move the extras behind a contact-sales card.
What should a pricing page show instead of “starting at”?
Show a clear fixed price wherever you can. If the cost truly varies, give a real example price so visitors can judge what to expect. Vague “starting at” labels leave people guessing, and guessing usually ends in leaving.
Sources
- 9 Best Practices for Creating a High Converting Pricing Page (With Examples)
- Pricing Page Best Practices + Examples | Figma
- How to Design Mobile SaaS Pricing Pages that Don’t Suck | CXL
- Designing Effective Pricing Plans UX, Smashing Magazine
