Enroll a Passkey With a Safe Fallback
Design passkey setup that explains where access lives, confirms success, and leaves the person with a usable recovery route.
The brief
Understand the problem
Background
Passkey prompts depend on operating systems, browsers, device locks, and account sync. If the product only celebrates a successful setup, people may discover too late that the credential is unavailable on another device or that their fallback is outdated.
User context
Caleb wants to replace password sign-in on his shopping account. He is enrolling from a shared family laptop but normally signs in from a personal phone and needs to understand which device will store the passkey.
Product problem
People need a clear choice of authenticator and recovery method without being overwhelmed by protocol language or tricked into storing access on the wrong device.
Objective
Create passkey education, authenticator selection, enrollment, and recovery-readiness review for one account.
What to design
Define the experience
Required experience
- Understand the practical benefit and requirements of a passkey
- Choose a device or security key with clear storage context
- Complete operating-system verification and confirm enrollment
- Test or update an independent fallback before leaving setup
Screens and states
- Passkey introduction
- Authenticator choice
- Enrollment result
- Recovery readiness
Core user flow
Follow the critical path
- 01
Caleb starts setup and learns that the shared laptop would store or sync the credential under its active system account
- 02
He chooses to create the passkey on his personal phone using a cross-device handoff
- 03
The phone confirms its screen lock and returns a successful result
- 04
Caleb names the passkey and verifies his recovery email
- 05
The account shows where the passkey can be used and how to remove it later
Product rules
Requirements and constraints
Requirements
- Explain passkeys in terms of devices, screen locks, sync, and sign-in behavior
- Identify whether each authenticator is local, synced, shared, or removable
- Handle cross-device handoff without presenting a QR code as a reusable secret
- Confirm the new credential by name, creation time, and reachable device context
- Require at least one independent recovery path or an explicit informed choice where policy allows
Constraints
- System dialogs cannot be visually controlled by the product
- Browser and operating-system support varies
- The interface must not claim that a passkey prevents every form of account takeover
Reality check
States worth considering
Finish line
What to deliver
- Four responsive screens covering cross-device enrollment, success, and fallback verification
Optional direction
Visual resources
Use these as a starting constraint if you want one. They are not part of the required solution.
Stint Ultra Expanded & Roboto
Clear interface writing gives people the confidence to understand what changed and decide what to do next.
Stint Ultra Expanded & Roboto
Clear interface writing gives people the confidence to understand what changed and decide what to do next.
Theory to review
UX principles for this brief
Use these as decision lenses, then validate the design with the people and context in the brief.
