I designed a full-screen pricing page that puts every plan side by side, and plan comprehension greatly increased in testing.
A work management software company wanted one pricing page for its website and its app, clear enough that business buyers could choose a plan and pay without calling sales. I designed a full-screen pricing page with a purchase flow on the same page, tested the design with new buyers and existing customers, and comprehension of the plans greatly increased.
Client
A work management software company
I changed names and details to respect my nondisclosure agreements.
My role
Product design manager
Focus
Pricing research, plan comparison, and self‑service purchase
Result
Plan comprehension greatly increased in testing
Buyers had to understand four plans and a licensing model before they would pay.
In 2017, the company sold four plans: one for individuals, two for teams, and one for large organizations. The website and the app showed pricing in different ways, and the business wanted more people to buy online without help from a sales representative. My brief had four goals: unify pricing across the website and the app, raise plan comprehension, support self-service sales, and increase online sales.
The pricing model carried a hidden question. Only people who create and own sheets need a paid license, and everyone else can join a team for free as a collaborator. A buyer who misses that rule buys too many licenses or picks the wrong plan, and a buyer who feels unsure often leaves the page.
My team included a product manager, a visual designer, a junior designer, a developer, and a quality assurance engineer. We built on research from the year before, ran web A/B tests on pricing, and reviewed the work with company leaders, including the CEO, at every stage.
Research came first, then six layouts, then two rounds of usability testing.
Each stage answered a question the stage before had raised, so the design changed for a reason every time. Click or tap a card to turn it over.
I gave every plan the same shape, so the differences were the only thing left to read.
People compare plans by scanning across, not by reading down. So every plan card has the same parts in the same order: name, who the plan is for, price per license, billing, one button, and the features the plan adds. The plan most teams choose carries a quiet highlight and a label instead of a louder color.
Features that come with every plan appear once, in their own section, instead of repeating on every card. Free collaborators get a plain sentence above the fold, because the survey showed that the license rule was the question most likely to stop a sale.
- Every plan uses the same rows, so a buyer can compare plans at a glance.
- Each card lists only what the plan adds, so the differences stand out.
- The price shows per license, per month, with the billing cycle right below.
- The purchase opens on the same page, so a buyer never loses sight of the plans.
From a test participant
It was a very simple process, and I really liked how it detailed out the different plans side by side.
New buyerUsability study, May 2017
Compare the plans and buy one for a team of 100.
I rebuilt the 2017 design as this prototype in a current style under the Haven Works name, with AI writing the code from my designs. All prices are invented sample prices, and the checkout takes no payment.
Things to try
- Switch between annual and monthly billing, and change the currency to see every price update.
- Open Compare every feature to see all four plans in one table.
- Choose Business, then use the license helper for a company of 100 people with 10 project managers.
- Turn on non-profit pricing and watch the plan summary change.
- Review your order, purchase, and look at the Getting Started steps for your team.
The pricing page used the app's own colors, type, and parts, so buying felt like part of the product.
I rebuilt the page in the same current work management style as the other Haven Works studies. One blue marks every action, and green marks every included feature.
Color
- Haven navy
#0F1E3DThe top bar and the table header on the plan comparison - Action blue
#0068D9Choose buttons, the selected plan, Review order, Purchase, and focus rings - Blue mist
#EAF2FEThe selected billing option, the chosen plan card, and the license helper - Done green
#0E7A55Included features, savings labels, and the finished steps - Green mist
#E3F4ECThe savings chip and the purchase complete check - Ink
#141A26Headings, prices, and body text - Slate
#5A6378Billing lines, hints, and the sample price label - Canvas
#F5F7FAThe page behind the plans and the purchase form
Type
Wordmark
haven works
Inter
Page title
Plans that work for your team
Inter
Price
$26
Inter
Section headings
Set up your plan
Inter
Body and table text
Only people who create and own sheets need a license.
Inter
Components
Billing toggle
Two equal buttons switch between annual and monthly billing, and the annual option states its saving in plain numbers.
Plan card
Each card has the same parts in the same order, and the card lists only what the plan adds to the plan before it.
Comparison table
One table lists every feature in rows and every plan in columns, with a check or a dash in each cell and a text label for screen readers.
License helper
Two numbers, team size and the people who create sheets, turn into a license count with one sentence that explains the free collaborators.
Plan summary
A summary beside the form shows the plan, billing cycle, licenses, any discount, and the total, and the summary updates with every change.
Purchase stepper
Three numbered steps, from choosing a plan to review and done, tell buyers how much is left before they pay.
Principles
- I give every plan the same shape, so buyers compare differences instead of layouts.
- I explain who needs a license before I ask anyone how many licenses to buy.
- I keep the purchase on the same page as the plans, so nobody loses the comparison.
- I show the total before the buyer reaches the payment step.
12 of 12
testers found the pricing page from inside the app
11 of 12
testers chose the right plan for a 100-person company
52
new paying customers surveyed before the redesign
Plan comprehension greatly increased, and the differences between plans became very clear.
The May 2017 round tested the full flow, from finding the pricing page to the purchase complete screen, with new buyers and existing customers. Click or tap a card to turn it over.
There is plenty more where this came from.
Names, brands, and data in my case studies are changed to protect my clients.
Tell me about your project.
Tell me a little about it on my contact form, and a real person will get back to you soon.