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.

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.

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.

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.

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!