Pricing card design that makes the decision easy

A pricing card has one job: let a buyer decide quickly whether this is worth it for them. Every element that makes them calculate, compare or guess slows that decision, and slow decisions tend to become no decision.

Top to bottom

1. Name and who it is for. "Solo" is a name; "For one developer on one machine" is a reason.
2. The price. Large, in tabular figures, with the currency and the period. One time or per month is part of the price, not a footnote.
3. What you get. Four to six lines, most important first, in the buyer's words.
4. One button. In the accent colour on the card you expect most people to choose; outline on the others.
5. The fine print that removes worry. Refund terms, tax, whether updates are included.

Make the price easy to read

• Tabular figures so prices on neighbouring cards line up. See tabular numbers in CSS.
• No crossed-out fake original price. If a discount is real, say what it is and when it ends.
• Monthly and yearly toggles should show the yearly price per month and per year, not only one.

Comparison belongs below the cards

A long checklist of features with ticks and crosses inside each card turns the decision into a spreadsheet. Keep the cards short and put the full comparison table below them, for the few who want it.

One product, one price

Not every product needs tiers. This site sells each skill at one price, once, with updates and support included, and the card says that. A single clear price can outperform three, because there is nothing to compare, only a yes or no. The same thinking runs through what buyers pay for in a skill.

On a phone

Stack the cards with the one you recommend first, not in the middle, since on a phone the middle is the second card down.

Warm Storefront UI has the buy box this site uses as a recipe: a tabular price, what the buyer receives, the refund line and one amber button, with nothing else on the page filled amber.