34% Conversion Lift: Redesigning International Money Transfers

EL DOLOR (The Pain)

In Q3 2024, our fintech company noticed a troubling pattern: 43% of users who started an international transfer abandoned the process before completion. This wasn't just a UX problem—it was a revenue problem. Each abandoned transfer represented lost fees and a customer who might try a competitor next time.

Through behavioral data analysis (13,247 sessions) and qualitative research (12 interviews, 3 usability tests), I identified four critical friction points:

Data told a nuanced story. Drop-off wasn't evenly distributed—it spiked at specific steps:

EL PROBLEMA (The Problem)

The international remittance market is competitive and price-sensitive. Our main competitors—Wise, Remitly, Western Union—all offered streamlined transfer flows. Benchmarking revealed:

We weren't just slower—we were almost twice as slow. For users sending money to family in emergencies or paying time-sensitive invoices, this was unacceptable.

**The Core Problem:** How do we reduce a 17-field, 6-screen transfer flow to match competitor speed without violating anti-money laundering regulations or removing features business users need?

Constraints:

Research revealed two distinct user types:

Natural Users (72% of transactions):

Business Users (28% of transactions):

LA SOLUCIÓN (The Solution)

I led the redesign of the international transfers flow, restructuring the information architecture around three principles achieved in 8 weeks:

Rather than forcing one flow, I designed a smart default (optimized for natural users) with progressive disclosure (allowing business users to access advanced options).

Technical Implementation & Design System:

Design System Integration:

I extended the company's existing design system (built on React Native) with new components for this flow:

I collaborated closely with frontend engineers to ensure these components were built for reusability across other financial flows. I created comprehensive design specs with interaction states, animations, and WCAG accessibility requirements.

SWIFT Lookup Implementation:

I designed the complete UX for SWIFT/BIC API integration, collaborating with backend engineer on implementation. I established three key states:

1. Successful lookup (auto-populate fields)

2. Multiple matches (disambiguation UI)

3. No matches (fallback to manual entry with help)

The API had 3-5 second latency, so I architected optimistic UI patterns with skeleton states and cancellation options to maintain perceived performance.

Accessibility Considerations:

Ensured WCAG 2.1 AA compliance for international users, critical for serving diverse populations:

International transfers serve users with varying abilities, literacy levels, and assistive technology needs. Accessibility wasn't optional—it was central to reaching our global user base.

Key Design Decisions:

Decision 1: Real-Time SWIFT Code Lookup

47% of errors were invalid SWIFT codes. Users didn't know where to find them, entered them incorrectly, or gave up entirely.

Solution: Integrated SWIFT code lookup: users type their bank name and country, we auto-populate the correct SWIFT code. If lookup fails, we show instructions with screenshots for finding SWIFT codes.

A/B test with 2,347 users showed the lookup feature reduced SWIFT code errors by 62% and decreased average time on beneficiary screen by 41 seconds.

Reducing Cognitive Load

By automating SWIFT code lookup, we eliminated the need for users to Google, find their bank's website, search for the code, and manually enter it. This single feature saved users an average of 90 seconds and massive frustration.

Decision 2: Outcome-Based Fee Selection

21% of users abandoned at the fee selection screen. Technical descriptions ("Standard SEPA," "Expedited SWIFT") were confusing.

Solution: Redesigned fee options around user outcomes:

A/B test showed 34% reduction in drop-off at fee selection screen.

Designing for Outcome, Not Process

Users don't care about SEPA vs SWIFT. They care about when money arrives and how much it costs. Reframing technical options as outcomes made the choice obvious.

Decision 3: Copy-Paste for Long Codes

SWIFT codes, IBANs, and account numbers are long, error-prone, and tedious to type on mobile. Added one-tap copy-paste functionality. Users can paste from messages, emails, or clipboard. We detect format and validate immediately.

67% of mobile users used copy-paste. Error rates decreased by 41% because users copied from official sources (bank emails) instead of manually typing from memory.

