Designing a pricing page people understand

By the time a visitor reaches your pricing page, they are interested. They have read enough to want to know what it costs and which option suits them. This is the moment where a confusing layout can undo all the work your home page and sales page have done. If they cannot tell the plans apart, or cannot work out what they will be charged, many will leave to “think about it” and never come back.

The words and numbers on the page matter, and we cover how to state them honestly in presenting your prices clearly. This article is about layout: how to arrange plans, features and questions so the page guides people to a confident decision.

Start with the decision you want to make easy

A pricing page exists to help a visitor choose. Before arranging anything, write down the choice in plain terms. For a hypothetical language-learning site, it might be:

Most people should choose Learner, which includes all courses and weekly conversation classes. Beginners who only want self-study can choose Starter. Serious learners who want one-to-one tutoring should choose Fluent.

If you cannot write that sentence, the problem is not the design. It is the tiers themselves, and the advice in designing membership tiers that make sense will help you sort them out first. Once you can write it, the page's job is to communicate that sentence visually.

Lay out plans side by side, in a sensible order

For two to four plans, the familiar layout of side-by-side cards or columns works well because visitors already know how to read it. Each card should contain, in the same order:

1. The plan name
2. A one-line description of who it is for
3. The price and billing period
4. The three to five most important things included
5. A button

Keeping the same order on every card lets people compare with a glance across the row. Order the plans consistently too, usually from lowest to highest price, left to right.

Name plans for the member, not the metal. “Starter, Learner, Fluent” tells a language student something about each plan. “Bronze, Silver, Gold” tells them only which one costs most.

Highlight one plan, and say why

Most visitors appreciate a recommendation. Visually highlight the plan that suits most people, with a slightly larger card, a border in your accent color or a label such as “Best for most learners.” Only use “Most popular” if it is true.

The label works better with a reason. “Recommended: includes weekly live classes, the fastest way to start speaking” helps someone decide. A bare badge only tells them which one you would like them to buy.

Highlight only one plan. Two highlighted plans cancel each other out.

Handle monthly and annual billing clearly

If you offer monthly and annual billing, a switch above the plans is the usual pattern. Make sure it is obvious which option is selected, and that the prices change visibly when it is switched. Show annual prices in a way that cannot mislead: if you show a monthly equivalent, show the total charged per year right beside it.

Here is how the recommended card might read, using round example figures:

Learner — for learners who want to start speaking

$20 a month, or $200 a year (two months free)

All courses, weekly group conversation classes, pronunciation feedback, member forum

Button: Choose Learner

For more on the choice between billing periods and how to present the saving, see our guide to offering monthly and annual plans.

Put the comparison and the questions below the cards

Cards show the headline differences. Some visitors want detail, and a full comparison table below the cards serves them without cluttering the top of the page. Keep the table focused on meaningful differences. A long list of rows where every plan has a tick adds length without helping anyone decide.

Group the rows under headings such as Courses, Live classes and Support, and use plain labels. “Two one-to-one tutoring sessions a month” is clearer than “Premium tutor access.”

Then add a short set of frequently asked questions directly below. The best questions to include are the ones that make people hesitate at the point of paying:

• Can I switch plans later?
• How do I cancel, and will I be charged again?
• Is there a trial or a guarantee?
• Do prices include tax?
• Can my employer pay, and will I get an invoice?

Answering these beside the price, rather than on a separate help page, keeps people on the page at the moment they are deciding.

Make it work on a phone

On a phone, side-by-side cards usually stack into a single column, which can push the recommended plan far down the page. Check the order carefully. Many sites show the recommended plan first on mobile, or let visitors swipe between cards. Wide comparison tables are another problem on small screens; consider collapsing each plan's details into its own expandable section instead. Whatever you choose, make sure each plan's price and button are visible together, without scrolling between them.

Review your pricing page

Look at your current pricing page and work through these steps:

1. Write the one-sentence recommendation. If you cannot, simplify the tiers before redesigning.
2. Check that every card follows the same order: name, audience, price, key features, button.
3. Rename plans so each name suggests who it is for.
4. Highlight one plan, and give a reason.
5. If you show annual pricing, make sure the yearly total is visible.
6. Move detailed comparisons into a table below the cards, and remove rows that do not differ.
7. Add the questions people ask you most often at the point of paying.
8. Check the page on a phone, including the order of the stacked plans.

Then ask two or three people who have never seen the page which plan they would pick and why. If their reasons match your one-sentence recommendation, the layout is doing its job.