How we’ve optimized BlinkID from integration to UX

Since 2013, BlinkID has made the tedious task of ID capture and extraction easier and faster for millions of people around the world. Whether it’s signing up for an online bank account, responding to an age verification request, or attempting to send a peer-to-peer payment, our AI-powered ID scanning and data extraction solution has cut out manual entry, while allowing both our clients and their users to verify vital information accurately and securely. 

BlinkID’s prowess on the market has resulted in us scanning over 12 billion IDs in the past 10 years, and yet, we’re always striving to get better — both for the developers that integrate our product and the end-users who navigate our interface. Our latest round of software updates seeks to address both of these vital parties, while also providing some new features that expand our reach and ability to scale BlinkID on a global level. 

With that said, let’s take a visual tour of the latest and greatest from BlinkID. We’ll also peek under the hood at some of the more technical updates, demonstrating our commitment to delivering a best-in-class developer experience. 

What’s new with BlinkID?

Our latest BlinkID update includes some exciting new features that can elevate your identity document scanning and extraction process to even greater heights. From new and improved machine learning models for data extraction, to improved barcode scanning, to updated interface and animation flows, BlinkID continues to innovate with both the developer and user experience top of mind.

For our international markets, the addition of Arabic and Cyrillic scripts further expands our supported document list while also enabling multiscript support, meaning we can now extract data from IDs containing both Latinic (e.g., English, Spanish) and either Arabic or Cyrillic data fields.

We also improved scanning accuracy for all IDs that hold a PDF417 or other barcode type (e.g., Code 39), reducing error rates by an additional 20%. Better scanning technology means even cleaner and higher-quality data for every ID processed by our software. To that end, we have boosted our accuracy scores through improvements in our core OCR and post-processing models. 

We have also updated our field anonymization functionality, which allows clients to mask certain parts of an identity document (redacted text or cropped images), with added anonymization for QR codes on Dutch IDs cards, as one example, to comply with local privacy laws.

Beyond expanding our core document scanning capabilities, whether via new script support or enhanced accuracy, we also improved how BlinkID is utilized — from the backend to the frontend. 

Less code, less headaches

Whether you operate on mobile (iOS, Android, or cross-platform), desktop, or other web-based services (self-hosted or cloud-based), BlinkID can easily integrate into your platform. How easy? It takes our average client less than a day to launch BlinkID and successfully complete their first scan.

// Code needed to start the scan
class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
  }

  fun onScanButtonClick(view: View) {
      resultLauncher.launch()
  }

  private val resultLauncher = registerForActivityResult(TwoSideDocumentScan()) { twoSideScanResult: TwoSideScanResult ->
    // Do something with results
  }
}

/** Code needed to start the scan */
@IBAction func didTapCustomUI(_ sender: Any) {
  
  /** Create recognizer view controller with wanted overlay view controller */
  guard let recognizerRunnerViewController: UIViewController = MBViewControllerFactory.recognizerRunnerViewController(withResult: { result in
    /** Handle results */
  }, closeButtonTapped: {
    /** Handle close event */
  }) else {
    return
  }

  /** Present the recognizer runner view controller */
  self.present(recognizerRunnerViewController, animated: true, completion: nil)
}

<!-- Simplify integration by using our UI component -->
<blinkid-in-browser license-key="..."></blinkid-in-browser>

<script type="text/javascript">
  const blinkId = document.querySelector("blinkid-in-browser");

  // Get results on every successful document scan
  blinkId.addEventListener(
    "scanSuccess",
    (ev) => console.log("Extracted information", ev.detail)
  );
</script>

# Run docker image
docker run -p 8080:8080 -e "LICENSEE=..." -e "LICENSE_KEY=..." -v /etc/machine-id:/etc/machine-id microblink/api

# Scan document
curl -X POST localhost:8080/blinkid-multi-side \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -d '{ "imageFront": { "imageUrl": "..." }, "imageBack": { "imageUrl": "..." } }'

And now, basic identity document scanning has become even more simplified for new users, as we’ve reduced the lines of code required to deploy BlinkID to a single line. This new option is available in both our iOS and Android mobile SDKs, and is intended for our most common use cases (i.e., scanning both sides of a document), enabling developers to integrate BlinkID as quickly as possible.

