Conversion and checkout · UX/UI pattern guide
Pricing/package selector
A pricing or package selector presents a small set of offers in comparable form so users can understand fit, limits, cost, and upgrade paths.
At a glance
What the pattern is designed to accomplish
Plan cards, feature comparison, recommended plan, and upgrade prompts.
Planning price
€650
A starting budget anchor before discovery and technical scoping.
Typical effort
2-3 days
The implementation range depends on states, data, and integrations.
Pattern family
Conversion and checkout
Use the family to find adjacent patterns that support the same journey.
Use cases
When this pattern is a strong fit
Use the pattern when it removes a real decision or interaction burden, not simply because users recognize its visual form.
Best suited to
- Subscription products, service packages, memberships, and usage tiers
- Offers where customers self-select by needs or scale
- Products that need to explain recurring and variable costs together
Anatomy
The essential parts of pricing/package selector
The visual treatment can change, but these responsibilities need to remain clear.
Part 1
Clearly named plans with an intended audience or use case
Define this part explicitly in the design and test it with realistic content and states.
Part 2
Comparable prices, billing periods, limits, and included features
Define this part explicitly in the design and test it with realistic content and states.
Part 3
An honest recommendation with a stated reason
Define this part explicitly in the design and test it with realistic content and states.
Part 4
A route to detailed comparison, custom pricing, or sales help
Define this part explicitly in the design and test it with realistic content and states.
Implementation
Design and delivery guidance
The pattern works when interaction rules, content, data, and edge cases support the same user goal.
Recommended approach
- Describe outcomes before listing internal feature names.
- Make annual discounts, taxes, usage charges, and renewal terms explicit.
- Keep the number of plans small enough to compare.
Common failure modes
- Using a highlighted middle plan without explaining why it is recommended
- Hiding important limits behind footnotes
- Making monthly and annual prices visually incomparable
Accessibility
Inclusive design requirements
Accessibility is part of the pattern's behavior and content model, not a visual pass added after implementation.
Minimum considerations
- Use headings and lists so plan structure is understandable without columns.
- Do not communicate the recommended plan through color or scale alone.
- Keep feature comparison tables navigable at high zoom and on small screens.
History
How pricing/package selector emerged and who popularized it
Interface patterns usually evolve through several technologies and products. The distinction below avoids assigning a single inventor where the evidence points to gradual adoption.
Origins
How the pattern came about
Tiered offers descend from service rate cards, membership levels, and software licensing editions. Web products converted these into side-by-side tables and later into responsive cards.
Popular adoption
Who helped make it mainstream
Early SaaS companies, including 37signals with Basecamp, made transparent self-service monthly plans a defining software-sales pattern. The freemium model and app stores later normalized free, individual, team, and enterprise tiers.
History and practice sources
Related patterns
Continue through the pattern library
Adjacent patterns often need to be designed as one journey rather than as isolated components.
Conversion and checkout
Shopping cart and order summary
Persistent cart, quantity controls, subtotals, saved choices, and review step.
Read the pattern guideConversion and checkout
Progressive checkout
Step-by-step checkout, validation, delivery/payment sections, and trust markers.
Read the pattern guideConversion and checkout
Product detail object page
Image gallery, benefits, specifications, trust cues, add-to-cart, and ask-AI decision support.
Read the pattern guide