Created with After Effects and Lottie
At Philips, I took the initiative to enhance the user interface of the Pregnancy+ App through animations during the onboarding process. This initiative was designed to transform standard UI forms into engaging, aesthetically pleasing elements that make the application appear more friendly and accessible.
Recognising that users might feel hesitant about providing personal data, these animations also served an informative purpose. They helped contextualise each form being filled and offered interactive feedback, such as in cases of incorrect password inputs.
My creative workflow included using Adobe Illustrator for illustrations, Adobe After Effects for animation, and the BodyMovin and Lottie Framework for rendering, showcasing the end products.
How they were made
There were a few steps required when it came to creating these animations. The first being that we needed them to be a file format that our apps could not only play efficiently but also be a really small file size as not to increase the app download size.
The Animations were intended to improve the User Experience of our onboarding process so if they affected the loading speed or interfered with the user journey then this would be a problem.
To solve this issue I came across Lottie which is made by the Airbnb team and is an open-source tool. Lottie uses a plugin inside After Effects to convert your animations into a JSON file which are then read by the Lottie SDK installed in the app to animate vector files.
As the animated files are Vector they are very small but are also pixel-perfect across all devices and screen sizes. The animation files are very small and the Lottie SDK lets you easily trigger them within your application. Win!
To create these animations I first had to create the illustrations in Adobe Illustrator. They needed to be created in such as way as each part that would move needed to be a shape or group of shapes on a layer.
I then imported this .AI file into After Effects and converted each layer into a shape layer. I was then able to animate each layer exactly how I wanted using transforms and animation curves.
To export the animations into a format that Lottie could understand I just used the open-source BodyMovin plugin.
Software
- Adobe Illustrator
- Adobe After Effects
- Body Movin
- LottieFiles