Real-time error messaging

Half the battle in deploying a successful ID scanning solution is knowing what’s happening on the frontend. Even with a seamless interface, users can still experience struggles like failing to properly perform a required step (e.g., holding their ID too far from the camera), which can result in unforeseen or unexplained errors. 

To provide a truly first-rate developer experience, BlinkID now sends even more in-depth error messages regarding end-user activity, so developers can better understand if scans should be repeated or accepted. (For example, if an end-user does not move their card closer to the camera and their session times out, the developer will receive these specific details on the backend.) This particular feature update was based directly on developer feedback.

A more informative interface

One of our top priorities with BlinkID has always been putting user experience first. That’s why our product team works closely with our product designers, conducting user testing as well as primary and secondary research with the key end goal of driving “first-time scan success.” 

To achieve that, we’ve focused on building an easy-to-navigate user interface and support network, resulting in a more optimal UX. As part of our latest update, we now provide simple, step-by-step instructions and enhanced real-time feedback throughout the user flow, via an intro tutorial and tooltip help screens, to help ensure users perform a successful scan.

Device-to-device functionality

We understand that there are some elements of user behavior that are out of an interface’s control — like the type of devices the user possesses. For example, people utilizing BlinkID through a browser (whether desktop or laptop) may not possess the same camera quality available on a state-of-the art smart phone. 

To prevent poor image quality, repeat scans, and user friction, we will soon introduce device-to-device functionality. Now, browser-based users will be able to switch to their camera phone for better image capture, and then back to their original device to complete onboarding — with zero interruption in flow.

Customizing capabilities

Most clients go to market with our ID scanning solution right out of the box. However, for those interested in modifying the user flow or building one from scratch, we also offer several customization options for creating a white label experience in no time – down to variations in font, color, or other design components.

// An example on how to start the scan with customized UI
class MainActivity : AppCompatActivity() {

    private lateinit var recognizer: BlinkIdMultiSideRecognizer
    private lateinit var recognizerBundle: RecognizerBundle

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        recognizer = BlinkIdMultiSideRecognizer()
        recognizerBundle = RecognizerBundle(recognizer)
    }

    fun onScanButtonClick(view: View?) {
        // Create UI with default settings
        val uiSettings = BlinkIdUISettings(recognizerBundle)

        // Hide introduction dialog
        uiSettings.setShowIntroductionDialog(false)

        // Start scan activity based on UI settings
        blinkIdScanLauncher.launch(uiSettings)
    }

    private val blinkIdScanLauncher = registerForActivityResult(MbScan()) { result: ScanResult ->
        // Do something with result
    }
}

@IBAction func didTapScan(_ sender: AnyObject) {

  self.blinkIdMultiSideRecognizer = MBBlinkIdMultiSideRecognizer()

  /** Customize BlinkID UI settings */
  let settings: MBBlinkIdOverlaySettings = MBBlinkIdOverlaySettings()
    
  /** Hide introduction dialog */
  settings.showIntroductionDialog = false

  /** Continue with initialization... */
  let recognizerList = [self.blinkIdMultiSideRecognizer!]
  let recognizerCollection: MBRecognizerCollection = MBRecognizerCollection(recognizers: recognizerList)
  
  let blinkIdOverlayViewController: MBBlinkIdOverlayViewController = MBBlinkIdOverlayViewController(settings: settings, recognizerCollection: recognizerCollection, delegate: self)
      
  guard let recognizerRunnerViewController: UIViewController = MBViewControllerFactory.recognizerRunnerViewController(withOverlayViewController: blinkIdOverlayViewController) else {
    return
  }

  self.present(recognizerRunnerViewController, animated: true, completion: nil)
}

<!-- Change default UI by providing HTML attributes -->
<blinkid-in-browser
  license-key="..."
  scan-from-image="false"
  hide-feedback="true"
></blinkid-in-browser>

<script type="text/javascript">
  const blinkId = document.querySelector("blinkid-in-browser");

  // Get results on every successful document scan
  blinkId.addEventListener(
    "scanSuccess",
    (ev) => console.log("Extracted information", ev.detail)
  );
</script>

Looking for more info on BlinkID integration? Check out our developer hub for a full list of documentation links on our company Github page.