I redesigned a client's pricing page to incorporate changes to their pricing model. The goal was to present a variable model (base + usage) clearly and highlight the value of this tiered system.
Role & Team: Design Consult
Tools: Figma
Skills: UX + UI Design
Deliverables: Final page design (dev ready figma), Copy recommendations
A client was changing their pricing model and I was tasked with communicating the new model clearly, while focusing on the value for users. The main changes were removing the separate free plan, adding a free trial to the developer plan (which now included a pay by usage component) and incorporating a calculator for users to estimate their usage cost.
Specifically, asks from the team were as follows:
Call out the free trial: The first 100 API calls are free, and require no commitment (no credit card, no subscription fee)
Highlight the value of a tiered structure (More API calls = less $ / API call)
Allow users to quickly estimate their cost / month based on estimated usage
Allow users to access the details of the pricing model if they are interested in where their price came from.
The Challenge
Old Pricing Page The old pricing page featured 3 plans, and did not include a usage component.
With the new plan, the free option is a trial of the developer plan, and the price per month is a combination of the base subscription + API usage. The Enterprise plan is a custom subscription price, but now also includes an API usage component.
The team put a draft design together to show me the pricing numbers and calculator idea, and we marked it up together on a kickoff call.
Design Proposals
I proposed several options for the new page. All options mention the free trial right at the start, and prioritize the CTAs for each plan. The Calculator is framed to focus on the cost savings versus the Price, and has a line to highlight the average cost per API call to show users that the more they do, the lower the price per unit goes.
Version 1: Calculator as part of the Feature List, Tiers hidden behind an info icon.
Version 2: Same layout as Version 1, but tiers are highlighted in copy so are more prominent, and instead of a modal, they are laid out below and accessed by scrolling or anchor link.
Version 3: Separate the calculator from the the plans, and highlight the features of the plans first. This was built assuming that the client would like the tiers laid out on the page, and accessible via text links for better visibility, but could easily be changed to the hidden/modal option.
Version 4: This layout detached the Enterprise option from the calculator, and laid the page out more traditionally (often times enterprise plans with a contact CTA are listed below the typical subscription plans). I wanted to bring this to the table as an option, though my hunch was it wasn't right for this content (it wasn't).
Final Design
Ultimately, the team preferred Version 3. Focusing on the plan benefits together at the top of the page, offering the calculator beneath it (which applies to both developer and enterprise plans), and including the tiered table on the page itself / as anchor links vs. behind a click.
I took the wireframe above, and applied their website styles to it in a dev ready figma. We also added in the base subscription price in the feature boxes since this is a pricing page, and users would expect to see *some* number presented in that space, and cleaned up some of the copy.
You'll notice a few placeholder spots of copy (Marketing will decide how to present the savings). Mobile designs were simply stacking the modules.