🔥 The Problem
American Express Had No Defined Passkey UX – While Competitors Already Did
Every time you shop online and your bank asks you to verify your identity before completing a payment — that's 3DS. It's the global authentication protocol that sits between a cardholder and their bank during checkout, happening billions of times a day across every major card network worldwide.
For years, that moment looked the same: receive a one-time passcode (OTP) by SMS, type it in, done. The industry is now replacing OTP with Passkey — Face ID or fingerprint. One gesture. No code. Faster and more secure.
Visa, Mastercard, and other networks had already published UX guidelines for this transition. American Express had none — creating five concrete gaps:
Passkey creation during checkout had no defined flow
OTP-to-Passkey authentication had no replacement pattern
Checkout and issuer bank app experiences were misaligned
Lifecycle management (add, update, delete) was unaddressed
Risk of inconsistent implementation once issuer banks were ready to adopt
Without a structured UX framework, American Express would be unable to support issuer banks at the speed the market required.
✅ The Objective
From OTP Dependency to a Presentation-Ready Biometric Authentication Framework
Design a clear, presentation-ready Passkey 3DS UX framework — defining how Passkeys are created during checkout, how they replace OTP during 3DS authentication, how the checkout and issuer bank app experiences align, and how cardholders manage their Passkeys over time.
The goal: ensure American Express is prepared before the market demands it — design readiness ahead of issuer adoption, not launch.
🔦 Understanding the Technical Context
From OTP to Biometrics — How Passkey Changes 3DS Authentication
Final Outcomes
The Complete Passkey UX Framework – Across Both Environments
The final framework covers the full Passkey lifecycle across two environments — from the moment a cardholder first encounters Passkey during checkout, through authentication as a returning user, to managing credentials within the issuer bank app.
☑️ Checkout Environment
Delivered a biometric-first authentication flow within the existing SafeKey (American Express's 3DS authentication service) checkout experience — updated to reflect FIDO Alliance SPC standards for cross-origin compliance.
Passkey Authentication with SPC — Checkout Environment
☑️ Issuer Bank App Environment
Designed the full lifecycle management experience within the issuer bank app — enabling cardholders to add, update, and delete Passkeys independently of the checkout flow.
Passkey Lifecycle Management — Issuer Bank App · Enrollment Flow
🙋🏻♀️ My Role
End-to-End UX Ownership – From Research to Implementation-Ready Design
I led the end-to-end UX design for a framework that didn't exist — no internal reference, no established pattern to follow. Starting from zero, I audited competitor guidelines, defined the interaction model across both environments, and designed the full enrollment, authentication, and lifecycle management flows.
When the FIDO Alliance published an updated SPC specification mid-project, I rebuilt the authentication flow from the ground up — turning a technical constraint into a stronger, more implementation-ready design.
▶️ Design Progress
Competitive Analysis · Stakeholder Alignment · Iterative Design
📒 Phase 1 – Competitive Analysis Understanding the Industry Baseline
Before defining the framework, I audited Visa and Mastercard's existing Passkey UX guidelines — and analyzed how the company's own cardholder platform already handled Passkey registration and authentication — to understand what was already established and where the company needed to define its own approach.
What made American Express's framework distinct was the SafeKey step-up screen — a native authentication touchpoint within the 3DS flow. I anchored Passkey creation within this existing screen, turning a familiar security moment into the natural entry point for enrollment.
Competitive Landscape – Passkey UX Across Networks
Amex MYCA (Cardholder Platform) – Passkey User Journey Analysis
📒 Phase 2 – Alignment with PM and Engineering Turning Technical Complexity Into Shared Design Direction
I facilitated structured working sessions with PMs — sharing design thinking through presentations and walking through interaction decisions in real time.
The most complex challenge was a mid-project specification change. When the FIDO Alliance published an updated SPC spec, it redefined how the Passkey credential is scoped and who acts as the relying party — directly affecting the authentication flow structure and requiring a full redesign of the returning user checkout experience.
📒 Phase 3 – Design & Iteration From Framework to Implementation-Ready Prototype
With the framework established, I designed the full flow across both environments. The SPC update required the most significant iteration — repositioning the payment scheme as the relying party (cross-origin) changed the authentication trigger logic and required a full revisit of the returning user checkout flow.
v1 vs v2 – Passkey Authentication Flow, Checkout Environment
🚀 The Two Environments
The Design Decisions Behind Each Flow
1️⃣ Checkout Environment Designing the Full Passkey Journey Within the Existing SafeKey flow
🔗 View the Full Clickable Checkout Environment
→ Passkey Enrollment – First-time Users Turning a Security Moment Into a Natural Enrollment Touchpoint
The key design decision here was where enrollment happens. Rather than introducing a separate onboarding flow, I anchored enrollment within the SafeKey step-up screen — a moment where the user's identity is already being verified. This eliminated a redundant authentication step and made Passkey creation feel like a natural progression rather than an interruption.
OTP → Passkey Creation — The Transition Moment
→ Passkey Authentication – Returning Users Replacing OTP With a Single Biometric Gesture
The core challenge was trust — making users feel confident that one biometric gesture was as secure as an OTP, without adding friction.
From SMS Code to a Single Biometric Gesture
→ v2 Update – SPC (Secure Payment Confirmation) Repositioning the Relying Party for Cross-Origin Compliance
The initial draft scoped the Passkey credential to the issuer bank. After the FIDO Alliance published an updated SPC specification, a key constraint surfaced — SPC is only supported on select platforms, which directly shaped how the relying party needed to be defined.
To reflect FIDO Alliance and Web Authentication standards, I repositioned the payment scheme as the relying party (cross-origin) — reducing implementation complexity for issuer banks. In a typical SPC flow, authentication occurs on the merchant domain. For Amex, SafeKey's ACS architecture enabled authentication to stay within the same domain — no redirect, no domain switch for the user.
Passkey Authentication Flow — v1 vs v2 (SPC)
2️⃣ Issuer Bank App Environment Extending the Framework Beyond Checkout
🔗 View the Full Clickable Issuer Bank App Environment
→ Passkey Enrollment via Issuer App Proactive Enrollment Before the Next Transaction
For users who prefer to set up Passkey outside of a live transcation, the issuer app enrollment flow enables proactive setup — on their own terms, before they reach checkout.
→ Passkey Lifecycle Management Giving Cardholders Full Control Over Their Passkey Credentials
The design challenge was consistency — lifecycle management needed to feel coherent with the checkout enrollment experience, while accommodating the distinct context of a banking app. Informed by competitive research, I designed the add, update, and delete flows with the cardholder's mental model in mind — ensuring the experience felt intuitive across both environments.
⚠️ Edge Cases & Failure Scenarios
Designing for When Things Don't Go as Planned
A framework is only complete when it accounts for failure. These three scenarios cover the most critical failure points — each designed to keep the user moving forward without abandoning the transaction.
→ Face ID Unable to Authenticate Fallback When Biometric Fails
When Face ID fails to recognize the user, the flow offers a clear fallback path— prompting an alternative authentication method without blocking the transaction. The design priority was to avoid dead ends: every failure state leads somewhere actionable.
→ Generic Passkey Setup Failure Handling Interrupted Enrollment
When Passkey creation fails due to a system error or interrupted flow, the user is automatically redirected back to the merchant payment screen — prompting them to restart the transaction.
→ User Decides Not to Create a Passkey Designing the Graceful Exit
Skipping Passkey creation is a valid user choice — not a failure state. The flow was designed to respect that decision without friction, completing the transaction cleanly while leaving the door open for future enrollment.
🔍 Key Takeaways
Design Principles Shaped by the Framework
A seamless experience doesn't survive a domain switch
Sending users to a different domain mid-transaction — even briefly — creates doubt. Keeping both enrollment and authentication within the same flow protects the trust that makes a transaction complete.
Reducing steps doesn't reduce security — it reinforces it
Waiting for an SMS, switching screens, re-entering codes — each added step makes the experience feel less reliable, not more secure. One biometric gesture in context does more for user confidence than a chain of verification steps.
Sending users back to the start isn't a fallback — it's an abandonment.
When something goes wrong, users need a clear next step — not a dead end. Every error is a design opportunity. Miss it, and you lose the transaction.
🔑 Key Impact
Positioned American Express Ahead of Issuer Market Demand
The framework is currently in active review with PMs, engineers, and issuer bank stakeholders — with India as the first target market and global rollout to follow.
✦ Defined the first E2E Passkey UX framework for American Express in 3DS
✦ Designed 6 end-to-end flows across both environments — covering enrollment, authentication, SPC update, and full lifecycle management
✦ Leveraged the SafeKey screen as a native enrollment touchpoint — a key differentiator from Visa and Mastercard
✦ Aligned framework with updated FIDO Alliance SPC specification to deliver an implementation-ready design
✦ Framework targeting fewer than 50 issuer banks in India as the first rollout cohort, with global scale to follow
✦ Positioned American Express ahead of issuer market demand — before issuers are ready to launch
📚 What I Learned
Constraints Made the Design Stronger
Technical complexity doesn't block good UX – it informs it.
When the SPC specification changed mid-project, work I had already designed had to be rebuilt. It was frustrating — but going deeper into the technical constraints was what ultimately made the design stronger. The more precisely I understood them, the more confidently I could design around them.
Competitive analysis is most valuable not as inspiration, but as a map of what's already solved.
Knowing where Visa and Mastercard had established patterns told me where I could execute with confidence — and where the real design work for American Express actually needed to happen.