---
title: "Screens & States"
url: "https://developer.incode.com/design-and-ux/upload-digital-id-screens-and-states/"
section: "design-and-ux"
group: "Module Customization / Upload Digital ID Design"
version: "v1.1"
status: "live"
---
# 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://developer.incode.com/assets/026e0bfb65a252f48e99066ed9358fbd.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://developer.incode.com/assets/fafdce1f7aab2fab0f541ef517b08045.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://developer.incode.com/assets/013b57611eaa12b8ffafe865347d90c8.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://developer.incode.com/assets/e8d8fd43935955c07295de86967704fb.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://developer.incode.com/assets/cee4b600d471d1c7ea5e2700fb404149.png" align="center" />


<br />