Face Verifier

Marketing concept for world leading face biometric authentication.

skillsets:
UX
  • Research
  • Approach
  • Prototyping
UI
  • Iterative interface design
Branding
  • Logo

Prove who you are

Face Verifier is iProov’s flagship product, a one-time face biometric verification experience that securely and simply authenticates users for online and offline services.

iProov’s next step was to create a viral video that would tell the story of Face Verifier, an engaging and connecting tale to a non-technical audience.

Introduction to iProov

The task

After extensive research it was concluded that the best format to show this visual tale was in the form of an animation. The animation had to promptly convey various aspects of the process:

  • Face Verifer allows you to prove who you claim to be.

  • Accessing the camera on your Phone or PC.

  • Flashing a one-time unique sequence of colours onto the face.

  • Analysing the reflected light and sending it to the Cloud.

  • Checking that you are a real human and rejecting cyber-attacks.

  • Keeping your identity secure.

  • iProov Verifier stops others using your identity.

The iProov Logo.
  • A hand holding the phone with the Face Verifier User Interface on display.
  • An angled perspective of phone with Face verifier user interface.
Face Verifier User Interface.

The storyboard

Before any design work was undertaken, the use of a story board helped to plan the sequence of events.

Whilst searching for a suitable audio track to accompany the animation one particular track stood out. It was then that I was inspired to animate in accordance to the audio track.

Our story begins with the protagonist looking into the device using face verification.
page 1
The protagonist is taken on a journey.
page 2
The protagonist is transported to the cloud.
page 3
The protagonist is scanned and checked and moves onto the next stage.
page 4
An imposter try's the same process, fails and is rejected.
page 5
The successful protagonist enters a secure place.
page 6

The Concept

From the storyboard the illustrations were created, below are the keyframes.
Angela looks into the device.
The Face Verifier application loads on screen.
Angela stares at the user interface on screen.
The screen starts flashing colors.
Angela is slowly transitioned.
She finds herself in a strange place.
With rays of light flashing by her.
Traveling down a spectrum of light.
Entering the cloud.
The cloud expands.
Angela arrives in the cloud.
A magnifying glass examines her.
She successful passes her examination.
She is happy and free to go.
Toby the imposter enters the cloud.
he is scanned and smiles.
He is scanned, but it is clear to see that he is just a robot.
Toby gets a bit aggressive and tries to attack.
He senses his end.
Toby is now terminated.
He falls from the sky.
Angela is on her way to a secure place.
She enters the place and the door closes.
The door is locked.
We can now see the look keyhole.
We approach the keyhole and go through it.
Where we find...
Face Verifier

Animation Platform

The entire animation was built using SVG’s, HTML5 and in conjunction with the JavaScript animation library GreenSock Animation platform.

I first had to build an animation player which would allow me to scrub through the animation at any point for editing and reviewing.

This was build using node.js, NPM and webpack plus plugins, without this setup doing this animation would not be possible.

Verifier

  • What We do - (no subtitles)

Music

The result

This viral video offered an experience that lived up to the hype of Face Verifier being a simple, but magical user experience.

The animation would help dramatically to create the interest and intrigue of Face Verifier to a wide range of audience whilst at the same time simplify the process so that a 9-year-old can appreciate this technology.

Joe Palmer, Technical Director at iProov.

Fantastic!

Joe Palmer Technical Director

Related Work

Lottie
HTML5
iFrame
See All Projects

Creative & Engaging Solutions.

Bromel - Designer & Developer

Let's Talk

Networks

2020 © Bromel

Terms & Cond
Privacy Policy