Designing the pricing page

In short

Whoever lands on the pricing page has one clear question: “Which one suits me, and what does it cost?” The page's job is to answer it briefly and honestly.

The rules:

• Compare the plans side by side, with the same feature rows.
• Recommend one plan and write who it suits.
• With yearly billing, put the yearly total next to the monthly amount.
• If there are setup, per-user or transaction fees, show them in the table.
• State currency and tax right next to the price.
• Answer questions on cancellation, refunds and invoices at the bottom of the page.

On this page I also describe the decoy effect. A plan added to the pricing table can change the choice between the other two. You need to know where this effect helps and where it becomes deception.

The plan comparison table

The comparison table is the backbone of the pricing page. According to a 2022 Smashing Magazine article by Vitaly Friedman, users often scan the table like mowing a lawn. They read a row from left to right, move to the next and come back. In between, they go down the column of the plan they're interested in and linger there.

These rules follow from that way of reading:

• Every plan has the same rows in the same order. If “5 users” is at the top of one plan and the bottom of another, the comparison breaks.
• Plan names stay visible while scrolling. According to Friedman, users often go back to the headers to be sure they're looking at the right plan. A sticky header helps.
• Show a few key features first and open the long list on request. Splitting features into groups that open as an accordion does the same.

Keep the number of plans small. Every new column makes comparing harder. That decision time grows with the number of options is the subject of Hick's law.

Write the rows in the users' language. “1,000 automated actions per hour” means something to more people than “API rate limit: 1,000”. If the technical detail is needed, put it underneath as a short explanation.

The table on a phone

A four-column table doesn't fit on a narrow screen. Friedman advises avoiding horizontal scrolling in tables. Instead he names options such as plans as vertical cards, tabs to switch plans, or two chosen plans side by side.

On a phone I stack the cards and put the recommended plan first. The detailed feature table goes into a section that opens under each card.

Highlighting the recommended plan

Someone who sees three plans wonders: “Which one is for me?” Recommending a plan gives them a ready answer. According to Friedman, the standard or most popular plan is usually expected in the middle. In one example in the article, the most popular plan's button stands out more than the others.

The highlight has to be honest. If it says “Most popular”, it has to be the best-selling plan. If you're not sure, write “Recommended” and for whom: for example “for teams of up to 5”.

The highlight appears only once visually, too. If every plan has a label, none stands out. I highlight the recommended plan with a coloured background and a single label. The other cards stay plain.

Button style carries a message too. A filled button on the recommended plan and outlined ones on the others make enough of a difference. Making the cheap plan's button faint and seemingly not clickable misleads users.

The decoy effect

The decoy effect is when an unattractive third option changes the choice between two others. It is also called the attraction effect or asymmetric dominance effect. Wikipedia cites a 1982 study by Huber, Payne and Puto for this definition.

The best-known example is told by Dan Ariely in the book Predictably Irrational. According to Wikipedia it is a subscription offer The Economist actually used. The print-only subscription cost as much as print and web together. In the result Ariely reports, nobody chose it, but having it there changed the decision.

Option	Price	With three options	With two options
Web only	$59	16%	68%
Print only (decoy)	$125	0%	none
Print and web	$125	84%	32%

Source: Wikipedia, article Decoy effect, and a 2017 London Business School article. Both base the example on Ariely, but neither gives a number of participants.

Without the print subscription the choice almost reversed. The share choosing the expensive bundle fell from 84% to 32%. An option nobody chose made the expensive bundle look like a bargain.

The effect has limits too. According to the Wikipedia article, some studies say it can disappear in realistic buying situations. One of them is the 2014 study by Frederick, Lee and Baskin. The article gives the case where options are shown as a graphic as an example.

According to the same article, Huber, Payne and Puto restated the conditions of the effect in 2014. It appears when buyers are almost undecided between two options. The decoy also mustn't be too bad, and its inferiority has to be easy to see.

My conclusion: a decoy helps separate two plans that are close. Don't rely on it to sell users a plan they don't need.

Try it yourself in the demo below. In the three-plan table, Team is the decoy. It is a little cheaper than Pro, but offers much less.

Try the decoy

Basic

$29 / month

Billed monthly. $348 a year.

• 1 user
• 200 appointments a month
• Email reminders

Pro

Recommended

$59 / month

Billed monthly. $708 a year.

• 5 users
• Unlimited appointments
• Email and SMS reminders
• Monthly reports

Team

Decoy

$56 / month

Billed monthly. $672 a year.

• 2 users
• 500 appointments a month
• Email reminders

Prices in USD. Sales tax, where it applies, is added at checkout. No setup fee.

The pricing table of an imaginary appointment app; plan names and prices are made up. First pick a plan in the three-plan table, then switch to the two-plan table and pick again. When you switch between monthly and yearly, every card also shows the total for a year.

When does the decoy become deception?

The decoy itself doesn't lie. Team is a real plan, its price and contents are true, and the user can buy it if they want. That's why I count it as a nudge.

