The audit
A friend's Nigerian wallet and bills app: 105 screens with no system behind them. More than 50 icon sets, about 1,400 unnamed layers, orange and purple buttons competing, bill tiles that paid on a single tap, PIN set and confirm on one screen, and a crypto-style recovery phrase inside a bank app.
Keep, fix, rebuild
| | What | | --- | --- | | Keep | The flows: onboarding, KYC, send, add and request money, bills, cards, settings | | Fix | Bill tiles select, never pay. PIN set and confirm on separate screens. | | Fix | The recovery phrase replaced with a PIN reset using your BVN | | Rebuild | Every visual, on one token system with dark mode |
The system
Atomic design from foundations to pages. 120+ variables with light and dark modes, one icon set, Chivo throughout, and spacing that doubles at every step. 52 components carry written descriptions, and 690 layers were renamed so engineers can find things.
Research came first: 11 batches on Mobbin, about 35 flows and 70 screens across 30+ apps, with a deep look at Revolut.
Every state
Every failure says whether money moved. Each flow covers loading, pending, failed, limit reached and offline, not just the happy path.
Quality, in numbers
- Tertiary text contrast raised from 4.21 to 5.0
- Card labels from 2.59 to 4.59
- Glass hero text from 3.91 to 5.9
- 14 copy fixes, and a stress test with worst-case data that found and fixed 3 breaks
What shipped vs what was designed
Designed: about 91 screens, the full system, dark mode and a clickable prototype with 4 flows and 39 interactions. Shipped: nothing in code yet. This is a Figma rebuild, and the app's team decides what gets built. No usage numbers exist, so there are none here.