ID Capture (Old version)

Design overview of ID Capture, a module of the Incode identity verification platform

The Incode ID Capture module lets users scan and verify identification documents like driver's licenses and passports. The module uses advanced OCR technology to accurately extract data such as name, date of birth, and document number. It also includes built-in verification checks to ensure the presented ID is authentic.

ID Capture Module Flow

Overview

ID capture module diagram of the flow

ID Capture module flow diagram

Successful capture

Watch the ID capture module in action:

Module Screens

Document Selection

The document selection screen displays options for supported documents and lets the user select the type of document they want to scan. The user's selection determines the tutorial shown in the next step. For a card-type ID, the tutorial shows front and back ID capture. For a passport or visa, the tutorial shows capture of a main page with photo.

The module doesn’t present more specific options, like type of ID, to the user. The document type is validated on the back end. If the ID type is not supported, the user receives that feedback during the capture.

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

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

Tutorial Screens

The first ID Capture tutorial screen shows users 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.

Additional tutorial screens highlight common issues during ID capture. Users have the option to skip these screens and proceed directly to the capture experience. The number of tutorial screens may vary depending on configuration and whether the capture is mobile or web-based.

The following images show these screens for iOS, Android, and web.

Permission screens

An optional screen can be enabled for web. It informs users about the importance of granting necessary permissions before proceeding with the actual permission prompt for the module.

The permission screen presents two options to the user. They can select “OK” allow Incode to use the device camera. If they select “Don’t allow", a screen opens so the user can enable the camera permission manually in their system settings.

The following images show the optional screen and then the permission screen.


Capture screen

The main capture screen is illustrated in the preceding image. It consists of several elements:

  • ID capture frame: Border changes as the capture progresses (see the "ID capture progress" section)
  • Feedback message (top): Coaches the user through the experience with instructional phrases
  • Feedback message (center): Dynamic feedback based on context (see the next section)
  • Help button: Opens Common issues screen
  • Overlay graphic (optional): Helps the user position the ID correctly. By default, positioning is vertical, but horizontal capture is also supported.

Feedback messages

The following image illustrates one of the dynamic, context-based messages a user might see. The table below the image provides additional examples of these messages.

MessageAppears When...Platform
Fill the rectangle with your IDThere is no ID in the camera feed.All
ID out of focusThe camera is not focusing on the ID.All
Glare detectedThere is harsh light on the ID which makes the information on it hard to see.All
Too darkThe ambient light is so low that the information on the ID is hard to distinguish.All
Show the front of the IDThe back side of the ID shows when the front side was expectedAll
Show the back of the IDThe front side of the ID shows when the back side was expectedAll

ID capture progress

The main capture screen waits while the user positions the ID within the capture frame. The border of the frame is initially white. When an ID is properly positioned, the border changes to blue, a message appears, and the capture process begins. The exact positioning and wording of the message may vary depending on configuration and whether the capture is mobile or web-based. The following image illustrates this screen when the ID is ready to capture.

📘

Note

You can optionally show a countdown after automatically capturing the first frame of the ID, instead of the message.

Once the ID capture module successfully captures and verifies the ID against image standards, the border briefly flashes green before progressing to the next screen, as shown in the following image. If the capture is not successful, the border turns red and a message appears.

ID uploading

Throughout the upload process, users see continuous progress feedback, as shown in the following image.

The following image illustrates successful capture completion. The border color turns to green and a success message appears. This message improves feedback accessibility for users with red/green color blindness.

Review photo screen

You can optionally enable this screen, which prompts users to review the captured image before proceeding. This can enhance the likelihood of a successful capture. We recommend it for organizations where many users choose to capture images manually. This screen is illustrated in the following image.

Verifying screen

This screen, known as a "custom loader", appears between the captures, while the data from captured images is being processed. It reassures users that the verification is progressing as intended. The following images show the on-screen images in both still and animated formats, so you can see how they differ depending on whether the capture is mobile or web-based.


Unsuccessful Attempts

While the majority of captures are completed successfully, some attempts are unsuccessful. This section explains the most common reasons for these edge cases.

Uploading failure

There are several reasons why we might fail in processing the ID image. For example, there could have been uncorrected glare on the ID. It might have been too dark to take a good picture. Internet connection issues might have interrupted the attempt.

Incode also limits the number of attempts as a security feature. This limit can be configured from the Dashboard. If the user exhausts the number of configured attempts, onboarding stops. In this case, we show a screen telling the person they can’t continue the flow. The following image shows an unsuccessful attempt.

Common issues screen

Users see this screen when they press the “help” icon during the ID capture. Based on empirical data, the three main issues that occur during ID capture are:

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

These three issues are suggested to the user on the Common issues screen for possible correction. The user can press “Ok, try again” to return to the automatic ID capture. If they press “I prefer to capture the photo manually”, the module opens the manual capture screen (see the next section).

The Common issues screen is illustrated in the following image.

Manual capture screen

In the Incode Dashboard, you can configure the number of seconds that the default, automatic capture is enabled. When this time limit is reached, the capture changes to “manual capture mode.” The user is prompted with instructions for completing the capture manually. Manual mode can also be triggered manually from the “Common Issues” screen, as explained previously.

Redirecting to manual capture provides an alternative in cases where the automatic capture might not work for some reason. The following image illustrates the manual capture screen.

Verification failed

Sometimes an entire verification may fail if an error occurs during or after ID capture. Users may try again if your Incode implementation is configured to allow it. The following image illustrates the verification failure screen.

Customization

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

Global customization

ElementsiOSAndroidWebComments
Page fill
Background Color👍👍👍Limited to these specific screens: “Document selection”, “Tutorial”, “Common issues”, “Uploading”, and “Review”. On Android, possible for all screens 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