B2B pay-later app

The first KYB flow followed the regulations to the letter and ran to six steps. Reading what the rules actually require of a lender cut it to two: company details come from the registers, and only people who own 25% or more are asked for a date of birth and a home address. With few users at this stage, and to keep development efficient, the product uses manual review for now; 03 covers how.

The ABN lookup decides whether the flow can go on. When the registers return a live company, the confirmation screen shows what came back, read-only, and asks one thing: is this your business? When they show the company is no longer operating, the flow stops right there and says why in plain words, instead of letting someone fill in another five screens for nothing.

The first version was the ideal flow: everything verified online against the registers. Walking through it with the developer, I proposed splitting it. A manual-review flow ships first: the applicant enters the details and uploads documents, and a person checks them within a couple of working days. The registry-backed flow follows in the next sprint. It was easier to build, easier for reviewers to run, and it gets the business lending sooner.

The overview screen and its structure stay the same across both flows, so neither applicants nor the developer have to relearn anything when the second one lands. The app is honest about it too: this step is “done by a person, not a system”.

Reviewers see what the applicant entered, the files they uploaded and a checklist to work through, with flags raised for them. A note the applicant leaves at upload (“the company changed its name in May 2024”) shows up on the reviewer’s side as a flag. Approve with a limit, or reject with a reason.

Before designing, I read the PRD for places where the product would contradict itself. The app let people choose a repayment term while the back end fixed a different number of instalments, so the simulated schedule and the real one could never match: a complaint waiting to happen. Late fees had no cap, and nothing reminded anyone that a payment was due.

I raised these and designed for them: a term picker that shows the total cost as you choose, and due-date reminders with a notification centre.

Three tiers of Figma variables (primitives, semantic light / dark, scale), 117 in all, with every text and status colour pair checked against WCAG 2.1 AA. Gradients and shadows can’t live in variables, so styles are the source of truth for those. Surfaces follow three levels, with one rule I like: only one glow per screen. Tokens export as JSON and CSS.

The logo was hand-drawn by the client. I vectorised it and produced the standardised outputs: app icons for iOS and Android, the single-colour Android notification icon, favicon and wordmark.

Two months, one designer, evenings and weekends, 110+ screens plus a back office and a design system: I ran this as an AI-assisted design sprint with Claude and the Figma MCP. I owned the research, the decisions and the review; AI did the volume. I reviewed every screen and checked each batch against the source.

The home screen shows how the iteration went. I drew three options and walked the client through the trade-offs of each; they chose the card layout, and I refined the card’s materials for the final version.

There was no merchant to walk the flow with before handoff, because there were no merchants yet; that is the first thing I would change. And the instalment-term mismatch I found in the PRD would have been cheaper to settle with the developer in week one than after the screens were drawn.