Illustration, Motion Design, Character Rigging, Speed Curves, Loop
Tools
Illustrator, After Effects, Lottie
We try our best, at Qonto, to give our customers a delightful experience to make every moment a little more friendly. That being said, we decided to add some branded animated illustrations in the app, using Lottie. That’s a true challenge, including team work between product designers, devs, and me as a brand designer. ??
Simple loops
One of the true challenge is to make every animation a loop. That was a very early choice : we didn’t want any breaks in the animations, in order to have a clean and smooth result.
Mobile friendly with Lottie
Animations in a mobile app can be a pain. As an app is a downloadable item, you want to reduce its size whenever its possible. Adding animations is obviously not the better way to reduce the size of an app.
Lottie is an Airbnb solution. It allows to convert an animation made with After Effects into a SVG animation in a .json file. The very tricky part is it need a lot of optimization in the AE file, and there are some things you just can’t do (3D layers, shadows, blur, …). But after that, you have an animation that is super light, and almost doesn’t impact the size of the app.
Match with the UI
As we chose the same palette for both product and brand design, all empty states / success states / error states … illustrations and the UI fits together.
Some metrics
70
illustrations in the app. And it keeps growing!
50
of the illustrations in the app are animated
