A user experience to enable the future of face verification.
skillsets:
UX
Research
Wireframing
User flows
UI
Iterative interface design
Motion design
Web
Application development
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.
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.
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 series of images help illustrate the various screens in which a user would typically see during the 'enabing the camera' process.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
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.
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!
The redesign of the iFrame allowed our technology to be easy to use. I love it!