50,000 people a day tried to open an account. A 27-step signup lost most of them, and Mara paid for half. I moved the identity check to where people had a reason to pass it, then rebuilt the wallet on one pattern.
Mara was a crypto and fiat wallet for African markets, backed by a Coinbase-led investor group. It ran out of funding and the wallet went dark in November 2023, so there is no live product to open. What follows is what I built there and how.
The wallet, after: Home, Send and its Preview, three screens on one Android frame.
Catalogue: home-new-01 (Home), send-full (the amount screen and the Preview; pick the two by eye). This is the cover: his newest UI first. The old onboarding is not here; it opens the KYC chapter.
The setup
Work came in late and urgent, a quick version was shown, and it was corrected on the spot, screen by screen. Then nothing, until the next urgent thing. The 4 designers were junior, and stuck in a loop they couldn’t get out of on their own. Nobody had room to think about what they were putting out.
Before designing anything, I sat with the CPO on what the business needed and in what order, audited the product myself, pulled usage data, and asked support what people complained about most. Everything sorted into three lists: works, leave it. Doesn’t work and isn’t needed, cut it. Has potential but jammed, fix it. The third list was the roadmap, short and mid term only. The CPO signed it off, and then the team saw it, so they could see what structured work looked like.
The week, as a diagram.
To draw, small labels only: Monday to Thursday, work · Thursday, priorities with the CPO · Friday morning, critique · Friday afternoon, next week agreed · weekend, off.
I met the CPO every Thursday. By Friday the list was settled and nobody on the team had to guess what mattered.
Morning: the week’s work, critiqued. Afternoon: my list against what the team said fit in a week. On the board, then a weekend off, and three days for the next problems to sit in their heads.
Nobody took another until they delivered. No hoarding the interesting work, and a reason to finish: the sooner you deliver, the sooner you pick.
Fine: done. Small tweaks: notes, fixed between tickets. More than that: if it was urgent I did it myself and walked them through it 1-to-1. If it could wait, it rolled into their next week, already assigned. Mistakes were never discussed in Friday’s critique. Only 1-to-1.
I stayed hands-on for about half my time: my own tickets, anything that fell, and the admin. Week one, they didn’t get it. Week two, they got it, with mishaps. Week three, almost everything agreed was delivered. Week four was a perfect week.
Structure, critique at the right moment, autonomy to execute, and mentoring built into the review.
KYC
This one was mine, part of my hands-on half, a beat or two into the role. 50,000 people a day were trying to open an account, with a $1M World Cup campaign about to double that. Signup was 27 screens. It asked for everything up front: email and SMS verification, country three times, personal details, a PIN, biometrics, and a full identity check.
The old onboarding: all 27 screens in one row, the 7 KYC screens raised. Under it, at the same scale, mine: 8 screens, three actions.
Old: CXR/material/mara-old-onboarding-deck, 27 coded screens, KYC is screens 15 to 21 (the first public Mara page’s hero, some screens bigger than others). Mine: onb-new-01 to 08. One scale for both rows.
KYC lost more people than every other step combined: 700,000 a month.
The provider billed per attempt, pass or fail. A user lost at KYC was paid for twice: once to acquire, once on the check that lost them.
The regulation requires verification before a transaction, not at signup. And only 15% of the people we onboarded ever transacted.
So 85% of every KYC bill bought nothing, and the check stood at the one point where people had the least reason to put up with it. I moved it to the first payment. That meant letting unverified people into the whole app, and it meant the friction didn’t go away: everyone who pays still meets it, once, at the moment they’re trying to move money.
That is the cost, and I took it on purpose. At signup a person has no reason to hold on through an identity check. At payment they have a reason and a reward. Useful checks went from 15% to 98%.
The other six leaks went the same way. Email became the single identifier, which ended a $100,000 a month SMS bill. Personal details collapsed into one step. Biometrics moved to first login. Almost none of this was visual work. It was a business, legal and technical puzzle, solved by asking each thing in the right context.
Beside it: Penfold, where a regulated sequence also turned out not to be required. 33 steps to 5 modules. 3 screens, one line, the live link.
From the public Penfold page (cesarxdesign.com/penfold): a desktop and phone pair from the one component set; the live link large enough to be found.
27 screens to 8. 12% to 88%. 2.1M new users a month. $6.9M a year saved: $5.7M on KYC, $1.2M on SMS.
Home, before
The new signup shipped early, before the redesign, so for a while it delivered people to the old Home. Home held three products in one, portfolio, referrals and learning, behind a second row of tabs under the main one, and in-app notifications pushed the balance around. There was no way to say what a person would see first.
The old Home: the three screenshots, on the Android frame.
CodeCatalog/images/mara/home-old-01 to 03 (1080x2400 screenshots; a name is already painted out of 03; faces stay).
Onboarding was fixed, but only 15% of the people it delivered ever traded. Meanwhile the naira lost 70% of its value, and Nigerians moved close to $60B into crypto as a store of value. The demand was there. The app was the blocker.
Signups were never the goal. A wallet earns nothing while an account sits empty.
What we built with
The design system had come from an agency: a pre-made library, recoloured. It held far more than the product needed, including a full dark mode that never shipped and variants of components whose main version wasn’t in use. Designers had too much to choose from, and engineers were coding things that never reached a user.
Both libraries on one plane, at one scale. Theirs: 99 components, 984 variants, 465 of them dark variants that never shipped. Mine: 34 components, 53 variants, and one logo atom with 22 fills.
CXR/material/mara-ds-board (188 SVGs, manifest.json, board.html). Both sides on light tiles as recognisable components: a button, a drawer, an icon must read even small. His side clear and scannable; theirs organised and digestible. Counts as labels; “never shipped” on the dark count.
I audited it the way I’d audited the product: what is in use. Then I unified, one component at a time. The clearest case was the drawer at the bottom of the screen. From onboarding to Profile to Settings it had been redrawn each time: eight versions, from 136px tall down to 61px, with different buttons and copy.
The drawer: the same 8 screens twice. Eight different drawers, then one component.
drawer-before-01 to 08, drawer-after-01 to 08, drawer-component. The eight heights side by side; the “BVN doesn’t match your details” state on one of the eight.
The amount input sat in all six main flows and had been drawn three different ways. I traced every use, listed every property it needed, and designed one that did the same job everywhere. A system is also what sits around a component: what refreshes it, what happens when the keyboard comes up over it.
The amount input: three old shapes above, one component in the same three uses below.
ds-input-old-01 to 03, ds-input-new-01 to 03 (with the dock).
Three old screens with their mismatched headers marked, and the keyboard covering “Swipe to send”. Then three old screens beside three of mine, dressed.
ds-system-old-01 to 03 (highlights in meta.json: headers in yellow, the keyboard in red); ds-full-old-01 to 03 beside ds-full-new-01 to 03.
And a rule for the team from then on: design within constraint. Pick from the components already in wide use, and stop building one-offs for problems that don’t need them. When I knew the product well enough, the library became our own: everything bespoke, only what we needed. That is what made the redesign possible.
Design within constraint. Then a library of our own.
The rebuild
I didn’t redesign on day one. Redesigning a product you don’t yet understand only makes the same problems prettier. I fixed what could be fixed first, learned the business and the people using it, and redesigned when I knew what the product had to be.
Six flows moved money: send and receive, deposit and withdraw, buy and sell. Each worked differently and none was used much. Send was the one people already knew, because people wanted to send money, so I took it as the base, improved it, and made the other five the same. Every flow now runs action, preview, commit, outcome. There is always a preview before the commit, so nobody is afraid to tap. An input a flow doesn’t need, the note, say, drops out without the layout noticing.
Send, old against mine: 3 screens each.
send-old-01 to 03, send-new-01 to 03. The old one with its overlaps exactly as they were; chrome swapped to the Android frame, insides untouched.
Withdraw, old against mine: 3 screens each. The same three steps as Send.
withdraw-old-01 to 03, withdraw-new-01 to 03.
My Preview, with a label: “Inspiration”. On hover or tap, the same screen in Revolut’s spacing, colour and layout. Revolut’s own screen is never shown.
To build: a twin of send-new-02 (the Preview) dressed in Revolut’s spacing, colour and layout, measured from revolut/mobile/revolut-transfer-01 to 06; same Mara data; IBM Plex stays; cross-fade on hover and on click. Fallback if it eats time: the Preview alone with a one-line caption.
Each of the three products got its own place: Home, Academy and Profile. The balance stays where it is, and nothing pushes it around.
Home, old against mine: one screen with three tabs, then Home, Academy and Profile.
images/mara/home-old-01 to 03 beside home-new-01 to 03.
The whole flow, to click through: pick a contact or add one by MaraID, enter an amount, preview, send. Every state is drawn, so every state is in.
Prototype: Send, with the flow laid out under it.
send-full-01 to 14 and 12b (360x800 Android; every tappable part carries a data-part attribute). Ships only when every tap is wired and tested; otherwise the flow laid out with its states.
The redesign shipped to 24M users in under a month. By then Mara’s funding was failing, and I have no result to report for it.
One pattern made every flow familiar on first use.
The wider scope
Once design was running well, the company asked for more. The engineering lead role was open and the search wasn’t landing, so I took it on as interim. I studied computer science and started as an engineer, so I could speak to developers in their terms, question a plan, and get an outcome. I worked through the lead developer, who ran the team.
Customer support came the same way, through 2 leads with dozens of people under them. I also presented roadmap and growth strategy to the Coinbase-led investor group.
I didn’t own engineering. I supervised and guided it. But by the end I was leading three functions through their leads, which is the shape of the job I’m talking to you about.
Joined to lead 4 designers. Left leading design, engineering and support.
Fix the setup.
Then the product.
Then redesign.