> For the complete documentation index, see [llms.txt](https://docs.vida.id/identity-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vida.id/identity-stack/verify/liveness/integration/liveness-web-sdk/user-journey.md).

# User Journey

The following steps outline the user journey for completing the liveness verification process.

#### **1. Initiating the Liveness Verification Process**

The user begins the liveness verification process from the host application, triggering the flow.

#### **2. Tutorial Screen**

The tutorial screen provides clear, step-by-step instructions to help the user successfully complete the liveness verification process.

* **Guidelines Covered**:
  * Do’s and Don’ts for positioning.
  * Importance of proper lighting and clear visibility.
* The tutorial emphasises **best practices** for accurate verification and prepares the user for the next steps.

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2FexgYm0f4oWNovfvx2VuF%2Fcapture_selfie.png?alt=media&amp;token=93bd0dcb-f320-46c8-9816-176a5e51dda6" alt="" width="375"><figcaption></figcaption></figure>

***

#### **3. Camera Permission Screen**

If the camera permission is not already enabled, a permission request screen appears:

* A **pop-up prompt** requests access to the device’s camera.
* The user can
  * **Allow Camera Access**: Proceed to the camera screen.

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2FdWiIyNp8hZ4oN7WOsSXo%2Fcamera_access.png?alt=media&amp;token=7ebdff63-9c50-4918-8072-2a0eb1a8cc82" alt="" width="375"><figcaption></figcaption></figure>

***

#### **4. Camera Screen**

Once permissions are granted, the user is directed to the camera preview screen:

* **Visual Guidance**:
  * An oval frame appears on the screen to help users align their face correctly.
  * On-screen prompts guide users through the selfie capture process.
* **Selfie Capture**:
  * The system detects when the user has framed their face properly.
  * The liveness capture process is automatically initiated.

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2FDnEMQ2AnIgEdUEn1gf8p%2FGroup%201000008935.png?alt=media&amp;token=d92b11fd-860f-447d-81c7-5a09280a0d53" alt="" width="375"><figcaption></figcaption></figure>

***

#### **5. Selfie Review Screen**

After the selfie is captured, the user is directed to the review screen.

Users can view the captured photo to ensure it meets key criteria, such as:

* Proper lighting.
* Clear visibility of the face.

Users can take following actions on the review screen:

* **Submit**: If satisfied with the photo, the user submits it for verification.
* **Retake**: If not satisfied, the user can retake the selfie.
  * Selecting this option returns the user to the [tutorial screen](#user-content-fn-1)[^1] for additional guidance before retaking the photo.

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2Fsj9wktvM1FVxPeM87sza%2Freview.png?alt=media&amp;token=40e36cf4-c16b-4c52-bbe6-52a190922acc" alt="" width="375"><figcaption></figcaption></figure>

***

Upon submission, the captured selfie is transmitted to the **Vida backend**:

* Vida’s proprietary AI algorithms analyse the photo to perform **liveness verification**.
* The system ensures that the user’s presence is authentic and free from any manipulation.

[^1]: