These animations were created to be part of the onboarding process in the Philips Pregancy+ App.
The idea was to make the onboarding screens which are essentially just UI forms more aesthetically pleasing as well as making the app feel more friendly and approachable as the app requires some personal data to work correctly and often users are nervous about sharing such information.
The animations are also intended to be informative. To give context to the form currently being filled in as well as providing feedback in the incorrect password example below.
These were illustrated in Illustrator, Animated in After Effects and rendered using BodyMovin and the Lottie Framework. (Shown as .GIF on this website)
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
- Lottie
Link to my Lottie profile
I have created a handful of free Lottie Files that you can download here: