eWallet
Redesigning the Withdraw Funds Flow
Turning a cluttered, single-page withdrawal screen into a clear, guided experience — with no product documentation to start from.
- Role
- Product Designer (Solo)
- Timeline
- April 2026 - June 2026
Context & Problem
eWallet is a digital wallet product where users withdraw funds through banks, cards, wire transfers, prepaid cards and crypto. I joined this surface as the sole product designer, with no existing documentation to build on — every pain point had to be found and diagnosed, directly from the live interface.
eWallet
Problem Discovery: Support Signals
Context & Problem
Customer Support signal — the Support team flagged that international customers regularly struggled to find the country/region switcher, buried in the interface. With a large international user base, this became a concrete, evidence-based requirement: promote it to a visible, persistent dashboard control.
Second signal — users frequently backtrack or abandon withdrawals after discovering fees and processing times only at the Enter Amount/Confirm step (Zelle, crypto, PayPal, gift cards). This became a requirement to surface fee and time upfront on the method-selection screen, not after.
eWallet
Key Pain Points
Information overload
20+ withdrawal options — bank accounts, wire profiles, cards, crypto, vouchers — shown as one flat, equally-weighted list with no grouping.
No decision-support data
Fees, processing time and "last used" status were invisible until a user was already deep inside a specific method.
Scattered entry points
Bank-related actions were split across unrelated sections (Bank Accounts, Wire Profiles, Add New Profile), so it was unclear where to start.
User flow
Every screen, decision,
and popup — mapped end to end
- Decision (yes / no)
- Screen / page
- User action (not a decision)
- Info module
- Modal / popup (in-page interaction)
eWallet Dashboard
Implementation Highlights
Bank Account
Withdraw funds in 4 steps
Pop-up
The UX behind
Add bank or card
Context & Problem
The option to add a new payment method wasn't located next to the user's existing accounts; it was located in a separate section at the very bottom of the page. To reach it, users had to scroll past all the existing methods, even if they already knew they needed to add something new.
After clicking the link, the dashboard completely left the page, leading to a separate page with its own workflow, unrelated to the balance and accounts they'd just scrolled through. There, after selecting the card type, users had to read a table crammed with legal fields. On the next screen, before they could even make a payment, a continuous stream of information was displayed, displaying their name, address, date of birth, phone number, email, automatic transfer switch, two legal agreements, and the transaction PIN.
Solution
Adding a method now lives one tap from where the need appears — a single "+ Add bank or card" sits right beside search, above every saved account, instead of eleven buttons scrolled below a full list of balances and existing methods.
Instead of leaving the dashboard, "Add Bank or Card" opens as a modal directly over the withdrawal screen — the balance and saved methods stay visible and dimmed behind it, so nothing about the original task disappears. Selecting a type routes into "Order prepaid card," a nested wizard that reuses the same step-indicator pattern as everywhere else in the product (Card · Info · Payment · Confirm · Result), so stepping into it never feels like switching tools mid-task.
Add Bank or Card, solved
Order a prepaid card in 5 steps
Takeaways
By the end,
Withdraw Funds had
Not a formatting problem
Withdraw Funds wasn't a rows-and-buttons issue. Users couldn't tell what they'd already set up from what was still available, couldn't compare speed and fees without committing first, and had no way back mid-flow if the terms didn't work.
One pattern, everywhere
Saved methods, the last-used shortcut, and session context all surface before anyone has to ask. Search and categories split "I know what I want" from "I'm comparing." The step indicator, close button, and irreversible-action warning repeat the same language everywhere — including inside Add Bank or Card, which reuses the same stepper instead of feeling bolted on.
Where it gets tested
The four method types aren't identical underneath — Bank Account needs its own verification step. Next, I'd test whether "Set Automatic Transfer" is the right moment to ask, and look closer at what happens when a new method fails verification mid-flow.
Mobile
The same hierarchy, one column deep
One column, same order
On mobile everything collapses into a single scrollable column instead of desktop's two-up grid, which keeps the scan order strictly top-to-bottom — there's no side-to-side comparison to slow a thumb down. The hierarchy itself doesn't change: Saved still comes first, then the last-used shortcut, then categories, exactly like desktop. What proves the system was built right is that this order survives the format change instead of needing to be reinvented for a smaller screen.
The button moved on purpose
The most telling adaptation is where "Add new method" lives. On desktop it's a small button next to Search, at the very top — useful if you notice it before you start scrolling. On mobile it's a full-width button placed right after the Saved list, so it appears exactly at the moment a user would need it: right after confirming their method isn't already saved, not several screens' worth of scrolling later. That's not just a smaller version of the desktop button, it's repositioned to match how someone actually moves through a phone screen.
Mobile
all methods
Bitcoin
Lessons
What this project
taught me beyond this one flow
Consistency compounds.
Reusing the same step indicator, close button, and warning pattern across the main withdrawal flow and the nested Add Bank or Card flow did more for usability than polishing any single screen ever could.
A pattern a user learns once keeps paying off every time it repeats — which matters more the deeper into a flow they go, not less.
Symmetry is a hypothesis,
not a given.Every withdrawal method looked interchangeable in the list — same card, same Select button — until building each one out revealed that a bank transfer needs an identity-verification step the others don't.
A system that looks uniform on the surface can still hide branch-specific complexity, and that's worth designing for on purpose instead of smoothing it over for a tidier picture.
Similar actions can hide different intents.
Selecting an existing method and adding a new one both start from the same list, but they're different jobs for the user — one continues a task already in motion, the other starts something new. Recognizing that distinction is what justified giving them genuinely different interaction patterns: selecting fills the right panel as part of the same flow, while adding opens its own popup.
Once that split existed, the two actions no longer needed separating by intent alone — the interaction itself now makes it obvious which one you're doing.
JMA Attachments