Decision 4: Persistent Transfer Summary Panel

Users completing transfers had no way to review their inputs without backing up through the flow. This created anxiety: "Did I enter the right amount? Was the account number correct?"

Solution: Side panel (desktop) or bottom sheet (mobile) showing transfer details at all times. Users can tap any detail to edit it in-place without losing progress.

Post-launch surveys showed 83% of users felt "more confident" with the summary panel. Support tickets related to "I don't know what I entered" decreased by 56%.

Design/Engineering Collaboration:

This project required tight collaboration between design and engineering. Key collaboration patterns:

**Real-time validation logic:** Worked with frontend engineer to design the validation state machine. We needed to balance immediate feedback (good UX) with API rate limits (cost constraint). Solution: debounce user input by 500ms, show loading state, cache validation results locally.

**Progressive disclosure implementation:** Collaborated on component architecture for conditional fields. Used React context to manage form state and visibility rules. I provided the decision tree logic; engineer implemented it with proper accessibility (aria-hidden, focus management).

**A/B testing infrastructure:** Partnered with backend engineer to design experiment tracking. Defined the funnel events, success metrics, and variant allocation. This allowed us to test 3 variants simultaneously and ship the winner.

**Performance optimization:** I identified that the summary panel was causing unnecessary re-renders. I collaborated with engineer to implement React.memo and useMemo for expensive calculations, reducing frame drops by 73%.

This demonstrates the hybrid skill set required for modern product design: understanding technical constraints, speaking engineering language, and collaborating on implementation details while maintaining user-centered design principles.

TECHNICAL IMPLEMENTATION DEPTH

A/B Testing Infrastructure & Strategy:

I designed and executed a comprehensive A/B testing program with 14,892 users across 4 major design decisions:

I established testing methodology, defined success metrics, and collaborated with analytics team on instrumentation.

Real-Time Validation Architecture:

I designed the validation strategy collaborating with engineering team:

Progressive Disclosure Patterns:

I architected the information hierarchy balancing simplicity with compliance:

Accessibility Implementation (WCAG 2.1 AA):

I ensured international accessibility compliance:

MOCKUPS & PROCESO (Mockups & Process)

Iteration Journey

Round 1: Field Consolidation

First prototype reduced 17 fields to 11 by combining related inputs. Usability testing showed 18% faster completion but users still struggled with SWIFT codes.

Round 2: Inline Help & Validation

Added contextual help tooltips and real-time validation. Completion rate improved but users found tooltips "too wordy" and validation errors "harsh."

Round 3: Fee Simplification

Redesigned fee selection from three technical options to outcome-based choices ("Arrives in 1-2 days," "Arrives today," "Arrives in 30 minutes"). Users responded positively, saying this was "clear" and "helpful."

Round 4: Smart Defaults & Copy-Paste

Final iteration added SWIFT code lookup tool and copy-paste functionality. Tested with 15 participants: 94% success rate, average completion time 2min 18sec (down from 4min 38sec).

Visual Design

The visual design needed to convey trust (this is real money), clarity (complex information made simple), and speed (efficient interface).

Design decisions:

Click to enlarge

Click to enlarge

Click to enlarge

Click to enlarge

Final Flow Walkthrough

Step 1: Amount & Currency

Clean, focused screen with two inputs: "You send" and "They receive." Live exchange rate calculator updates in real-time. Users see exactly how much recipient gets, including all fees.

Step 2: Beneficiary Details

Form with smart field detection. If user pastes an IBAN, we auto-extract country and bank details. SWIFT code lookup integrated inline. Optional fields (intermediary bank, address) hidden unless needed.

Step 3: Transfer Speed

Three outcome-based options (Economy, Fast, Instant) with clear arrival times and fees. Default selected based on most common choice for that currency pair.

Step 4: Review & Confirm

Full transfer summary with all details editable in-place. Arrival date estimate with calendar visualization. Security verification (2FA) before final submission.

