iProov is a company that creates digital trust with biometric authentication and have developed Face and Palm verification technologies on mobile and PC.
They needed simple instructional animations to demonstrate a range of user tasks, from simply rotating the device, to going through the process of either palm or face verification.
The task was to design and create these animations. My first step was to design keyframe story boards that outline the flow of the animation.
Rotate phone
1
2
3
4
Move phone to eye level - (mobile)
1
2
3
4
How to iProov - (mobile)
1
2
3
4
The process
The designs were then taken into Adobe After Effects and transformed into animations.
In order for the animations to be used on both mobile and PC they are exported as JSON files using a plugin called Bodymovin, then using a library called Lottie to render the animation in real time.
Presentation
To showcase the animations, I constructed a responsive inventory using HTML5 so that we could review and test their performance of both mobile and PC.
This was quite essential since the performance of the animations should not affect the verification technologies.
Showreel
The result
The cohesion and consistency of the animations help keep a familiar narrative for customers to understand and follow, it also sets a standard for the iProov brand.
The mobile and PC development teams now have range of user animations at their disposal for future releases and making the user experience a more enjoyable one.
Melvyn has set a high standard of production that makes the animations work, very nice!