Lottie

User demo animations for mobile and PC.

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.

Client

What I did

  • Storyboarding
  • Motion design
  • Web development
Hand pressing the brightness key on a keyboard.
Screenshot of the inventory with man holding phone to his eye level.

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

  • This email address is being protected from spambots. You need JavaScript enabled to view it.

Networks