Key Features:

CONCLUSIÓN (Conclusion)

I tracked conversion, errors, time-to-completion, and user sentiment across 30 days post-launch with 14,892 sessions.

Conversion Metrics (Achieved in 8 weeks):

Error Metrics (vs pre-redesign baseline):

Efficiency Metrics:

User Sentiment (post-transaction survey, n=1,247):

Business Results:

Revenue Impact:

Support Cost Reduction:

Strategic Impact:

APRENDIZAJES (Learnings)

What Worked Well

**Data-driven problem framing:** I established a data-driven approach starting with behavioral analytics of 13,247 sessions to identify specific drop-off points. This prevented unfocused "improve everything" redesigns and ensured measurable impact—achieving 34% conversion improvement.

**User segmentation strategy:** I identified natural vs business users through research, allowing me to architect smart defaults (optimized for 72% of users) with progressive disclosure (serving 28% power users). I established that single-flow approaches would have compromised for everyone.

**Outcome-based language framework:** I reframed technical options ("Standard SEPA") as user outcomes ("Arrives in 1-2 days"), which became the single highest-impact language change (34% reduction in drop-off at fee selection). I established this pattern applies beyond fintech to any domain with technical complexity.

**Iterative testing protocol:** I designed three rounds of usability testing (5 users per round) that caught issues early. My investment in testing ($7,500 in recruiting and incentives) paid for itself many times over in avoided engineering rework—estimated $45,000 saved.

What I Would Do Differently

**Earlier engineering involvement:** I designed features (like real-time SWIFT validation) that turned out to be technically challenging. Involving engineers in early design discussions would have prevented this.

**International testing:** Our usability tests were Spain-based, but our product serves 40+ countries. Post-launch, we discovered issues specific to certain markets (e.g., Brazil requires additional tax ID fields, which broke our flow).

**Better error message writing:** I focused on preventing errors but didn't invest enough in error message UX. When errors occurred, messages were technically accurate but not helpful. "Invalid IBAN format" should have been "IBANs for France start with FR and are 27 characters. Yours is 25 characters."

**Mobile-first design:** I designed desktop-first, then adapted for mobile. The reverse would have forced stricter prioritization and simpler interactions.

Key Lessons

**Lesson 1: Trust is fragile in financial products.** Users completing transfers weren't confident they did it right, even when they had. Design must not only enable completion but build confidence through feedback, confirmation, and transparency.

**Lesson 2: Copy-paste is underrated.** Letting users paste codes from emails or messages reduced errors and saved time. Yet many fintech apps disable paste for "security." This is misguided—humans are worse at manual entry than copy-paste.

**Lesson 3: Outcome-based language bridges literacy gaps.** Not everyone knows financial terminology. Describing options by outcomes ("Arrives today") instead of methods ("Expedited SWIFT") makes choices accessible to everyone.

**Lesson 4: Real-time validation prevents downstream problems.** Catching SWIFT code errors as users type (instead of after submission) prevented support tickets, retries, and abandonment. Invest in validation infrastructure early.

**Lesson 5: Persistent context reduces cognitive load.** The summary panel showing transfer details at all times gave users a "mental anchor." They didn't need to remember what they entered earlier—it was always visible.

**Lesson 6: Design/engineering collaboration requires technical fluency.** Understanding React's rendering lifecycle, API constraints, and performance optimization patterns made me a better design partner. Speaking engineering language (debounce, memoization, state machines) enabled more productive collaboration and faster iteration.

**Lesson 7: Accessibility constraints improve design for everyone.** WCAG requirements (keyboard nav, clear focus, proper labels) forced us to simplify interactions. The result was a cleaner, more usable interface for all users, not just those using assistive technology.

**Future Direction:** The redesigned flow is now live globally, processing 80,000+ transfers per month. We're expanding the design patterns to other flows (currency exchange, bill payments) and exploring AI-powered features like "smart suggestions" (predicting beneficiary details based on past transfers).