PayitFast Business: designing business banking from zero

The problem

Money moved through email, chat and spreadsheets

Finance teams at growing UAE businesses were paying suppliers across Asia, Australia and Latin America, but their tools were scattered across bank portals, spreadsheets and email. There was no single place to answer the three questions they care about: what is waiting on me, can we pay what's due, and do these numbers tie out.

• Approvals lived in email and chat. A maker sent a screenshot, a manager replied "ok", and nobody could prove who signed off.
• Every currency meant another account. Balances sat in separate places, so seeing real exposure took a spreadsheet.
• Numbers never tied out. Totals copied by hand between tools drifted, and month-end close meant reconciling line by line.
• Spend showed up too late. Card receipts and expense claims arrived after the money had already gone.
• No sense of freshness. Before moving money, people had to guess whether a balance was current.

My role

End to end, from brief to handoff

I was the Senior Product Designer on PayitFast Business, leading the product end to end from research framing to a working prototype and Figma handoff.

• Product framing: wrote the product brief covering users, jobs, money rules and open questions.
• UX and UI: designed the dashboard and 20 screens behind the sidebar, in light and dark mode.
• Design system: colour tokens, type, components and the card art.
• Flows and edge cases: 25 user flows, two user journeys and a catalogue of 48 error messages.
• Prototype: a clickable React prototype where every figure is calculated from one data set.

Who it's for

Four roles, each with one fear

The users are finance teams inside UAE businesses, not consumers, and every payment passes through maker-checker approval. I designed around four roles and the one thing each is afraid of.

One person can act for more than one company, so the active company is always visible in the sidebar.

Process

Jobs first, then directions, then one data model

I started from the jobs finance teams needed done, explored four visual directions against them, and kept the one that put data above decoration.

1. Ranked the jobs. Approve what's waiting, know we can pay what's due, trust the numbers, move money, control spend, close the month.
2. Studied how teams worked without us. That surfaced the two biggest gaps: totals that never reconciled and approvals with no audit trail.
3. Explored directions. Each one was judged on density, trust and how fast you can scan it.
4. Designed around one data model. One set of accounts and rates feeds every total, chart and tile.
5. Hardened it. Validation, offline and stale states, error boundaries, focus traps and an IBAN check.
6. Mapped flows and journeys. Happy paths plus every edge case and error, then moved the design into Figma.

Key design decisions

A finance lead should never check a number twice

Every decision came back to trust: a finance lead should never have to check a number twice.

• Approvals come first. Four approval cards sit under the greeting with the count, total and earliest due date, so the main job is one click away.
• One source of truth. Every total, chart and tile is calculated from the same accounts and rates. If a figure changes, it changes everywhere.
• Original currency first. Amounts show in their own currency, then "≈ USD" underneath. JPY has no decimals, and every number uses tabular figures so columns line up.
• Maker-checker built in. Nobody approves their own payment. Transfers over $10,000 and every batch need two approvers.
• Confirm in place, never a pop-up. Anything that moves money or can't be undone gets an inline confirm that repeats the amount.
• Status never by colour alone. Every status pairs an icon with a word: Completed, Pending, Declined.
• Freshness and privacy. The header shows when balances were last updated, with a Reload button. A Hide toggle masks balances for screen sharing.
• Brand in the details. Lime #CBFF00 is the primary colour in dark mode. In light mode it would fail contrast, so I used a readable green (#169648) and kept lime for the sidebar, badges and card art.
• Copy from the user's side. "Waiting on you" instead of "Pending items". Plain, specific, no jargon.

What I shipped

21 screens, one system, every edge case

I delivered a working prototype of 21 screens, a light and dark design system, 25 user flows and a full error catalogue, all handed off in Figma.

Design system. 25 colour variables with Light and Dark modes, Inter for everything, Instrument Serif only in the greeting, and reusable components: buttons, status pills, nav items, filter chips, approval cards, stat tiles, tabs, switches, flags and card art.

Edge cases and errors. I mapped two user journeys, one for the finance lead and one for a maker, then 25 flows from login to every feature. Each flow shows errors in red, edge cases in amber and gaps that still need a decision. That produced 48 error messages written as plain next steps, such as "That file is over 2 MB. Split it into smaller batches."

Empty states. New companies see a guided first step, like "Issue your first company card", instead of an empty table.

Results and learnings

One place where every figure reconciles

PayitFast Business gave finance teams one place where approvals come first and every figure reconciles.

What I learned

• In finance, trust beats delight. The prettiest direction lost because it hid numbers.
• Brand colours need two answers. Lime works on dark but fails on white, so the system needed a light-mode partner.
• Writing the error messages early changed the flows. Several gaps only showed up when I tried to explain them in one sentence.

Still open: real fee schedule and cut-off times per currency, whether AED is a held currency, and which KYB limits should show before a business is verified.

Links

Go deeper

• User flows with edge cases and errors PDF · 6.5 MB↗
• User journeys and error catalogue PDF · 1 MB↗