ID Verification

Jumio Mobile SDK Renewal

Overview

Ongoing project

Enhancing usability for feedback by using machine learning services

Unifying design language with web & new brand concept

Role

Lead UX/UI design

Channel

iOS, Android app

Tool

Figma, Protopie,
Userzoom, UsabilityHub,
Power BI

Release plan

1. Update modules
2. Flow & logic revamp

Background


Jumio identity verification is the process of ensuring that the person on the ID is the same person presented in front of the screen.

The process is driven by face-based biometrics, compliant machine learning, and artificial intelligence.
However, previous UIs had not fully utilized this machine learning feedback and piled up tons of usability issues.

Research

I did competitor research, design research, and usability tests to figure out users' pain points and opportunity areas to enhance overall UX.
Finding
Vague UI

  • 1. Selected country was not clearly visible

  • 2. ID format selector was not scalable to show various ID formats

Hidden help menu

  • The usage rates were low of 2% because...

  • 1. User had to swipe up to see the help menu

  • 2. Content was not useful

  • 3. Hidden fallback button for 4% of users who could not use auto-capturing due to unsupported ID format

No guidance
for barcode reader

  • No visual guidance of how close the barcode should be.

  • Users tended to frame the whole ID, even though they had to move closers to have the barcode readable.

Inconsistent design

  • 1. The mobile SDK was different from the web design

  • 2. UI was not reflective of automation services

  1. The new design will help users...

  2. select ID type & issuing country easily

  3. find an instruction when they need it

  4. scan barcode with instant feedback

Automated identity verification

Automated identity verification will have

Less interface

Consistent design

Advanced feedback

We are saying...

“Place your document in front of the camera as it is shown in the animation above. Ensure that all data is readable and avoid reflections”

“Place your document in front of the camera as it is shown in the animation above. Ensure that all data is readable and avoid reflections”

We will say...
“Frame your ID”

and more ?

Graphic motif

Like a camera

Layout

Feedback
Action

Feedback Sequence

MRZ reader
Auto capture without frame
Manual capture
Auto capture with frame
Barcode reader

Concept proof with UT

3 user tests and 1 survey
- iOS prototype
- Android prototype
- 10 survey for ID type page
8/8 testers
Opened help popup
People noticed notification and opened the help menu
Found secondary button
People who didn’t have a barcode could find a button easily and capture it manually
Succeeded in manual capturing
People tapped the shutter button without confusing as they read the message

Design iteration based on UT

4 testers confused about the frame indicator.

"It looks like I need to align my ID to this frame"

  • Before
  • Static indicator
  • After
  • make it smaller and interactive

2 testers couldn't differentiate between the transitions.

"Is it the same screen? Ah it's back okay"

  • Before
  • No animation
  • After
  • With animation

Final Design
by use cases

ID type page

User can...
- easily edit and confirm issuing country
- figure out which format they can use instead of having 'Other format'

Jumio can...
- have format selector compatible with any number of variants as the customers want to use

Capture screen

Before
‍- Title and help menu was hidden
- No guidance for barcode

After
- Interactive feedback
- Contextual help menu

NFC Chip scan

A passport NFC chip is a powerful tool to validate data.
The problem is that every passport has an NFC chip
in a different location and so do mobile phones.
In order to solve this, I created generic animation.

Thanks!

Key results

iOS SDK size
reduced by
70%
Conversion
coming soon
...
Previous project

ID Verification Web

Next project

Document Verification Web

Life is beautiful ; )
© 2021 Jieun Ryu
RESUMElinkedinTwitterInstagram