The old user interface was being used for almost 6 years and it had started to show its age. It was visually cluttered and the experience was inconsistent on different platforms. There were some negative feedback from clients and users regarding the filter and concerns about the look of the whole experience.
I decluttered the interface and got rid of all unnecessary components such as the reticles and horizontal scan line. I drew a new oval shape that resembles more of a human head and removed the filter to give a more natural look and feel. I moved the position of the prompts to the top where it has a lower chance of blocking your eye contact with yourself.
All these changes have led to a modern interface where it feels natural and easy.
I started with research and I looked at into what the competition is offering, what face verification and face recognition looks like today and how it is displayed in movies and on TV series. Basic keyword searches like "Face recognition" also gave a good indication of how public is being exposed to this kind of technology in general. I held an internal survey and collected feedback from around 100 people at iProov. I also highlighted the key points and take aways from the feedback provided by clients. Following this, I put all my findings into a Miro board and I invited key people in the project to collaborate and provide feedback. With all this information gathered in one place, I started to see some patterns, identified pain points and began thinking about possible solutions.
These insights helped me shape new ideas and solutions. I created a short list of the strongest ones and presented them to C level executives. For the presentation, I prepared a quadrant and highlighted an area for where I want the new UX to be positioned.
I then used this quadrant to show where each option falls and how we want to position ourselves.
I prepared example videos and interactive prototypes for each option in Spark AR Studio. This enabled better communication in between teams and made the internal testing of these options much easier.
The new one:
The new interface is designed to keep the focus at the center where the algorithms work best to detect liveness. Each layer and component has a purpose and designed to help execute the algorithms as quick as possible.
Starting with the clear live camera feed, I add a vignette effect that darkens the corners. This helps draw your eyes towards the center of the screen. The new oval shape looks familiar as it resembles a human head and helps you position your head inside it. The darker outer layer helps meet WCAG 2 Level AA standards. An optional blur outside the oval helps even further to draw your attention towards the center.
The initial feedback from the clients such as Unico and Bradesco Bank in Brazil is overwhelmingly positive. The first round of usability tests conducted with 500+ users show nearly 15% shorter time in completing the face verification journey. More tests are being held to help fine tune the UX and UI.