Pricing PageRe-design
- WEB DESIGN
- CONVERSION-FOCUSED
- CONCEPT
Introduction
A pricing page is read by someone deciding whether they can afford to start. This project was about making what Nowadays costs easy to see, and easy to check.
Nowadays is an AI event planning platform for corporate teams. This is an unsolicited concept redesign of its pricing page, so I’m not affiliated with Nowadays and nothing here has shipped. Where the live page doesn’t say something, I marked it “To confirm” rather than guess.
This case study walks through how I got there:
- what the live page asks buyers to work out
- the decisions that changed it, and why
- how it works on a phone
- how I would measure whether it works
- Role
Product Designer
- Scope
- Desktop and mobile pricing pagePlan cards and worked cost exampleComparison table with phone tabsComponent set and page copyNotes explaining each change
- Problem
The live pricing page makes buyers work out the cost themselves. Plan headings read like buttons, the 10% charge and the $250 deposit sit in small grey lines, and one block prices every item at $∞. Anyone who has to justify the spend has little to check.
- Solution
I rebuilt the page so each plan has a name, one price line and one button, and added a worked example that shows what Explorer costs and when.
The Goal
The goal was to make the Nowadays pricing page answer the question every buyer arrives with: what will this cost me, and what happens next? I wanted a buyer to understand each plan, see what the 10% service charge and the $250 deposit mean in practice, and pick a next step without having to work anything out.
I also wanted the page to stay honest. Where the live page didn’t say something, such as what the 10% is calculated on, I marked it “To confirm” instead of making it up.
Design Strategy
I treated the page as the questions a buyer asks, in the order they ask them: what is this, which plan is for me, what will I pay and when, what is in each plan, and what if I’m unsure. Each section answers one of them.
Three rules followed. Names come before actions, so each plan’s name is its heading. Prices sit at the size people scan for, in the same place on every card. Each plan has one clear action.
I kept Nowadays’ own colours, mascot, logo carousel and footer. I changed the order of importance, not the brand.
Competitive Analysis
I checked the pricing pages of four Nowadays’ competitors: Cvent, Planned, Groupize and Bizzabo.
Three of them keep prices off their pages and send you to a demo or a quote, and only Bizzabo shows a starting price.
Nowadays already publishes how it charges, which is free, 10%, or custom. The live page made that hard to see, and the redesign lets it show.
Design Process
- 01Audit the page
I checked the live pricing page against an early audit and kept what held up. The clearest problem was cost: no H1, plan headings that read like buttons, the 10% charge and $250 deposit in small grey lines, and a bundle priced at $∞.
- 02Order the page
I ordered the page around the questions a buyer asks: what is this, which plan is for me, what will I pay and when, what is in each plan, and what if I’m unsure. Each section answers one.
- 03Copy & Numbers
I set one rule for the copy: each plan is named, priced and explained in the same place. The cost example uses illustrative figures and says so, and anything the live page doesn’t state is marked “To confirm”.
- 04Components & Phone
The page uses a small component set, so every card and table row is built the same way. On a 375px phone, each card shows its price and button before the list, and the comparison table becomes tabs.
- 01
Audit the page
I checked the live pricing page against an early audit and kept what held up. The clearest problem was cost: no H1, plan headings that read like buttons, the 10% charge and $250 deposit in small grey lines, and a bundle priced at $∞.
- 02
Order the page
I ordered the page around the questions a buyer asks: what is this, which plan is for me, what will I pay and when, what is in each plan, and what if I’m unsure. Each section answers one.
- 03
Copy & Numbers
I set one rule for the copy: each plan is named, priced and explained in the same place. The cost example uses illustrative figures and says so, and anything the live page doesn’t state is marked “To confirm”.
- 04
Components & Phone
The page uses a small component set, so every card and table row is built the same way. On a 375px phone, each card shows its price and button before the list, and the comparison table becomes tabs.
Key Design Decisions
“Pricing” becomes the page’s H1
The live page already sets “Pricing” large, but as a plain div: it has no H1. The first version of the redesign set the heading too small, so it is now the largest text on the page and the page’s H1. The line under it, “Start free. Add a planning team when you need one.”, describes all three plans, where the live page says “Only pay for what you use” above a 10% charge.
Name the plan first, then the price, then one action
On the live page the biggest text on each card is an action label, “Start for Free” or “Book a Demo”, and two cards share one. Each card now leads with the plan name, shows one price line in the same place (Free, 10% service charge, Custom) and has a single button that says what happens next. Only Explorer’s button is filled.
Turn the $∞ bundle into a worked example
The live page prices every item in its bundle at $∞, so there is nothing a finance team can check. It becomes “What you pay, and when”: put down a refundable $250, Nowadays sources and negotiates, and you pay 10% on what you book. A 3-day offsite for 40 people shows the arithmetic, with the figures marked as illustrative. The page also notes it assumes the 10% applies to confirmed bookings, which the live page doesn’t say.
Keep the cards short and move the detail to a table
Explorer lists 11 features and Enterprise 13 on the live page, so the cards end at very different heights. Each card now shows its five or six most important features, and the full list moves to a comparison table grouped by job: sourcing, planning and payments, travel, team and tools, and support. On a phone the table becomes tabs, one plan at a time, because four columns won’t fit 375 pixels.
Final Design
The finished pricing page, from the hero to the footer, with the desktop and mobile versions side by side. The breakdown below follows the questions buyers ask, in the order the page answers them.
What is this, and which plan is for me?
A visitor should know which plan fits before they read a list. On the live page the buttons sit at the bottom of each card, below 11 features on Explorer and 13 on Enterprise, and the headings are actions rather than names. In the redesign each card starts with the plan name and one line on who it is for, then the price, then the button, and the feature list comes after. The line under the page title now covers all three plans.
What will I pay, and when?
The live page ends on a block that prices six items at $∞ and then offers a $250 deposit, which gives a buyer nothing to check. The redesign explains Explorer’s two costs in three steps and shows them on a 3-day offsite for 40 people: $40,000 of bookings, a $4,000 service charge and a $250 refundable deposit. The figures are illustrative and the note under the card says so. It also states the assumption that the 10% applies to confirmed bookings, which only Nowadays can confirm.
What’s in each plan?
Long lists made the cards uneven and hard to compare. The live page has no table, so the lists on its cards are the only way to compare plans. The redesigned cards carry five or six features each, and the full list lives in a comparison table grouped by what a feature is for: sourcing, planning and payments, travel, team and tools, and support. Explorer’s column is tinted to match its highlighted card.
What if I’m unsure?
A pricing page is where doubts surface, so it ends by answering them. Six questions sit in an accordion. Only the first answer is written out, on city searches and RFPs, because it needs nothing beyond general definitions and what Basic includes on the live page. The other five are marked “To confirm”, because the live page doesn’t answer them. Under the questions, a closing card offers two ways forward: book a demo or start free.
On a phone
The phone frame is its own design rather than a shrunk desktop page. On the live page a visitor scrolls past 11 Explorer features to reach its button. Here each card shows its price and button before the list, and the comparison table becomes tabs, one plan at a time, with the button following the selected tab. Four columns can’t fit 375 pixels, so the tabs keep the table’s five groups readable.
Desktop and Mobile
Both versions of the redesigned page, in full. Scroll inside either frame to move through the page from the hero to the footer.
How I’d Measure It
I haven’t tested this, because it’s an unsolicited concept. If Nowadays wanted to know whether it works, this is how I would measure it, and I’d agree the targets with them before anything went live.
Run it against the live page
Split visitors evenly between the current pricing page and the redesign, and run the test long enough to cover a full buying cycle, so one quiet week doesn’t decide the result.
One main metric: visitors who take a next step
The question is whether more visitors click Start for free, Book a demo or Talk to our team. I’d count those clicks per visitor and split them by plan, so a rise in free sign-ups can’t hide a fall in demo requests.
One guardrail: lead quality
More demo requests only help if they come from the right buyers. I’d compare how many demos turn into real conversations or booked events, and watch for questions about what the 10% covers, which would mean the cost example isn’t answering them.
Read the page, not just the totals
Scroll depth and clicks on the comparison table, the worked example and the FAQ would show whether the questions the page is built around are the ones buyers ask. Anything they ask that it doesn’t answer goes back onto the “To confirm” list.
Key Takeaways
Designing the Nowadays pricing page made it clear that a pricing page is an explaining problem before it is a visual one. It only started to read clearly once every plan was named, priced and described in the same place, and once the cost example showed what Explorer costs and when. Every section after that was easier to place, because it had one question to answer.
Copy turned out to be as much a design decision as layout. The live cards put action labels where plan names should be, and keep the 10% charge and the $250 deposit in small grey lines. Fixing that was mostly a writing job: naming the plans, saying who each one is for, and putting the price in the same place on every card.
The last lesson was to design around what I didn’t know instead of filling it in. The live page doesn’t say how the 10% is calculated, when the deposit is refunded or whether Enterprise includes everything in Explorer, so I marked those “To confirm” rather than guess. A concept like this only becomes a real page once the people who own those answers fill them in.