Making 6-way pricing easy to choose

As the product designer, I turned a hidden 6-way pricing system into one scannable CTA, cutting the path to purchase in half.

Users left the detail page without buying

One flat “Add to Basket” hid a 6-way pricing system. It sat behind too many clicks and too little info to decide with.

Too many clicks

4+ clicks just to view modules and pricing.

as-is → path to price

Too little info

No format, language, or module info to decide with.

Options hidden

One flat “Add to Basket” hid a 6-way pricing system.

[ desktop — as-is detail page, annotated · ~3:2 ]

How might we let users decide whether to subscribe at a glance, right on the detail page?

Competitive research

With no users to interview, I looked at how others solve this. I compared layout and CTA structure across 10+ e-book services to find the patterns buyers expect, and where our page fell short.

01

Anatomy of detail pages

Most pages share one basic three-section structure, with minor variations.

Top

Breadcrumbs

Main section

Thumbnail, title, author, technical details, description, wishlist, share, ToC, CTA

Recommendation

By authors, modules, personalized

02

Options live in the CTA

Sites with multiple plans surface them directly in the buttons, not buried.

[ format options + CTA, dashed crop ]

Comparing page layouts, then CTA structures

The research narrowed it to two questions: how to structure the page, and what shape the CTA takes. I worked them in that order.

01Page structure

I chose Option C: the least dense layout, with cleaner detail and CTA areas, accepting scattered buttons I'd consolidate next. A and B both crowded the CTA and details.

Option A

Details-first

+Unified button location

−CTA overcrowded with buttons

−Crowded detail area

Option B

Roomy title + clear structure

+Title area fits long titles

+Less focus on module tags

−CTA still overcrowded

−Cluttered details

−Table of contents hidden

Option CChosen

Split CTA

+Less dense details

+Less dense CTA

−Buttons scattered, hard to find

02CTA shape

For holding all 6 plans I compared three structures: a dropdown, tabs, and stacked blocks. Dropdown and tabs both hid options again, so stacked blocks won: everything stays visible and comparable. I developed its details in the solution.

Making complex pricing scannable

Three moves made the 6-way matrix readable top to bottom:

• Blocksseparate each purchase option.
• Toggleputs monthly and annual on equal footing.
• Contraston title and price guides the eye.

[ first idea ]

First idea

Hover to reveal

Explanation only on hover

[ 1st iteration ]

1st iteration

Always visible

Explanation shown inline

Toggle for monthly / annual

[ 2nd iteration — final ]

2nd iterationFinal

Refined for clarity

Bigger, easier toggle

Clearer “payment” label

What I'd carry forward