ID capture experience

The Omni ID Capture module by Incode enables users to scan and verify identification documents. It supports various types of IDs, like driver's licenses and passports, and uses advanced OCR technology to accurately extract data such as name, date of birth, and document number. The module also includes built-in verification checks to ensure ID authenticity.

Flow

Overview

ID capture module diagram of the flow

ID capture module diagram of the flow

Happy path

Watch the ID capture module in action:

By screen

Document selection

Screen where person can select what type of document they want to scan. Based on the selection, we show either tutorial for ID capture (front and back) or passport tutorial (main page with photo) in the next step.

We don’t provide other options for selection, like what type of ID and so on, since we do all of that validation in the backend. If we don’t support it, we give that feedback in the capture.

Difference between iOS, Android, and web (browser based) screens

Difference between iOS, Android, and web (browser based) screens

Tutorial

The ID capture tutorial consists of four screens. Initially, users watch an animated video demonstrating how to position their ID within the frame. After the initial loop of the video, users can choose to skip or proceed.

On the web, two animated tutorials are shown sequentially before initiating ID capture.

Tutorial animations

Other

Additional tutorial screens highlight common issues during capture. Users have the option to skip these tutorials and proceed directly to the capture experience. On the web, only one animated tutorial is shown before initiating capture.

Fake permission

This screen informs users about the importance of granting necessary permissions before proceeding with the actual system modal permission prompt..

📘

Note

This screen is optional to implement.

Real permission

System modal where we present the option for the person to either select “OK” which will allow the system the use the camera of the device, or “Don’t allow” which will open a screen where the user needs to enable the camera permission manually in their system settings.

Capture screen

The main capture screen consists of several elements:

  1. ID capture frame
    1. Border pulses until an ID document is positioned inside its bounds
    2. Changes color based on status (blue - processing, green flash - success, red flash - error)
  2. Feedback message (top)
    1. Server responses like show the front of the ID or show the back of the ID
  3. Feedback message (center)
    1. Dynamic feedback based on context, like glare detected, or if it’s too dark to do a successful capture
  4. Help button
    1. Opens Common issues screen
  5. Overlay graphic (optional)
    1. Helps person how to position the ID (vertically by default, we allow also for the ID to be captured horizontally as well

Feedback messages

In order to instruct the person to make a successful capture, we provide dynamic messages based on context. For example, if there is glare on the ID, we will show that message in the center of the ID capture frame.

Some of the messages we return back are:

MessageDescriptionPlatform
Fill the rectangle with your IDShown when there is no ID in camera feedAll
ID out of focusWhen camera is not focusing on the IDAll
Glare detectedWhen there is harsh light on the ID which makes the information on it hard to seeAll
Too darkWhen the ambient has very low light which makes the information on the ID hard to distinguishAll
Show the front of the IDCheck If a wrong side of the ID is shownAll
Show the back of the IDCheck If a wrong side of the ID is shownAll

ID ready to capture

When an ID is properly positioned, the capture process begins, indicated by a blue border and a central message ("Don’t move! Taking photo..").

📘

Note

There is also an option to show a countdown, instead of the message "Don't move! Taking photo.." after automatically capturing the first frame of the ID.

ID detected correctly

After successfully capturing and verifying the ID against image standards, the border briefly highlights in green before progressing to the next screen..

ID uploading

Throughout the upload process, continuous feedback informs users of system progress is enabled.

Success uploading

Upon successful completion, the border color indicates success, providing users with immediate feedback.

📘

Note

In new version of the product we’re exploring alternate system feedback means, without relying solely on the color, so our experience will be more accessible to color blind people.

Review photo

Occasionally, users may be prompted to review the captured image before proceeding, enhancing the likelihood of a successful capture..

📘

Note

This screen is optional to implement. If you have a lot of manual captures happening in your product, we recommend turning this option on.

Verifying…

We present a custom loader between the captures, while we’re processing data of the captured images.

Loader animations

Below are examples of how loader animations function on native and web platforms.

Edge cases

Fail uploading

There are several reasons why we might fail in processing the ID image. It could be based on contextual reasons, like there was glare on the ID or it was too dark to take a good picture. There might be other factors involved like failed uploading due to internet connection issues.

We also limit the number of attempts as a security feature, and it can be configured from the dashboard. After all attempts were used, the onboarding stops, and we show a screen telling the person they can’t continue the flow.

📘

Note

The number of attempts a person can make, is configurable and can be changed in the dashboard.

Common issues

Pressing on “help” button that appears during the ID capture, opens this screen. Based on empirical data, we’re showing the three main issues we noticed during the id capture which are:

  • ID is too far out of the frame
  • Glare or shadows on ID
  • Camera lens dirty

“Ok, try again” goes back to the ID capture and “I prefer to capture the photo manually” opens the ID capture manual mode, where user needs to take the photo by pressing a button (default option is that is taken automatically).

Manual capture

After set number of seconds (configurable from the dashboard) we show the “manual capture mode” where a person needs to press the button in order for the capture to take place (instead of happening automatically). Manual mode can be entered from the “Common Issues” screen, when pressing “Help” button.

Redirecting to manual capture has been done in order to provide an alternative in case the automatic capture might not work for some reason.

Verification failed

If an error occurs during or after ID capture, users may attempt again depending on configuration..

Customization

For this module, customization options vary across platforms and screens. Here are the customizable elements:

Global customization

Elements

iOS

Android

Web

Comments

Page fill

Background Color

👍

👍

👍

Limited to specific screens “Document selection”, “Tutorial”, “Common issues”, “Uploading”, and “Review”. On Android possible for all except "Selfie" and "Video Selfie" screens,

Buttons

Color

👍

👍

👍

Help button not customizable on Web

Corner Radius

👍

👍

👍

Limited customization on Web

Width

👍

👍

👍

Border / Color

👍

👍

👍

Limited customization on Android and Web

Border / Size

👍

👍

👍

Limited customization on Android and Web

Text color

👍

👍

⛔️

Text content

👍

👍

⛔️

Text

Copy

👍

👍

👍

Color

👍

👍

👍

Size

👍

👍

⛔️

Font change

👍

👍

👍

Icons

Change

👍

⛔️

⛔️

Limited customization on Android