Global Payments UX: Redesigning a High-Conversion International Transfer Experience
The International Money Transfer project aimed to deliver a seamless and trustworthy experience for users sending money globally.
The existing product faced critical challenges: the home page lacked a clear hierarchy of content and actions, the transfer flow was hidden, with unclear fees and exchange rates that slowed users down and reduced submissions, and the recipient list and transfer status pages relied on table layouts poorly optimized for smaller screens.
These issues not only created friction and drop-offs at key steps of the transfer journey but also risked weakening user trust in a highly competitive B2C market where clarity, speed, and transparency directly drive adoption.
All visuals and details have been anonymized to comply with NDA, but the design logic, structure, and challenges reflect the actual work delivered.
This redesign improved clarity, reduced hesitation, and produced a measurable improvement in task success (qualitative), supported by iterative validation. I led a structured redesign process that combined Competitor Analysis, Data Analysis, Persona & Journey Mapping, User Flow optimization, Before & After comparisons, User Testing, and Responsive Web design.
This approach ensured that every decision was grounded in real user needs and measurable impact. Beyond solving immediate pain points, I also contributed new and updated components to the shared design system, unifying the refreshed visual language across campaigns and product features.
My focus was on enhancing clarity, consistency, and trustworthiness, while maintaining a seamless cross-device experience that reflected the brand's renewed identity.
Research
Competitors 💡
Wise · RBC · PayPal
I analyzed three major players in the international money transfer market: Wise, RBC Bank, and PayPal. Wise differentiates itself with clear exchange rate visibility, transparent service fees, and a simple step-by-step transfer process that helps build user trust. PayPal is strong in payment flexibility and ease of use but lacks detailed tracking and reliable rate guarantees. RBC provides the assurance of a regulated bank but offers a more complex interface with fewer user-friendly features.
This comparison highlighted opportunities for improvement in transparency, responsiveness, and usability, which directly shaped the design direction for my project.
| Common Attributes |
|
|
|
|---|---|---|---|
| Ability to make send and collect money both | |||
| Need to sign in before transfer money | |||
| Transfer money process stepper 1 2 3 | |||
| Min & Max limits daily | |||
| Exchange rate hold/guarantee (by daily/hourly) | |||
| Clear service fee | |||
| Estimate arriving date | |||
| Transfer details | |||
| Add, edit, delete payee information | |||
| Multiple payment methods (bank account, credit card, wallet) | |||
| Notifications (SMS, email) | |||
| Purpose of payment |
Discovery
Persona & Journey Map 👤
Stage · Steps · Thoughts · Touchpoints · Emotions
I created personas to represent different types of users who depend on global money transfer services to receive support, send funds to friends and family, and manage expenses across borders.
The journey map captured the end-to-end experience, from discovering and considering the service to signing in, transferring money, managing payees, and reviewing transactions, with a focus on improving transparency and simplifying key processes.
Mapping user actions, goals, pain points, and emotions at each stage revealed where the process felt unclear, time-consuming, or untrustworthy. These insights informed the redesign strategy, focusing on improving transparency, simplifying key workflows, and ensuring a consistent, mobile-first experience across devices.
Architecture
Userflow 🔁
Home · Transfer Money · Manage Payee · Transaction History Pages
I created this user flow to map the complete experience of sending money internationally, from secure login through to transfer confirmation and transaction history. The flow captures the main journey of entering recipient details, reviewing fees, exchange rates, and delivery times, and confirming payment, while also accounting for supporting actions like managing payees, tracking transfers, and handling errors.
By visualizing these interactions, I was able to identify pain points such as unclear confirmation steps and complex payee management, and ensure that each pathway provides clear feedback and guidance. This user flow became a foundation for refining the redesign, helping align user needs with business requirements while streamlining the transfer process.
Section 01
Home Page
Components: Navigation, Inputs, Promotion, and Carousel
⚠️ Pain Points
Competing visual sections and misaligned inputs fragmented the experience, reducing user focus and lowering promotional engagement.
Competing visual sections — Side nav, rate inputs, and promo banner created visual imbalance
Misaligned inputs with no hierarchy — Caused confusion and errors during task completion
Low-visibility promotional CTA — Poor placement confirmed by user behaviour data to reduce engagement
No intentional layout strategy — Page structure did not support user goals or conversion
🛠️ Solution
A focused linear layout with repositioned promotional content and a responsive structure delivered a consistent experience across all devices.
Linear rate input flow — Simple step-by-step process guides users with fewer errors
Promotional content below hero — Repositioned for maximum visibility and engagement
Redesigned carousel — Each section clearly tied to specific user actions
Responsive & readable layout — Consistent experience across all device sizes
Full Page Scrolling & Navigation
Smooth vertical scroll across a focused linear layout surfaces exchange rate information and promotional content in sequence, without competing sections fighting for attention.
Put Amount
An inline amount input with live exchange rate calculation shows the converted value and estimated fee in real time, reducing hesitation before initiating a transfer.
Transfer Method Tab
Tab-based navigation lets users switch between transfer methods while keeping the form state intact, minimising re-entry and reducing friction at the start of the flow.
Process Accordion
A collapsible accordion breaks down the transfer process into clearly labelled steps, helping new users understand the flow without overwhelming the home page layout.
Section 02
Send Money Page
Components: Stepper, Transfer Forms, Modal
⚠️ Pain Points
Nested accordion inputs and a weak step counter left users disoriented, while dense fields and an invisible timeout modal increased errors and eroded confidence.
Nested accordion inputs — Key fields for recipient, amount, and reason are hard to access
Unclear step counter — Users unsure about progress or what comes next
Densely packed, misaligned inputs — Increased likelihood of errors, especially for first-time users
Invisible timeout modal — No urgency cues, easy to overlook, undermining user confidence
🛠️ Solution
Accordion inputs were replaced with a flat layout, progress was made visible, and key alerts were redesigned to communicate urgency at the right moments.
Flat single-page layout — All fields visible without extra clicks or nested accordions
Redesigned step counter — Clear progress indicators and labels keep users oriented
Improved input spacing & contextual validation — Reduces errors and supports accessibility
Rate expiry alert near top of page — Reinforces time sensitivity throughout the transfer flow
Redesigned timeout modal — Bold primary CTA and brand-aligned styling communicate urgency clearly
Transfer Information Inputs
A flat, single-page form replaces the previous nested accordion, exposing all required transfer fields at once for faster completion and less disorientation throughout the flow.
Inputs Error Message
Inline validation highlights individual field errors in real time with plain-language messages, guiding users to correct issues before attempting to submit an incomplete form.
Timeout Modal
A prominently styled alert warns users of session inactivity before automatic logout, with a visible countdown and a single action to resume the transfer without losing progress.
Page Level Success Message
A full-page confirmation screen reinforces a completed transfer with key details, estimated delivery time, and clear next steps to review history or manage payees.
Section 03
Payee Management Page
Components: Filter, Table
⚠️ Pain Points
No filtering, poor action visibility, and a layout not built for mobile made the payee list slow, error-prone, and frustrating to use.
Unfiltered, scrollable list — Increasingly inefficient to find payees as the list grew
Edit & delete as plain text links — Easy to miss and tap by mistake, especially on mobile
Not optimised for mobile — Required horizontal scrolling and manual zooming
"Add new recipient" lacked visibility — Key action buried, making the flow unintuitive
🛠️ Solution
Key actions were surfaced as buttons, mobile was restructured into stackable cards, and the add/edit flow was simplified end to end.
Responsive layout with clear spacing — Easier scanning across both desktop and mobile
Buttons replace text links for edit, delete & add — Improved visibility and reduced interaction errors
Stackable mobile cards — Easier to browse and tap on smaller screens
Simplified add & edit flow — Guides users more clearly through recipient management
Add New Recipient
A simplified form collects recipient details with inline validation and contextual hints, guiding users through bank and account fields to reduce entry errors from the start.
Edit Recipient
Pre-populated fields allow users to update payee details quickly, with changes confirmed by a success notification and an immediately refreshed recipient list.
Delete Recipient
A confirmation modal requires explicit user intent before removing a payee, preventing accidental deletions and displaying a clear outcome message after the action completes.
Pagination
Page-based navigation across the recipient list keeps the table focused and scannable, with record counts and forward/back controls for managing large payee collections efficiently.
Section 04
Transaction History Page
Components: Filter, Table
⚠️ Pain Points
No filtering, a packed table, and a broken mobile layout made transaction history nearly unusable for users managing multiple transfers.
Flat filters with no keyword search — No way to refine or contextualise results
Tightly packed table with no hierarchy — Hard to scan recipients and statuses quickly
No pagination — Long histories required extensive scrolling to find specific entries
Broken mobile layout — Columns squished, text cut off, horizontal scrolling required
🛠️ Solution
New filters, pagination, and a modernised table brought clarity and efficiency across all devices for users managing large transfer histories.
Filters & search by date, currency, recipient, status — Refined sorting for any use case
Modernised table with colour-coded status indicators — Key info instantly scannable
Pagination for large datasets — Streamlines navigation through extensive transaction records
Mobile stacked cards — Preserves clarity and improves tap-target accuracy on small screens
Filter on Desktop & Tablet
Date range pickers, currency selectors, recipient search, and status filters combine to let users narrow large transaction histories to exactly the records they need.
Filter on Mobile Screen
On smaller screens, filters collapse into a bottom sheet overlay with clear apply and reset controls, preserving the full filter set without cluttering the mobile table view.
Validation
User Testing
Moderated Testing · Think-Aloud · Qualitative Insights
To validate the usability and clarity of the proposed solution, I conducted moderated user testing sessions focused on key user flows and interaction points. The goal was to understand how users interpret the interface, where friction occurs, and whether the design supports task completion without additional guidance.
The sessions explored first-time comprehension of core flows, clarity of labels and hierarchy, system feedback, and moments of hesitation or misinterpretation, with particular attention paid to how closely the experience aligned with user expectations.
Due to NDA constraints, testing scenarios were designed using anonymized content and neutral task descriptions while preserving real-world complexity and decision-making patterns. Participants were encouraged to think aloud throughout the sessions, allowing qualitative insights to emerge beyond task success rates and helping surface underlying mental models and confidence gaps that informed subsequent synthesis and design iterations.
Insights
Data Analysis 👀
Qualitative Synthesis · Pattern Identification · Insight-Driven Refinement
Following user testing, I synthesized observations across sessions to identify recurring behavioural patterns rather than isolated usability issues. The analysis focused on moments that influenced user confidence, efficiency, and trust — particularly where hesitation, misinterpretation, or uncertainty consistently appeared across different touch points.
Through this synthesis, themes emerged around clarity of hierarchy, progression cues, recognition over recall, and reassurance at key moments. These patterns highlighted opportunities to reduce cognitive load and better align the interface with users' mental models, particularly in decision-intensive, high-confidence scenarios.
The analysis showed that relatively small adjustments — such as clarifying hierarchy, refining language, and improving the timing and visibility of system feedback — had a meaningful impact on how confidently users navigated the flow. These insights directly informed subsequent design iterations, ensuring that changes were grounded in observed behaviour rather than assumptions.
Delivery
Responsive Web
Desktop · Tablet · Mobile
After holistic validation across workflows, the design was fully resolved into responsive layouts for desktop, tablet, and mobile. The interface was designed with responsiveness in mind from early stages, ensuring a consistent experience across desktop, tablet, and mobile breakpoints.
Rather than simply scaling layouts, I adjusted hierarchy, spacing, and interaction density based on the context of use. Priority actions were kept easily reachable on smaller screens, while secondary information was progressively disclosed to reduce visual noise. This approach ensures usability and clarity across devices while maintaining visual consistency and brand integrity.
