> 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/kyc-web-sdk-1/user-journey.md).

# User Journey

#### **1. Document Type Selection Screen**

This is the first screen users see when starting the Web SDK process. They select the type of identity document they will submit, initiating the overall verification flow.

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2FVmw8RROos7HB5U3uEh9g%2FScreenshot%202025-08-08%20at%205.43.46%20PM.png?alt=media&amp;token=d4846585-8451-45ff-b537-5ae5e74d7cb8" alt="" width="354"><figcaption></figcaption></figure>

***

#### **2. Document Capture Guideline Screen**

Before the OCR process begins, users are shown clear instructions on how to correctly capture their identity document.

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2Fy2gQGCNaNwq42fYbuOC6%2FScreenshot%202025-08-08%20at%205.45.07%20PM.png?alt=media&amp;token=6be03d45-b697-4eea-ad27-703dd5f9371c" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2FVlpPAAhGLck3KBRtAdk3%2Fimage.png?alt=media&amp;token=98178fc1-dc8d-4934-91fd-6b0068620da4" alt="" width="375"><figcaption></figcaption></figure>

***

#### **3. Upload KTP Screen**

Users are prompted to scan their KTP (ID card). The capture is automatic—users simply hold the document steady until the scan is completed.

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2Fl7DnmMojXtxgITv8lFjf%2FScreenshot%202025-08-08%20at%206.05.18%20PM.png?alt=media&amp;token=23381ff5-12fd-46c2-8ec3-a64c34c1980c" alt="" width="366"><figcaption></figcaption></figure>

***

#### **4. Loading Screen (After Document Capture)**

Once the KTP scan is complete, a loading screen appears while the system processes the captured data.

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2Fb7FQDwSpDXVTpuRdE3DG%2FScreenshot%202025-08-08%20at%205.47.07%20PM.png?alt=media&amp;token=16a8b137-b571-4927-a43c-29ee4fa844f4" alt="" width="317"><figcaption></figcaption></figure>

***

#### **5. Selfie Guideline Screen**

Users receive instructions on how to take a proper selfie. The guidelines include dos and don’ts to ensure successful facial capture.

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2Fj6UqM6Tu3qkERvRANQGR%2FScreenshot%202025-08-08%20at%206.14.44%20PM.png?alt=media&amp;token=f6778dac-41ad-4ab8-b28f-4a9506914224" alt="" width="362"><figcaption></figcaption></figure>

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2FeuhRx0fNpsSTKgfmNRu6%2FScreenshot%202025-08-08%20at%206.19.38%20PM.png?alt=media&amp;token=66535d8b-5cd5-4a0c-8c74-40c7190f2845" alt="" width="337"><figcaption></figcaption></figure>

***

#### **6. Capture Selfie Screen**

Users follow on-screen prompts to take a selfie. After a successful capture, a checklist is shown to confirm that the selfie meets the required criteria.

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2FQbY2G3pTLmibLFUCsLt0%2FScreenshot%202025-08-08%20at%206.20.56%20PM.png?alt=media&amp;token=80db3cc8-8c01-4c14-b367-0e3525f87184" alt="" width="308"><figcaption></figcaption></figure>

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2Ft7K0SJoYeESJJXKQVFy3%2FScreenshot%202025-08-08%20at%206.21.27%20PM.png?alt=media&amp;token=506462fa-4011-4f11-9dc8-fcdf9ef22e51" alt="" width="313"><figcaption></figcaption></figure>

***

#### **7. Loading Screen (After Selfie Capture)**

A second loading screen appears as the system verifies and matches the document data with the selfie.

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2F7G2cwPNML3P15AAxugIP%2FScreenshot%202025-08-08%20at%206.25.10%20PM.png?alt=media&amp;token=ec54cec6-0ea4-42b5-99c7-0df94d640737" alt="" width="284"><figcaption></figcaption></figure>

***

#### **8. Personal Details Screen**

This screen displays the user’s name, NIK, and date of birth, auto-filled using OCR results. Users must manually input their mother's maiden name and email before submitting.

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2FQ3KeT6cGCZRC8VgUTsn0%2FScreenshot%202025-08-08%20at%206.25.33%20PM.png?alt=media&amp;token=ebf05df6-53ae-43ca-8a0b-7fbe8eeba82f" alt="" width="257"><figcaption></figcaption></figure>

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2FjPfG002apL4eBI3RHEtm%2FScreenshot%202025-08-08%20at%206.26.02%20PM.png?alt=media&amp;token=20b29dcb-eefd-4683-8438-d7c3fead5c7c" alt="" width="263"><figcaption></figcaption></figure>

***

#### **9. Loading Screen (After Submission)**

Once the form is submitted, a final loading screen appears while the system completes data processing and verification.

<figure><img src="https://2033469942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2s0IISjZwzGfw8dm215%2Fuploads%2FvztAeqkXk6YrG9Ljeruz%2FScreenshot%202025-08-08%20at%206.26.29%20PM.png?alt=media&amp;token=391b0b52-9f24-4638-ba22-7e6feaa8b823" alt="" width="260"><figcaption></figcaption></figure>
