My role. I was the designer on this sprint. I took part in the merchant interviews, mapped where the existing flow broke down, and designed the declined state, the recovery modal, and the billing-status filter. Engineering owned the backend renewal logic and the notification service; I partnered with them daily through implementation.
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
Before the redesign, declined billing plans were a steady source of support contacts. Since launch, the support team has not received a single ticket about a declined billing plan. Merchants update their payment method and restart the plan themselves, 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.
Process
Research & Analysis
We interviewed 3 merchants who had contacted support about billing plan issues. Their feedback revealed 3 consistent pain points:
- They were not notified when a payment declined.
- They had no way to identify which billing plans had failed.
- 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.
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.
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.
Declined-plan tickets went away entirely, giving the support team bandwidth back, and merchants could trust that their recurring payments were running as expected.