ID Capture

ID Capture collects high-quality images of a user’s government-issued ID (front and back) to extract data (OCR) and run authenticity checks.

This module typically appears before Selfie Capture and prior to verification submission, forming a core onboarding step.

Where it fits in the flow

ID Capture usually appears immediately after consent and document type selection and before Selfie Capture and final submission. Once the user provides valid images, the flow continues to data extraction, document liveness/authenticity checks, and any downstream logic (e.g., Face Match with later selfie).

User Flow

The experience guides users from preparation to a successful ID capture. After granting camera permission, users see a short tutorial. During capture, the system evaluates framing, glare, blur, and edge alignment in real time and auto-captures when requirements are met. If auto-capture doesn’t trigger in time, manual capture is available; images are then uploaded for quality checks with retry options on failure.

Full Flow Map

A diagram that shows ID Capture all screens from tutorial and permissions through front/back auto/manual capture, uploading, and feedback (success/error).

Open Full Flow Map in Figma

Happy Path (Light & Dark)

The ideal user journey when the selfie is captured successfully with no interruptions.

The happy path represents the smoothest version of the experience, where the user grants camera access, follows the tutorial, the system detects proper alignment and lighting, and the selfie is captured automatically without requiring retries or manual intervention. Both light and dark mode previews are included so teams can validate visual consistency across themes.

Open Happy Path in Figma

Best Practices

Recommended guidelines for designing and implementing the ID Capture experience.

✅ Do

Keep instructions short and actionable (e.g., “Place your ID on a flat surface, avoid glare”).
Use a high-contrast, uncluttered background; ensure text remains readable.
Guide with real-time feedback: “Move closer,” “Avoid glare,” “Show all corners.”
Provide retry options and clear error messages (e.g., “Wrong document side”).
Respect accessibility: voiceover labels, adequate tap targets, and captions.

❌ Don’t

Don’t reduce overlay opacity to the point capturing frame edges become hard to see
Don’t rely solely on color for status (add icons/text).
Don’t skip critical error states (glare, blur, cut-off).
Don’t let UI elements obstruct the camera area.