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
Hero screenshot — credit cards on file + Billing Plan card
Drop your hero screenshot in here when ready.
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.

Billing Plan ✎ Edit
AMOUNT DUE $2,049.79
Billing Plan ID
7621-8954-69461936
Status
Active
Start Date
March 1, 2023
Repeat Every
Month
Next Billing Date
May 1, 2023
Cycles Remaining
5
Billing Plan + Renew
AMOUNT DUE $2,049.79
Billing Plan ID
7513-2323-30534104
Status
Declined
Start Date
March 1, 2023
Repeat Every
Month
Declined Billing Date
April 1, 2023
Cycles Remaining
6
Active billing plan (left) vs. declined billing plan with renew CTA (right).

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.

Information Architecture

Using the interview findings, we mapped the existing user flow to pinpoint exactly where merchants lost visibility into declined payments and where the experience broke down.

User flow diagram — Billing Plan Decline (Create → Decline → Contact → Recreate)

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 Billing Status filter (Active / Complete / Declined / No Billing Plan)

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 — Billing Plan Details form

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.