The line starts where information is hidden. A fake plan you can't buy is no longer a decoy. Nor is a price that rises at checkout. Those are dark patterns.

My own test question: would the user feel deceived if they learned why the decoy is there? If so, I take the plan out of the table.

The monthly and yearly toggle

According to Friedman, the toggle between monthly and yearly prices usually sits at the top of the table. To me, the real question is which number it shows.

With yearly billing, the price is often written as a “monthly amount”. A yearly charge of $564 might appear on the card as “$47 / month”. If the user then meets a single charge of $564 at checkout, it feels like a surprise.

My rule is simple: write the monthly amount and put the yearly total directly below it. The sentence “Billed $564 once a year” is enough. In the demo above, the cards do this when yearly is selected.

The toggle's default has to be honest too. If the page opens on yearly, say so clearly above the toggle. The user mustn't think they're seeing the monthly price.

Also write the discount in a unit the user understands. In one example in Friedman's article, the benefit of yearly billing is described as “2 months free”. I find a benefit in months or dollars easier to work out than a percentage.

If the plan renews automatically, say so next to the price. Answer in the FAQ when it renews and how to cancel. When the FTC presented its report on dark patterns in September 2022, it named making subscriptions hard to cancel as one of the prominent tactics.

No hidden fees

The amount users see on the pricing page is the amount they should see when paying. If there is a setup fee, a per-user surcharge or a usage-based fee such as for SMS, it is a row in the table.

The FTC's 2022 release describes another tactic: showing only part of the price and keeping mandatory fees quiet until the end of the purchase. In a case the FTC describes, a company promised “no hidden fees” but hid the information about fees behind small tooltip buttons.

In the US this has also been regulated. The rule the FTC announced in December 2024 requires live-event tickets and short-term lodging to show the total price, including mandatory fees, clearly. That total must be displayed more prominently than most other pricing information.

The rule doesn't cover SaaS. But its logic fits the pricing page too: the biggest number is the one that gets paid.

If you have no hidden fees, say that too. According to Friedman, saying there are no hidden costs may seem unnecessary, but it can ease users' worries. A short line such as “No setup fee, cancel any month” does the job.

After the price comes the payment step, and the same amount should be there. The rules for the payment screen are in the checkout pattern.

Currency and tax

For SaaS sold in several countries, two questions come up straight away: what currency is the price in, and is tax included? Both answers belong right next to the price, at a readable size, not in a footnote at the bottom of the page.

In the US, in my experience, prices are usually shown before sales tax. If tax is added at checkout, say so next to the price, for example “plus applicable sales tax”. Then show the tax as its own line at checkout and the total as the most prominent number.

If you sell to consumers in other countries, the rules on showing total prices and tax can be different. In the EU, for example, consumers often expect prices that include VAT. This note is not legal or tax advice; check the rules for your markets with a professional.

If you show prices in dollars, say which currency the card is charged in. Explain in the FAQ how the amount is worked out for someone paying with a card in another currency.

Whatever rule applies, write the note on currency and tax as one short sentence directly under the table and repeat it in the FAQ. That way nobody has to search the small print.

FAQ on the pricing page

The FAQ on the pricing page is the pre-written answer to emails that would otherwise go to sales. Someone who can't find the answer on the page has two options: write and wait, or put off the decision.

These are the questions I want to see on pricing pages:

• Can I cancel at any time, and what happens to the rest of the period?
• If I upgrade or downgrade later, how is the difference calculated?
• Is tax included, and how is the invoice issued?
• Which payment methods are there, and in which currency is the card charged?
• Am I charged automatically when the free trial ends?

Don't make the questions up yourself. Ask support and sales which questions came up most in the last three months. Put those on the list.

Keep the answers short and start straight with “Yes” or “No”. If a long legal text is needed, link to it at the end of the answer.

My note

The problem I see most often on pricing pages: the yearly price is shown like a monthly one. The card shows a small number, checkout shows twelve times as much. That's the moment the user loses trust in the company.

In second place comes the “Contact us” button. An enterprise plan without a price is sometimes really needed. But if no plan has a price, the visitor has to sit through a sales call just to learn what it costs.

My own offers show a price and a duration on every one except the fixed-price project. For that one there is no ready price; instead I promise a quote within 24 hours.

When you change the pricing page, measure the changes one at a time. First try a single change, such as showing the yearly total or cutting the number of plans. Check whether the result is meaningful with the A/B test calculator.

Checklist

• Every plan has the same rows in the same order.
• There is a single recommended plan, and it says who it suits.
• With yearly billing, the yearly total sits next to the monthly amount.
• The toggle's default is clear to see.
• Setup, per-user and usage-based fees are in the table.
• Currency and tax sit right next to the price.
• If there is a decoy plan, it is real, can be bought and is correctly priced.
• On a phone there is no horizontal scrolling; the cards are stacked.
• The FAQ answers cancellation, renewal and invoices.
• The amount in the payment step is the same as on the pricing page.

If you want to rebuild your pricing page and the payment flow behind it, the Design & Ship Sprint is made for exactly that. I send the design and the code to your repo in two weeks.