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.

Browse all patterns Scope this pattern

At a glance

What the pattern is designed to accomplish

Plan cards, feature comparison, recommended plan, and upgrade prompts.

Pricing/package selector interface pattern illustration

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.