Zephyr Fintech: Optimizing the KYC & Card Onboarding Flow
Khadijah (Dija) 💥
Zephyr Fintech: Optimizing the KYC & Card Onboarding Flow
The physical card ordering and Know Your Customer (KYC) flow is a critical conversion chokepoint for financial applications. High friction during identity verification directly correlates with user abandonment and lost revenue. For Zephyr, a modern fintech platform, the objective was to architect and engineer a frictionless, 28-screen compliance journey that maximizes conversion rates without compromising regulatory security.
Project Snapshot
Role: Lead Product Designer & Mobile Engineer (React Native)
The Challenge: Mitigating user drop-off during mandatory document uploads, PIN configuration, and identity verification.
Technology Stack: Figma (UX/UI Architecture), React Native, Expo, TypeScript (Client-side Engineering).
The Outcome: A highly optimized onboarding flow encompassing delivery logistics, data profiling, and secure document capture, executed with absolute precision in code.
The Challenge: Bridging Design and Implementation
Traditional onboarding flows overwhelm users with dense forms and invasive document requests. Furthermore, the industry frequently suffers from a disconnect between UX strategy and final implementation. When high-fidelity designs undergo a standard developer handoff, critical micro-interactions and layout structures are often degraded, eroding user trust.
The Core Objective: How can we design an interface that securely collects sensitive financial data while minimizing cognitive load, and subsequently build it flawlessly in code to ensure the final product retains its premium feel?
The Solution: A Unified Design Engineering Approach
By taking ownership of both the UX architecture and the React Native codebase, I eliminated the traditional handoff friction. The entire card onboarding architecture was mapped in Figma and directly translated into React Native. This integrated approach ensured that every micro-interaction, padding constraint, and typographic scale was pixel-perfect, resulting in accelerated delivery and a superior end-user experience.
The Architecture & Execution
Phase 1: Card Configuration & Logistics
The flow initiates by establishing product value before introducing compliance friction.
Order Logistics (
order-card, card-checklist): Setting immediate, transparent expectations regarding the onboarding timeline.Customization & Routing (
delivery-address, choose-name): Streamlined data entry prioritizing address validation and card personalization.Cryptographic Setup (
security, set-pin, repeat-pin): Engineered custom, highly responsive keypad components in React Native to ensure native-level performance during PIN configuration.
Card Setup Flow
Phase 2: KYC Profiling & Frictionless Data Entry
Manual data entry on mobile devices is inherently tedious. To combat fatigue, standard text inputs were replaced with tactile, interactive selection cards.
Intent Validation (
questions-intro, purpose-question, purpose-confirmed, usage-options): Capturing user intent early using transparent, reassuring microcopy.Account Architecture (
account-type, account-options): Designing distinct visual pathways tailored for personal versus business use cases.Financial Estimation (
yearly-volume, volume-options): Replacing numerical keyboard inputs with single-tap estimation brackets to accelerate completion.Engineering Implementation: Built reusable, state-driven UI components powered by React Native Reanimated, delivering 60fps animations that make user input feel instantaneous.
Phase 3: Secure Identity Verification
The most sensitive phase of the flow. Failed uploads directly increase customer support overhead and manual verification costs.
Document Taxonomy (
verify-identity, document-type): Deployed universally recognizable iconography for international passports and ID cards to eliminate ambiguity.Precision Capture (
upload-id-form, selfie-with-id, address-proof): Engineered custom camera overlay interfaces to guarantee perfect document alignment and clear facial capture on the first attempt.System Feedback (
document-upload): Integrated upload progress states and device-level haptic feedback to provide continuous reassurance during encrypted network requests.
Phase 4: Processing & Finalization
Concluding the flow with seamless payment integration and instant visual confirmation.
Block Type: Bulleted List
Asynchronous Processing (
processing, loading, activity): Implemented skeleton loaders and transitional animations to sustain user engagement during backend data validation.Financial Integration (
digital-wallets, pricing): Providing transparent fee breakdowns and immediate digital wallet provisioning.Conversion Confirmation (
payment-almost-done, order-confirmation, pay-new-card, payment-success): A definitive success state that reinforces user accomplishment and builds anticipation for physical delivery.
The Takeaway
Building a 28-screen flow is tough because it's so easy for users to get overwhelmed by all the compliance steps. We kept the process feeling light and approachable by sticking to a strict "one-question-per-screen" layout. Because I could jump directly from Figma into React Native, I didn't have to compromise on any of the details. What we designed is exactly what the user actually feels on their phone.
The best fintech apps don't just look good in Figma. They have to feel completely solid in the user's hands. That is exactly why being able to code what you design is so important
If you need someone who can handle both the UX design and the React Native build for your next mobile app, I would love to chat. Reach out to me right here on Contra!
Like this project
Posted Aug 17, 2026
Architected a frictionless 28-screen KYC & card onboarding flow for Zephyr. I bridged Figma & React Native to engineer a high-converting mobile experience.
