Skip to main content
UI Coach Logo
Intermediate

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.

Responsive web, Mobile1 to 2 hours

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

  1. 01

    Caleb starts setup and learns that the shared laptop would store or sync the credential under its active system account

  2. 02

    He chooses to create the passkey on his personal phone using a cross-device handoff

  3. 03

    The phone confirms its screen lock and returns a successful result

  4. 04

    Caleb names the passkey and verifies his recovery email

  5. 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

The browser is in private mode and cannot retain state
The cross-device handoff expires
A passkey already exists under an unfamiliar name
The person loses the enrolled device before verifying a fallback

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.

Font pairing
Stint Ultra ExpandedRoboto

Stint Ultra Expanded & Roboto

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Advanced
Security

Recover an Account After Phone Compromise

Design an account recovery journey for someone whose phone, number, and active session may all be controlled by another person.

Responsive web4 hours plus
Trust and SafetyError Handling
Advanced
Security

Issue a Time-Limited Contractor Entry Code

Design a secure access flow for granting a contractor the minimum property access needed for a scheduled visit.

Mobile2 to 4 hours
Trust and SafetyService Design
Advanced
Security

Home Security Control Center

Design a secure control experience for locks, cameras, alarms, and access events across a connected home.

Mobile4 hours plus
Trust and SafetyInformation Hierarchy
Advanced
Security

Recover From Identity Verification Failure

Design a verification recovery flow that explains what can be corrected, protects submitted data, and offers a fair alternative review route.

Mobile2 to 4 hours
Error HandlingAccessibility
Advanced
Security

Review a Security Camera Event

Design an event-review flow that helps a resident verify what happened, preserve relevant evidence, and avoid unnecessary sharing.

Mobile2 to 4 hours
Trust and SafetyInteraction Design
Advanced
Security

Verified Caller Identity Card

Design an incoming-call experience that shows identity information the caller has explicitly verified and shared, without covert imaging or detection.

Mobile4 hours plus
Trust and SafetyInformation Hierarchy