The Impact
The redesign didn't just look better:
22% faster onboarding: New users complete signup + card add in just 1 minute 10 seconds on average.
100% task success rate in usability testing (reward center & QR code discovery)
Significant reduction in onboarding support requests, saving hundreds of support hours.
160,000+ members now enjoy a clearer, more engaging experience.
The Diagnosis: Three Critical UX Failures
User interviews and support tickets pinpointed the exact fractures:
Lengthy Instructions: A wall of text instructions that users ignored.
Hidden Entry Point: The reward page link was buried deep in the phone's Wallet app.
Hidden QR Code Access: Accessing a simple QR code required a frustrating app-browser ping-pong.
My Role & Scope
I led the end-to-end redesign of the card-addition flow and reward center, owning:
Pain point analysis via support tickets and user discussions
Journey mapping and competitive research
Visual & interaction design (including motion cues)
Usability testing coordination
Cross-functional alignment with growth, PM, and developers on requirements and technical constraints
Detailed handoff documentation for CRM compatibility
Design Strategy – Solving Two Core Problems
I tackled the redesign in focused streams, always respecting technical limits (no add-to-wallet verification, CRM-wide customization ripple effects).
1. Seamless Card Addition – “How Might We Guide Users Intuitively?”
The old flow felt like a technical chore that no user want to spend time reading. So we shifted from dense instructions to emotionally inviting, step-by-step guidance:
Visual metaphor: Animated sequence mimicking sliding a physical card into a wallet.
One action at a time: “Add to Wallet” → auto-activate “Done” button after success that redirect to the reward page.
Frictionless flow: Implemented a 5-second fallback so users can access the reward page even with slow internet or if users skipped the step .
2. Discoverable Reward Center – “How Might We Encourage Exploration?”
Competitive analysis (Eber, Mobile Card) revealed gaps in feature visibility and missing loyalty staples (e.g. referrals, promo codes). To increase our product's competitiveness, I implemented:
Card-like layout: Prioritized key info at the top for instant scannability
Subtle motion cues: Gentle animations to highlight QR code access and new coupons
Future-proofing: Designed ready spots for upcoming features (referrals, promo codes)
Validation – Usability Testing
I conducted quick tests with 5 new users familiar with loyalty programs but not Wallet Pass, and the results were positive:
Average onboarding time: 1 min 10 sec (22% improvement)
100% independently found member center entry
100% independently located QR code
Universal preference for new design (“cleaner, clearer”)
Documenting CRM Customizations
This wasn't a greenfield project. Every pixel change rippled through a live B2B SaaS platform.
Technical Deep Dive: I mapped dependencies with developers to understand what data we could actually verify (like card add success) and what CRM customizations we couldn't break.
Strategic Documentation: I created detailed flow diagrams and a UAT checklist, explicitly calling out impacts on the client-facing admin panel to ensure seamless handoff and future maintenance.
Key Learnings: Navigating in Complex Product Ecosystems
Redesigning within technical constraints and legacy foundations taught me to:
Bridge design vision with engineering reality through early, frequent alignment
Use collaborative brainstorming to spark creative yet feasible ideas
Prioritize ruthlessly — solve one problem fully before moving to the next
Always design with scalability and cross-product impact in mind
