01
One big number, then one list
The Overview opens with one critical figure, $48,920 at risk this month. Right below it, "Act on these first" ranks five customers by amount and risk. Everything else is quieter.
All workSelf-initiated case study · Fintech
Recova
A dashboard that shows a SaaS team how much money is at risk from failed card payments, and which customers to act on first.
- 10screens
- 161variables
- 15text styles
- 49icons
/The problem
When a customer's card fails, the money does not disappear. It sits in a long list of errors that nobody has time to read. Founders know revenue is slipping, but not where to start.
/My approach
The goal was simple to say and hard to design: in 5 seconds, the user sees the money at risk and the customers to act on first. Every screen was checked against that one test.
I built the design system first, then every screen from it: 161 variables with Light and Dark modes, 15 text styles, 49 icons and about 45 components. The 10 screens use only system parts, plus a Dark version of the Overview.
Recova is a self-initiated concept with fake companies and data. I designed it and built it with AI help under my direction, and it hasn't been tested with real users yet.
/Who uses it
Two people, two questions
Founder
“How much money is at risk, and where do I start?”
Finance viewer
“Can I see the whole picture without changing anything?”
/Key decisions
Five decisions that shaped it
02
One clear action per situation
Will a retry even work? For an expired card it won't. So the customer page says "Retrying won't fix this one" and makes "Send card update link" the main button.
03
Colour that means something
Red is at risk, amber is retrying, green is recovered, grey is lost. The brand colour, a calm petrol blue-teal, stays away from all of them, so a button is never mistaken for a status.
04
Honest states
When the payment processor disconnects, the screen says the numbers are from 08:40, not today. When nothing needs action, the queue says so and offers the next useful step.
05
Roles without confusion
A finance viewer sees the same pages, read-only: disabled actions, masked emails, and a lock icon where they can't edit. Nothing is hidden, so the team still shares one picture.
/Screens
A look inside
The Overview in Dark, the recovery rules, the empty state and the logo exploration. 10 screens in all, made only from system parts.
/Design system
Built on one system
161 variables with Light and Dark modes, 15 text styles, 5 elevation styles, 49 icons and about 45 components. Contrast checked against WCAG AA.
/What I'd do next
Recova hasn't been tested with real users, so I make no claims about results. First I'd test one question: does a new user find the riskiest customer in 5 seconds? Before shipping, I'd also fix the Dark mode button hover, which is only a little darker than the default.
Need a dashboard like this? See Fintech Dashboard Design
Have a project in mind?
Tell me what you're building. I'll tell you honestly if I'm the right fit.
Your time: —My time (Pakistan): —I reply within 24 hours on weekdays.