# Screens & States

A complete view of all screens the user may encounter during the Face Match experience. Each state includes a brief description and a direct link to its source in Figma.

**Open Full Screen and Specs in [Figma](https://www.figma.com/design/BXeJ6Q3TXahJVWEt8QoMVA/Face-Match---In-Production?node-id=18-19332)**  
Source of truth for layout, visual specs, interactions, and platform variations.

***

## Document Capture Tutorial

The tutorial screen introduces the document capture process. Depending on the available verification methods, the screen may display both capture and upload options, or only a single available method for the user.

<Image align="center" src="https://files.readme.io/00ae8944a1bcf65bbaaaf1ddad09de929851ad2cb8329e0350267ae8b20a35e7-screens-and-states-1.png" />

<br />

## Document Verification Method

This screen allows users to select the method they will use to verify their document.

The selection modal is available on both web and native platforms. On native, users can choose between taking a photo, selecting an image from the camera roll, or choosing a file from the device storage. On web, users are presented with capture and upload options, as the native system modal is displayed afterwards to complete the selection flow.

<Image align="center" src="https://files.readme.io/6656dd971c4536c2ef42f27ae258cb08f853520f9ecfe92fde80e15c1f994047-screens-and-states-2.png" />

<br />

## Permission Screens

Shown when camera permissions have not been granted. Includes pre-permission context, OS-specific instructions, and fallback steps if the system dialog is dismissed.

<Image align="center" src="https://files.readme.io/abea69d6a9fc40c1dc5085ed1ecc000520ec0dbbce8c1775c1dfcc6af612601a-screens-and-states-3.png" />

<br />

## Capture Screen

Shown during the document capture process. Users are prompted to position their document within the frame and press the capture button once the document is fully visible. A help button is also available if additional guidance is needed.

<Image align="center" src="https://files.readme.io/67848f8c14ef5373a02761696f76c429878f3b66037ebd2a250898dab0913bdf-screens-and-states-4.png" />

<br />

## Common Issues

Shown by tapping on the help icon of the Capture Screen, when users need additional guidance. This screen highlights common capture issues, such as blurry images, glare, shadows, or documents being out of frame, helping users take the photo correctly and avoid verification issues afterwards.

<Image align="center" src="https://files.readme.io/0dc169e867c6f4873d0a2c3c1666cdcb882d171b9895ce88d7fcfc8594846d85-screens-and-states-5.png" />

<br />

## Capture Review Screen

Shown after a document has been captured or uploaded, allowing users to review the image before continuing. Users may proceed to the next step or replace the image by recapturing or reuploading the document.

<Image align="center" src="https://files.readme.io/375524ff693e29b55d9b7907d79375dcafdfc4dca00b198409bf2e1987071666-screens-and-states-6.png" />

<br />

## Image Upload Screens

Shown after the user confirms the captured document and continues with the verification flow. These screens communicate the upload and success states, providing feedback while the document is being processed before moving to the next step.

<Image align="center" src="https://files.readme.io/10b31ac86ea26e1826c14b89db923a4238c1c0c2c148949d2537a983946b7a7b-screens-and-states-7.png" />

<br />

## Upload Review Screen

Shown after the user uploads a document and continues with the verification flow. This screen allows users to review the selected file before proceeding, displaying a small preview of the document along with the file name to confirm the correct file was chosen.

<Image align="center" src="https://files.readme.io/40188b67238376160a32e2d293ebf176ce1a487ee1fba60ccb3ac593b6556cf9-screens-and-states-8.png" />

<br />

## File Upload Screens

Shown after the user uploads and confirms a file to continue with the verification flow. These screens communicate the upload and success states, providing feedback while the file is being processed before moving to the next step.

<Image align="center" src="https://files.readme.io/9e74299b080e7b61e373376d0ec4ee238a1277be1099df733d13b7aac9383da1-screens-and-states-9.png" />

<br />

## Consecutive Pages Tutorial

Shown when the document requires additional pages or supporting information to complete the verification process. Depending on the flow configuration, users may be required to continue with the next page or optionally add more information before proceeding.

<Image align="center" src="https://files.readme.io/9ae73f55d349ac68f0630f5dc8bbfe9ef4efc0ce4e0d5c6d3eea56724e0df13d-screens-and-states-9.png" />

<br />

## Error

Shown when the document capture process fails or the uploaded image cannot be processed. Users may retry the capture flow, with 3 attempts available by default before the flow is considered unsuccessful.

<Image align="center" src="https://files.readme.io/425dd3e2908c4708abc99ef4c6f947b7a97a5ca432eabbfc7f2e806d89e44b54-screens-and-states-10.png" />

<br />

## Connection Error

Displays when connectivity is lost during capture or upload. Users can retry once a stable connection is restored.

<Image align="center" src="https://files.readme.io/aef28f7462d370a10fab8481f28a75e9f4d44e3d0e0b2da9f5689f7e96a11616-screens-and-states-11.png" />