# Screens & States

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

***

## Tutorial Screen

Introductory screen that prepares the user for the **Upload Digital ID** step. It displays an illustration of a government-issued digital ID and explains what type of file is required before the user proceeds to upload.


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


<br />

## Review Document

Shown after the user selects a PDF file from their device. Displays a preview of the uploaded document and its filename so the user can confirm it is the correct file before continuing. The user can either proceed or replace the file.


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


<br />

## Analyzing

Shown immediately after the user confirms their document. A progress indicator and a preview of the file are displayed while the module processes the PDF and extracts the identity data and QR code information.


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


<br />

## Success

Shown when the document has been successfully processed and the identity data extracted. The user receives a clear visual confirmation and can proceed to the next step in the verification flow.


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


<br />

## Error

Shown when the uploaded file does not correspond to a supported digital ID type. The user is informed and prompted to try uploading a different document.


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


<br />