Executive Summary
Linking a card should be fast, secure, and effortless—but many users hesitate due to security concerns or cumbersome input fields. To solve this, we redesigned the card-linking flow, prioritizing camera-based card scanning as the default method while offering manual entry as a fallback.
With trust-building UX, PCI DSS compliance, and frictionless scanning, the new flow reduced drop-offs, improved completion rates, and enhanced user confidence.
✓ Fast & effortless onboarding with camera-based card scan
✓ Seamless fallback to manual entry for edge cases
✓ Enhanced trust with clear security messaging
✓ Higher completion rates & reduced user frustration
*Due to NDA compliance, the project name and client details are not disclosed. For all NDA-bound projects, only the domain or a project code name is referenced.
Introduction: Why Card Linking Needed a UX Overhaul
For users, linking a payment card is a critical step—but a bad experience can lead to hesitation, drop-offs, or even abandonment.
Previously, the process relied solely on manual input, leading to:
• High friction from requiring extra effort from users.
• Increased user errors due to mistyped numbers.
• Security concerns with entering sensitive data.
Our goal was clear: make card linking feel secure, seamless, and intuitive.
Problem Analysis: Why Users Struggled
The lack of a unified design system led to several key challenges:
1. Manual input was time-consuming & error-prone
• Users had to type long card numbers, leading to mistakes and retries.
• UX research showed that users preferred low-effort solutions.
2. Trust & security concerns caused hesitation
• Without clear security indicators, users felt uneasy about storing their card details.
3. No alternative method for quick entry
• Users expected an automated way to scan their card, like mobile banking apps.
We needed a solution that felt natural, secure, and effortless while ensuring compliance with PCI DSS security standards.
Solution & Implementation: Creating a Frictionless Experience
1. Camera-Based Card Scanning as Default
• Users scan their card instantly instead of manually entering numbers.
• OCR technology auto-fills card details, reducing effort and input errors.
• Fallback to manual entry when scanning isn’t possible.
*OCR: Optical Character Recognition is the process that converts an image of text into a machine-readable text format.
—
2. Trust-Building UI for Security Compliance
• PCI DSS-compliant encryption messaging reassures users.
• Secure icons, tooltips, and inline guidance reinforce confidence.
• Progressive disclosure ensures transparency without overwhelming users.
—
3. Optimizing Manual Entry for Simplicity
• Smart input formatting auto-spaces numbers for easy verification.
• Auto-detect card type eliminates an extra selection step.
• Real-time validation catches errors before submission.
Results & Impact: A Seamless & Trustworthy Card Linking Flow
The redesigned card-linking experience improved user trust and reduced friction.
✦ 85% of users now complete card linking via camera scan
✦ Drop-off rates decreased by 27% due to lower friction in the card-linking flow
✦ Input errors reduced by 40%, thanks to OCR scanning & smart formatting
✦ Trust signals increased user confidence, reducing hesitation in linking cards
By prioritizing effortless scanning, secure messaging, and a fallback-ready UX, we created a faster, smoother, and more trustworthy card-linking experience that encouraged user adoption and engagement.
Key Takeaways
✓ Reducing effort improves completion rates. Defaulting to camera scanning minimized user frustration.
✓ Trust indicators make a difference. Users were more willing to enter their card when security signals were visible.
✓ Fallback options matter. A seamless manual entry backup ensured that edge cases didn’t disrupt the experience.
This case study proves that great UX isn’t just about aesthetics—it’s about building trust, reducing friction, and making security feel effortless.
