Selfie Capture
Selfie Capture confirms the user’s physical presence by capturing a live selfie that is later used to validate their identity.
This module appears after ID Capture and before verification submission or Face Match, forming a core step in the onboarding and authentication flow.
Where it fits in the flow
Selfie Capture usually appears immediately after completing document capture.
Once the user provides a valid selfie, the flow continues to biometric comparison or any downstream verification logic required by the application.
User Flow
The Selfie Capture experience moves through several clear stages that guide the user from preparation to a successful capture. After granting camera permission, the user is introduced to the process through a short tutorial. When capture begins, the system evaluates alignment, lighting, and facial conditions in real time and triggers an automatic capture once all requirements are met.
If automatic capture does not occur within the configured timeframe, the experience transitions to manual capture, allowing the user to take the selfie directly. After the image is captured, it is uploaded and analyzed to confirm quality and usability. The user then receives a success state or an error message with retry options before continuing to the next step.
Full Flow Map
This diagram presents the full sequence of screens involved in Selfie Capture, from tutorial and permission handling, to auto/manual capture, uploading, and final feedback.
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.
Light mode
Dark mode - The capture screen uses a white background even in dark mode to ensure proper illumination and optimal face detection during the selfie process.
Open Happy Path in Figma
Best Practices
Recommended guidelines for designing and implementing the Selfie Capture experience.
✅ Do
- Keep instructions short and easy to understand.
- Maintain a clear, unobstructed silhouette for proper alignment.
- Ensure high contrast and readable text across all steps.
- Provide retry options whenever a capture fails.
- Guide users with actionable feedback (lighting, alignment, visibility).
❌ Don’t
- Don’t reduce overlay opacity below 50%, as it affects face visibility.
- Don’t rely solely on color to communicate status or feedback.
- Don’t skip or reduce essential error states.
- Don’t allow UI elements to obstruct the camera area or silhouette.
Updated about 21 hours ago