/Work/Pixelbin/Checkout
PixelBin Checkout
Why Were 88% of Users
Leaving at Checkout?
The Business Model
AI Usage
Runs on
Credits
Use AI
Image generation, background removal, watermark removal, upscaling. Each operation consumes credits.
Credits Consumed
Users start with free credits. Every AI operation reduces the balance.
Limit Reached
Free credits run out. The user is mid-task, actively creating when they're stopped.
Pricing Appears
A popup appears inside the product. No redirect to a separate billing page.
Choose Plan + Checkout
Monthly, One-time, Annual or Enterprise. Payment happens without leaving the product.
Credits Restored
User continues working immediately.
The purchase decision happens mid-task. That's why checkout stays inside the product.
The Problem
88% Were
Leaving at
Checkout
Checkout analytics showed an 88% drop-off rate. Only 12% of users who reached checkout actually completed payment. But the checkout screen was only part of the problem.
I analysed pricing pages, purchase data, heatmaps, rage clicks and dead clicks across four PixelBin products: PixelBin, Watermark Remover, EraseBG and Upscale Media. The PM and I also audited 15+ competitor pricing pages. What we found was that users were arriving at checkout already confused. The pricing itself was the problem, not just the payment screen.
Before Redesign
The Old
Purchase
Journey
Most Purchased
45-credit add-on
The lowest-commitment, smallest purchase available.
Least Purchased
500-credit yearly subscription
The plan the business wanted to make more attractive.
User Tries the Free Tier
New users start with free credits. No payment required. This is the first interaction with PixelBin's AI tools.
Happy with the Output?
The first decision point. If the AI result didn't meet expectations, there was no recovery path.
Willing to Commit Long-Term?
Users who liked the output faced a second question before they'd had enough experience to judge long-term value. Most chose the safest option.
Enough Credits Purchased?
Add-on users who ran out of credits faced another decision: repurchase or leave. There was no clear upgrade path, so many left.
High Volume?
Only users processing large quantities of images reached the Enterprise path. A small segment.
What We Found
Some subscriptions were a
worse deal than buying add-ons
In Watermark Remover, a user buying three 45-credit add-ons got 135 credits for ₹4,800. The annual subscription gave 120 credits for ₹5,000. More credits, less money, no commitment. Users choosing add-ons weren't being irrational. They were doing the maths.
Watermark Remover pricing page · V3 · Before the restructure
Purchase Data
What the
Data Showed
Watermark Remover · Purchase data · October 2024 – March 2025
Outcome
Plan Mix
After Launch
After restructuring the pricing, the plan mix changed.
Revenue rose alongside a shift towards higher-value plans.
Entry-level plans (10 credits) showed 2–3% change, so the cheapest options stayed accessible.
Four underperforming plans were discontinued based on the purchase data.
Early Signal — Internal Slack
These results reflect both pricing model changes owned by the PM and the redesigned pricing experience I designed. The two contributions aren't separable.
What Needed to Change
Three Things
Had to Change
Clarity
What users are buying
Credits, billing period, plan name and total cost needed to stay consistent from pricing through payment. No more sticker shock at checkout.
Value
Make plan differences visible
Subscriptions couldn't rely on credit quantities alone. Benefits and purchase-model differences needed to be visible before checkout.
Context
Keep the upgrade in the task
The payment moment happens when users are actively using an AI tool. The upgrade flow should behave like part of the product, not a separate destination.
Design Principle
Don't make users compare
things they shouldn't be
comparing
Tabs, Not
Comparison
Pricing Architecture
I split plan types into tabs: Monthly, One time, Annual and Enterprise. Instead of showing all purchase models together and asking users to compare them, each type gets its own view. Monthly opens by default on desktop.
Tab-based separation · Each purchase model gets its own space
In-Product
Pricing
Desktop + Mobile
Pricing appears inside the product, never on a separate page. On desktop it's an overlay with the workspace visible behind it. On mobile it's a full-screen bottom sheet. The options and layout are the same on both, just adapted for the screen size.
Desktop
Mobile
Default
Special Offer
Enterprise
Pay-as-you-go
In-Product
Checkout
Payment Inside the Product
When credits run out, the checkout popup appears over the workspace. The user's work stays visible behind it. Plan name, credits and total stay the same from selection through to payment. They never leave what they were doing.
Checkout inside product · Workspace visible behind overlay
Exit +
Feedback
Retention · Learning
When a user tries to close the pricing popup, a feedback form asks why. Each response triggers a different follow-up. "Too expensive" surfaces a discount code. "Not what I'm looking for" opens a text field. "Found a better tool" asks which one. That data goes straight back into pricing decisions.
Discount nudge on exit · Feedback on final close
Feedback States
Know What
You're Buying
Credit Transparency
Users were already doing the maths. 512 bought the add-on over the subscription, and the pricing made that the rational choice. In a credit-based product, "500 credits" is meaningless until you know what 500 credits actually gets you. That depends on which AI model you use, and the cost range is 75x.
We put a breakdown table on the pricing page. Every model, its credit cost, its generation time. None of the competitors we audited showed this information before purchase.
Live on the PixelBin pricing page. In the competitors we reviewed, none showed per-model credit costs, generation time, or free operations in a single view.
I audited pricing across Remove BG, Photoroom, Canva, Veed.io and Dewatermark. The same pattern came up across the competitors we reviewed: credit costs were often bundled into subscriptions, with no per-model breakdown or generation time shown. Users typically found out what things cost after they'd paid.
That's what the credit table on our pricing page was built to fix. Every model, every cost, every generation time in one place, visible before the user spends anything.
What Changed
33% → 57%
Checkout conversion within days of the new pricing page going live
The Shifts
Multiple purchase models competing simultaneously
Plan types separated by tabs, one type at a time
Inconsistent monthly/yearly credit language
Clearer billing-period communication
Subscription value unclear, sometimes worse than add-ons
Benefits alongside credits, cost per credit visible
Checkout separated from the user's active task
Checkout embedded inside the product workspace
Sudden yearly total + tax at payment
Consistent pricing from plan selection through payment
No structured learning from final exits
Exits generate feedback for pricing decisions
These results reflect both pricing model changes owned by the PM and the redesigned pricing experience I designed. The two aren't separable.
Reflection
When the pricing logic creates a worse deal, interface polish cannot solve the underlying business problem.
This project sat right between product and business decisions. The PM owned the pricing model. I owned the screen that had to make those choices understandable. The hardest part was showing enough information for users to trust the purchase without overwhelming them. The subscription maths showed that both the model and the presentation had to change together.
Still here
Good. Let's talk about what you're building. I'm Terry, a Senior Product Designer working across AI, commerce and fintech products. I'm looking for a permanent Product Design role in the UK and would require Skilled Worker sponsorship to relocate.
Open to permanent UK opportunities
Get in touch