By Boost team
Boost uses Lottie animations as elements of distractions
Boost is more than just a regular mobile payment app—it’s proudly Malaysia’s homegrown lifestyle e-wallet app that is both secure and rewarding. We make it our mission to provide everyone with a worry-free cashless mobile payment experience all-day, every day.
We chose Lottie because we were using GIFs previously and the animations lagged so much! It even crashed the app on some mobile phones because the files were too big. We had to export the GIFs into MP4 then use an online MP4 to GIF converter to convert them. The colors would return inaccurate and there would be noise on the animation.
While we’ve had to forgo certain effects like the Puppet tool, Motion Blurs, and Particle World in our animations because these are not supported by Lottie, it’s something we are more than happy to do because the performance of the app is our top priority.
In terms of scalability, Lottie has proven to be way better compared to GIFs or PNG/JPEG sequences. While it can be tedious to clean up the masks of illustrations to ensure that there are no overlapping elements that would cause bugs to the animation, seeing the smooth, unpixellated transitions on our app are all worth it. It has definitely challenged us to work around all the different limitations of Lottie to produce a high-quality animation that does not jeopardize the performance of the app.
We use Lottie for visual enhancements on the BoostUP benefit page, on onboarding screens to increase sign-ups, for loading animations when the user is trying to add money or load a page, for our signature Shake animation after payment which can be seasonal, for simple functional animations fingerprint verification, for and payment statuses. We convert all artwork to vector shapes instead of using images as well to make the file lighter.
Lottie animations are intended to increase the patience and attention span of the user if there is a system lag on the app (which of course happens). Our loading animations were proven to help in letting the user understand that the app is still running and working in the background. Animations are absolutely essential elements of distraction! In addition to this, we also have festive Shakes that help elevate the app’s festivity during specific seasons like the Lunar New Year, Christmas, or Hari Raya (Eid)!
The animations we use have definitely garnered positive feedback among both our team and our users. People would screenshot and comment about our festive Shakes and animations on the app! It has definitely increased the liveliness of our fintech app and we are great advocates for UX Choreography.
For simpler, more generic elements like ticks and alerts, we use the free animations on LottieFiles and modify them from there, saving us a lot of time from illustrating. Thanks to the LottieFiles for Adobe After Effects integration, the workflow from production to preview is very simple, easy, and straightforward.
Download Boost
