Subscriptions
A clearer path to subscribing
Over roughly three months I led the redesign of El Confidencial's subscription checkout, working with two other designers on research and two developers who specialise in Piano, the subscription platform. We found compounding UX errors through rage-click data, device audits and customer-service logs, then fixed them one by one inside Piano's constraints. The new checkout went live in November 2024.
0%
Checkout completion after launch
Up from about 30%. Payment screen to confirmed subscription, measured in Amplitude, November 2024 to March 2025.
+0 pts
More readers finishing, out of every hundred who reached payment
About a fifth more completions, measured week by week against the two months before launch.
0 months
The lift held
Through the quiet weeks after the holiday campaigns, not only launch week.
Before redesign
After redesign
Context and design problem
(hover to see UX errors)
The checkout is the last and most fragile step in El Confidencial's subscription funnel. Many readers are older and less confident with technology, so the flow had to be plain and forgiving. The constraint was Piano, whose templating language locks button styles, payment-method order, field localisation and transition states. Some friction, like the forced payment-method step and certain loading states, could only be softened, not removed.
UX Errors: Mobile Checkout
Apple Pay defaulted without user intent
Apple Pay was pre-selected, bypassing the card form entirely. Apple Pay turned out to be popular with older users, but defaulting to it meant many people landed on a method they hadn't chosen. The grey styling of the alternative selector made it look disabled, so few switched.
No default payment method adds an extra step
Requiring users to select a payment method before entering details added unnecessary friction. Button styles were inconsistent and low-contrast. Worse, switching methods cleared previously entered credit card fields, forcing re-entry.
Confusing pricing information
Three different prices appeared, immediate payment, first-term cost and recurring rate, with no hierarchy. Users couldn't tell what they'd be charged.
Credit card text fields lack autofill. Buy button obscured below scroll.
Card fields had no autofill and inconsistent icons. Worse, the buy button sat below the fold, so users had to scroll to find out how to pay.
UX Errors: Desktop Checkout
No default payment method
Users had to choose between card, PayPal or bank transfer with nothing selected, an extra decision at the start of checkout.
Confusing, overly textual pricing
Three different subscription prices appeared without clear distinction, and the modal didn't specify which plan the user was purchasing or what it included.
Inconsistent credit card fields
The card form lacked autofill and focus states. Icons were inconsistent and often wrong: a clock for the expiry date, a house labelled 'zip' for the postcode.
Incorrectly displayed error states
Validation only triggered after clicking ‘Buy’ instead of in real time. Errors appeared in an English-language banner at the top of the modal rather than inline beneath each field.
Research: Benchmarking
Research combined a qualitative UX audit, behavioural data and competitive benchmarking. We analysed HubSpot rage-click data and session recordings to find drop-off points, checked how the flow rendered across device sizes to catch elements falling below the fold, and read customer-service logs for recurring payment complaints. We also benchmarked six publications (NYT, Washington Post, El Mundo, El País, The Atlantic and WSJ) against Nielsen Norman Group and Baymard Institute guidance.
Final Design: Desktop
The final design required close work with developers inside Piano's constraints. An early decision was to switch the payment provider to Stripe within Piano, which improved the card form out of the box: better field styling, autofill and smoother mobile interactions, with no extra front-end work.
Clearer pricing
I simplified the pricing to highlight only the discounted introductory price, displaying the original price subtly for context. This reduced decision friction and made the value proposition immediately clear.
Renewal terms hidden but easily accessible
Full subscription terms sit behind a 'Ver detalles' link, with a clear note that you can cancel at any time. Transparent without cluttering the main view.
Simplified promotional code flow
The promo code field is hidden by default and revealed via a checkbox, reducing visual clutter and eliminating unnecessary interaction friction.
Improved error states and real-time validation
Validation now happens in real time as users complete each field. Error messages appear inline in Spanish beneath the relevant input, replacing the previous post-submit English banner.
Buy button visible for all payment methods on mobile
Collapsible sections for subscription and payment details keep the buy button persistently visible on mobile, eliminating the scroll-dependency that previously hid it below the fold.
Outcomes & Takeaways
Measured in Amplitude from the payment-method screen, where a reader has already picked a plan, to a confirmed subscription within ten minutes. Weekly completion ran at about 30% in the two months before the new checkout launched on 4 November 2024, and about 37% in the four months after. We shipped without an A/B test: the audit made the problems clear enough to commit to the full redesign.
From about 30% to about 37% completion
Roughly seven more readers out of every hundred who reached the payment screen went on to subscribe, a lift of about a fifth that held through the quiet months after the holiday campaigns.
The buy button wasn't even visible on mobile
The most impactful fix was also the most basic. On mobile, payment details pushed the buy button below the fold, so users literally couldn't see how to finish. Trivial to fix, but it compounded every other friction point.
Switching to Stripe unlocked more than we expected
Moving from Piano's native payment fields to Stripe gave us better autofill, field styling, and mobile interactions out of the box. A constraint-driven decision that turned into the biggest single improvement to the credit card experience.
Customer service complaints dropped
Users found the new checkout noticeably easier to complete. The clearest signal: people stopped contacting customer service about being unable to finish their purchase.
Piano's constraints forced creative trade-offs
We couldn't rebuild checkout from scratch. Piano's templating language locked button styles, payment method ordering, and transition states. Success meant identifying which elements we could customize and accepting the rest.
Today I'd code it directly with AI
The biggest bottleneck was back-and-forth with developers over Piano's templating language. Doing this today, I'd write the front-end code inside Piano myself with Claude and cut that loop out.