iFrame

A user experience to enable the future of face verification.

The First Generation of Face Verification.

iProov’s first iteration of face biometrics began with enabling face verification via their demo website using a mobile device.

In order to do this, the process required the user to give iProov permission to access the front facing camera on the device with the use of adobes flash player technology. However, the user experience was heavily dependent on them to enable the camera through the flash player settings otherwise face verification would be impossible.

Mobile phone showing the iFrame from 2014.
The iFrame from 2014
The original iProov Face verifier, showing an enabled camera process.

The process

The existing UX for the iframe failed to provide visitors with clear call-to-actions in order to enable the process of face verification.

In order for me to better understand the problem I needed to have a look at the process from start to finish and evaluate this system.

Using wireframes, I proposed a UX that would demonstrate first what the user should do and expect when using Face Verifier.

Wire frame showing the first screen of the iframe.
An example of user interaction of the iframe.
An example of user interaction of the iframe.
The Face verification user interface.
The sending screen.
A successfully face verification screen.
Various iframe workflows - wireframe.

UI/UX Design

From wireframing, the next task was to start designing the user interface screens that a potential user would come across.

Since it was critical that users enabled their camera, it was important to instruct and show them how to do this.

The intro screen of the iframe.
The series of images help illustrate the various screens in which a user would typically see during the 'enabing the camera' process.
The intro screen transitioning to the User Interface.
1.
The intro screen transitioning to the User Interface.
2.
The intro screen transitioning to the User Interface.
3.
The user interface of the iFrame.
4.
The flash player settings showing that the user needs to select 'Allow'.
5.
The flash player settings showing that the user needs to tick 'Remember'.
6.
The flash player settings showing that the user needs to select 'Allow'.
7.
The iframe showing the 'IPROOV ME' button.

8.

The streaming screen of the iFrame.
9.
The Forgery Screening  screen of the iFrame.
10.
Screen transitioning into the validating screen.
11.
The validating screen of the iFrame.
12.
Transitioning into the iProoved screen.
13.
Transitioning into the iProoved screen.
14.
The iProoved screen of the iFrame.
15.

User Flows

To ensure that every user decision and interaction was designed for, the entire UX was mapped and indexed to ensure the user would not fall into any issues during the process.

Complete iFrame user flow diagram.
Complete iFrame user flow diagram.

The iFrame

My solution consisted of using an interactive tutorial that would act as a presentation layer over the flash player giving clear instruction on what the user should do next in order to successfully enable the front facing camera on their mobile device. This was entirely built in HTML, CSS and JavaScript.

As the name suggests the iFrame is a HTML frame that encapsulated the JavaScript and CSS so that the functionality and styling would not be affected by other CSS or JavaScript configurations embedded on the web page.

It also made it hard for potential attackers to change anything in the iFrame and allowed easy integration for potential customers.

A JavaScript Animation Library (GSAP) was used to create seamless transitions and provide a comprehensive user experience.

showreel

The result

The iFrame was a success in that it solved the potential issue of users not enabling their cameras. It’s functionality empowered users to have a seamless and pain free experience.

The user feedback was extremely positive with 0% failure in enabling the camera on their devices. The iframe also helped iProov to secure many high-profile customers.

The iFrame was ahead of its time and without it, iProov would not be where it is today!

Client

What I did

  • UI/UX design
  • Motion design
  • Application development
  • Wireframing
  • User flows
The iFrame with the 'iPROOV ME' button enabled.
A close up of girl using Face Verification.

Andrew Bud - CBE, Founder & CEO at iProov.

The redesign of the iFrame allowed our technology to be easy to use. I love it!

Andrew Bud - (CBE) Founder & CEO

Creative & Engaging Solutions.

Bromel - Designer & Developer

Let's Talk

  • This email address is being protected from spambots. You need JavaScript enabled to view it.

Networks


Cookies on the Bromel Website

This website uses cookies to ensure that you get the best experience on this website. MORE INFO