Lottie

User demo animations for mobile and PC.

skillsets:
UX
  • Story Boarding
  • Approach
UI
  • Iterative interface design
  • motion design
Web
  • Prototyping

How to use

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

A Phone positioned in the wrong orientation.

1

The Phone is then turned.

2

A Phone positioned in the correct orientation.

3

A close up the Phone.

4

Move phone to eye level - (mobile)

A man holds the phone in his hand.

1

The man lifts the phone to his face.

2

An arrow indicates that the phone is on the same level has the man's eyes.

3

The man's action of raising the phone to his eye level is now complete.

4

How to iProov - (mobile)

User moves his face to the center of the user interface in order to face verifier.

1

The timer counts down to face verification.

2

The screen starts to flash colours.

3

There is a 'tick' on the phone screen meaning that the user has successfully passed.

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.


Joe Palmer, Technical Director at iProov.

Melvyn has set a high standard of production that makes the animations work, very nice!

Joe Palmer Technical Director

Creative & Engaging Solutions.

Bromel - Designer & Developer

Let's Talk

Networks