Case study
A digital wallet for Singapore, with a mobile app for customers and a web dashboard for the operations team.
90Screens
Minxpay is a digital wallet for Singapore, with a mobile app for customers and a web dashboard for the operations team, covering balances, top-ups, currency exchange, withdrawals, and linked bank accounts.
This case study covers 45 desktop screens, each with its own mobile companion: onboarding and identity verification, the live transaction dashboard, top-up and payment methods, withdrawals with an audit-ready review step, an ATM locator, and account settings.
Client
The client's internal figures are confidential. Everything shown here is the design work itself.
Process
Problem
Fifteen of Minxpay's screens are dedicated to onboarding and identity (sign-up, agreement, email/phone verification, passcode setup), and that matters: poorly sequenced KYC flows lose a large share of users before they finish.
Top-up, withdrawal, and bank linking each needed their own identity check, and a generic "enter code" screen repeated with no visual or behavioral consistency trains no one; it just adds friction every time.
A single top-up touches method selection, currency choice, verification, and a result state: four decisions that needed to feel like one continuous action, not four page loads.
Users want their money now; compliance needs a record of exactly what moved, from where, to where. Those two needs usually fight each other in the UI.
User persona
Goals
Give every identity check (sign-up, top-up, withdrawal, bank linking) a consistent visual shell, so users learn the pattern once instead of relearning it five times.
Default to biometric/passcode verification for in-app transactions and reserve OTP for account-level changes, matching where each method actually performs better.
Keep balance, amount, and account context visible through every step of top-up and withdrawal, instead of losing it behind page navigations.
Make the withdrawal review screen legible enough to double as a receipt: Transaction ID and From/To visible before the user even confirms.
Research
Long KYC flows lose people; keep identity steps short and resumable.
Re-upload requests drive abandonment; get capture right first time.
PIN and OTP friction stalls transactions; ask only when risk demands it.
Biometric confirmation completes more smoothly than OTP; make it the default.
People prefer picking their currency over auto-switching; keep it in their hands.
Manual KYC re-checks at withdrawal delay payouts; verify once, up front.
Primary flow
Grid system
Every desktop screen sits on a 12-column grid with a 24px gutter and an 80px outer margin; the mobile companion collapses to 4 columns with 16px gutters. Spacing steps in multiples of 4 so a card, a table row and a modal all land on the same rhythm.
Components
Feature 01
New users arrive from several entry points (email, phone, social) and need to trust a wallet before they'll trust it with money. Minxpay splits Sign In, Sign Up, and password recovery into single-purpose screens instead of one long form, and gives legal consent (Agreement) its own step in plain language rather than a checkbox buried at the bottom of a long form. Each screen asks exactly one thing, so a user always knows what happens when they tap the button.
Feature 02
Minxpay asks for identity verification more than once: at sign-up, and again at every sensitive action. Rather than reusing one generic "enter code" screen everywhere, Minxpay gives verification a consistent shell and makes passcode/Face ID the default for in-app transactions, keeping OTP for account-level changes. That split reserves the highest-friction method for the moments that actually need it.
Feature 03
The dashboard is the first and most-returned-to screen, and it has to answer three questions at a glance: is my money moving normally, where did it go, and what needs my attention. Minxpay leads with three trend cards (Card transfer, Bank app transfer, Same app transfer, each with a week-over-week percentage) above a weekly bar chart, then pushes the full transaction table below. A KYC nudge sits as an inline banner, not a blocking modal.
Click map
A design-intent click map of the dashboard: heat sits only on interactive targets (buttons, tabs, links, menus), weighted by how central each action is to an admin's day. It maps layout decisions, not recorded sessions.
It is the only filled button on the page, so an unverified admin's first click goes to identity verification.
The two highest-traffic money actions sit first in the row; Exchange and More take the overflow.
Dashboard, Transfer and Settings stay pinned in the sidebar on every screen, so admins can jump between sections without losing their place.
Today / Month / Year is the main way admins re-read the KPI cards, so it stays warm all session.
History menus, See all links and Refer now catch occasional clicks without pulling focus from money movement.
Design-intent map, not recorded data.
Feature 04
Topping up is Minxpay's highest-traffic action, and the source flow shows why it needed the most screens: method (card, Apple Pay, PayNow, bank transfer), currency/wallet, verification, then a result state. Minxpay keeps the base Top-up screen persistent underneath every choice (currency picker, Apple Pay sheet, verification) as an overlay rather than a page change, so the running balance and preset amount ($40, "No extra fees") stay visible through the whole decision.
Feature 05
Withdrawals are where trust and compliance meet: the user wants their money now, and the system needs a record. Minxpay builds a four-step spine so the review screen doubles as a receipt a user could screenshot, not just a confirmation dialog. A separate Completed Summary repeats the same Transaction ID and From/To pair afterward, closing the loop.
Feature 06
Not every withdrawal happens inside the app. The ATM Locator answers "where's the nearest one" with real-world specificity (distance, address, hours, rating) for actual Singapore locations like Plaza Singapura and Dhoby Ghaut MRT, rather than a generic pin-drop. Distance and open-status sit directly on each list item, so comparing options happens on the list, not after tapping in.
Feature 07
Cards and bank accounts change over time, and Manage Accounts treats edit and delete as first-class actions instead of something buried in a menu. Removing a linked account asks for confirmation naming the specific account ("remove Standard Chartered account?") instead of a generic warning, and every add/remove action gets its own success state confirming exactly what changed.
Responsive
All 45 screens ship in a 375px mobile variant alongside the desktop layout. The 12-column desktop grid collapses to 4 columns, KPI cards stack instead of sitting side by side, and the transaction table becomes a scrollable list, but the flow, the labels and the verification steps stay identical, so a user moving between the two never has to relearn anything.
Visual language
Minxpay's palette leans on a deep teal as the primary color, a choice that reads as stable and banking-adjacent rather than trend-driven, with a single amber accent reserved for calls to action, so it never competes with the status colors doing real work elsewhere. Type is set in Quicksand, a rounded geometric sans that softens what could otherwise feel clinical on a money app, without sacrificing the legibility a transaction table needs.
Typography
Before / After
Three moments carried most of the friction. Each one is shown as it worked in the source flow, and as it works now.
A wireframe reconstruction of the source flow, drawn from the project brief. It is not a screenshot of the old product. Step 1 of 4: the wallet balance and the amount are not on screen yet.
The shipped Top-up screen. Balance, the $40 preset and the payment method stay on one screen, and every further choice opens as an overlay.
Five separate "enter code" screens, each with its own layout and behavior. Users relearn the check every time.
Two shells: biometric-first for in-app transactions, OTP reserved for account-level changes. Learned once, reused everywhere.
Four decisions spread over four page loads. Balance and amount disappear after the first screen.
One persistent Top-up screen. Every choice opens as an overlay, so the running balance and the $40 preset stay visible throughout.
Transaction ID and From/To appear only after the money has moved, so speed and auditability pull against each other.
The review screen doubles as the receipt: Transaction ID and From/To are visible before the user confirms.
Results & Impact
Every money-movement action in Minxpay (top-up, withdrawal, bank linking) now follows the same method → currency/account → verify → result shape. Five one-off verification screens became two consistent shells, and balance, amount, and account context stay in view from the first tap to the receipt.
Design-level outcomes measured against the source flow. Live conversion data will follow launch.
Learnings
The OTP/biometric split (passcode/Face ID for transactions, OTP for account changes) is applied screen by screen by convention, not documentation. A one-page micro-pattern spec would have saved redrawing the same code-entry layout five times and keeps future screens consistent.
The transaction table doesn't yet distinguish who initiated an action (admin vs. account holder), which is worth resolving before treating this as a true multi-user admin surface.
Keeping the base Top-up screen visible under every overlay (currency, Apple Pay, verification) works well for context, but it means every overlay has to be designed against a busy background. A cleaner separation of "decision layer" from "context layer" would simplify future additions.
Designing every desktop screen with its mobile companion from the start kept flows, labels and verification steps identical across both, which was far easier than retrofitting a mobile layout later.
Building a digital wallet? We can help you ship it.Have a product like this? Let's talk. Book a call
PDF, 3 MB
Get a free UI/UX audit and discover what’s holding your site back
