Case Study · CardX (Stax Payments)

Declined Recurring Billing Flow

CardX's recurring billing flow was generating a high volume of support tickets. Users were upset by declined payment errors and didn't know how to recover their Billing Plans.

Over a two-week sprint, I collaborated with the developers to redesign and rethink the experience from error state through successful recovery.

The result was a 90% reduction in support inquiries and a measurably smoother path for users at one of the product's most critical moments.

UX Research UI Redesign Flow Improvements
← Back to case studies Customer profile showing the active Billing Plan section with amount due, billing plan ID, status, and cycle details
The Billing Plan section of a customer's profile in CardX.
Headquarters
Chicago, IL
Role
UX Designer
Industry
Fintech SaaS
Timeline
2 week sprint

Challenge

CardX had no notification system for declined payments, leaving users unaware their scheduled payments had stopped. When they eventually found out, they were frustrated and behind on payments.

The existing error state offered no explanation or next steps, sending confused users straight to support.

Results

Support inquiries related to declined recurring payments dropped by 90% within the first month of launch. Users were able to update their payment method and recover their subscription without assistance.

The redesign delivered clearer error messaging and a guided recovery flow — and an automated email now notifies the admin account the moment a payment is declined.

Declined Billing Plan with greyed-out amount due, Renew CTA, and a transaction history showing the failed NSF payment
A declined billing plan with the Renew CTA, alongside the transaction history showing the failed payment.

Process

Research & Analysis

We interviewed 3 merchants who had contacted support about billing plan issues. Their feedback revealed 3 consistent pain points:

  1. They were not notified when a payment declined.
  2. They had no way to identify which billing plans had failed.
  3. They had difficulty restarting the recurring billing.

Wireframing & Prototyping

In collaboration with the developers we designed a recovery flow that allowed merchants to renew a declined billing plan in place, rather than rebuilding it from scratch. Prototypes were tested to ensure the experience felt seamless despite a backend constraint requiring a new plan to be created.

Visual Design & Style Guide

Declined billing plans were greyed out for quick identification, and a renew button was added to the upper right of each plan. A warning notice was included to prompt merchants to update their card on file if needed.

Solutions

Identify Declined Billing Plans

Merchants can now filter their customer directory by billing status to instantly surface all declined billing plans in one view — eliminating the need to manually check each customer one by one.

Customer Directory with the Billing Status filter open, showing Active, Complete, Declined, and No Billing Plan options

Receive an Email Notification

We introduced automated email notifications that alert users immediately when a billing plan payment is declined. The notification provides clear, actionable next steps, guiding them to contact their customer to resolve the issue with their bank or quickly update the payment method for the recurring plan.

Renewing a Billing Plan

From the declined plan's detail view, merchants can now renew the billing plan in a single guided modal — confirming the card on file, merchant account, base amount, next billing date, and cycle — without recreating the plan from scratch.

Renew Billing Plan modal with the Card on File dropdown and a pink warning banner stating the selected card was previously declined and a different card should be selected

Conclusion

Redesigning the declined billing flow at CardX showed how much a small UX improvement can impact both the business and its users. By adding proactive notifications and a clear recovery path, merchants could stay on top of failed payments without contacting support.

The 90% drop in billing-related inquiries gave the support team bandwidth back, and merchants could trust that their recurring payments were running as expected.