An enhanced mobile app experience with Setel
By Setel team
“LottieFiles has always been our go-to tool for motion since the beginning of Setel.”
Setel Venture Sdn Bhd is the engine that drives Setel — a motorist-centric lifestyle mobile app. Developed in 2018, Setel launched with only one feature; in-vehicle fuel payment and pump activation. Today, Setel covers almost all motorist-related services including EV charging, parking payment, road tax and insurance renewal, roadside assistance, as well as a mobile payment solution that allows in-vehicle purchases and QR payments at over 1 million stores nationwide.
Here, we speak to the team at Setel to understand how they have enhanced their mobile app with the power of animations.
What inspired you to incorporate animations into your mobile app?
At Setel, we’ve been using illustrations as part of our design direction since day one. We soon realized that animations, supported by great copywriting, make messages and information clearer and easier to understand. As we searched for further opportunities to delight users, we began incorporating animations into our products whenever possible - even with very subtle motion.
Since our brand personality is warm, friendly, and caring, we wanted our products to feel inviting and friendly to our users. One of the best ways to achieve that goal is through illustrations and animations.
What were your goals in integrating Lottie animations into your project, and how did they align with your brand and marketing strategy?
One of the main objectives of our animations is to be instructional for the users. Rather than relying solely on copywriting conveying specific instructions to the users, we incorporate animations – which have been a great help in telling users what to do and what to expect in their journey.
For example, in the fuel purchase process, we use animations to tell users to leave the car and lift up the nozzle once the pump is ready. In auto assistance, we use animations to tell the users that the mechanic is on their way – this will make the users less anxious as they wait by the road. In the payment flow, we show a delightful confetti animation to tell users that the payment was successful to indicate that they can move on to the next step.
How did Lottie animations contribute to your success?
It has definitely given us the opportunity to stand out from other e-wallets and payment apps out there - at least in the Malaysian market. Our distinguished illustration style, when paired with subtle but delightful animation, helps to get us recognized even with minimal branding elements.
Our stakeholders are strong proponents of our approach to having animations in our products. We made sure to highlight important animation ideas whenever we were presenting our design in order to get them excited.
We frequently received great feedback from our users when it comes to our usability and design. We believe having nice comforting illustrations and animations across the app experience contributes to that perception.
How did your team initially identify the need for an animation solution like LottieFiles?
We wanted to ensure that the animations we generated in Adobe After Effects would be displayed correctly on our products, especially in the mobile app. Hence, we needed to find a quick solution to verify our work and save us time spent troubleshooting any issues which might arise and force us into endless rounds of back-and-forth with the engineers.
We found that, through LottieFiles, the designers could quickly preview and diagnose any potential issues, allowing them to make any adjustments accordingly.
How did you get your team on board to use LottieFiles?
It was also reasonably easy to get everyone on board. Our team members came from various backgrounds and some of them have used the Lottie format and LottieFiles in their previous companies. Therefore, it was easy to convince the team in Setel to use LottieFiles as well.
LottieFiles is a crucial tool to the team because we will continue adding animations to our products where we see fit. Now, with the LottieFiles for Figma plugin, we hope we will be able to get more designers involved in generating animations through LottieFiles as the learning curve is a lot lesser than Adobe After Effects.
Everyone was aligned on the direction of implementing motion into the product. Designers have full control over how the animation looks and behaves, while developers don’t have to spend too much effort trying to implement those natively. It’s just a simple .json file.
What is the creative process behind designing and implementing the animations using LottieFiles?
First, we identify when an animation is needed in the project and then we use Figma to create some illustrations. After that, we get initial feedback from the team. Then, comes exporting layers from Figma to Adobe Illustrator, as well as making fixes and adjustments if necessary.
We will also import the illustration to Adobe After Effects to be animated, and export the animation using the Bodymovin plugin and upload it to LottieFiles. From there, we will share the link with the team for review and get further feedback. The link will also be shared with developers to get the .json file for their implementation.
Our animations are pretty generic and can be used for any variations of devices and platforms without having to make any adjustments. Since most of the usage is on our mobile app, we just make sure it works well for that form factor.
What specific LottieFiles features and tools were most beneficial to your team in achieving the project goals?
It has definitely cut down the time required for designers in collaborating with developers to implement animation in our products.
The main features that we loved are being able to preview animation on the web and mobile app to make sure there are no glitches in the final asset before passing it over to developers. On top of that, the LottieFiles for Figma plugin allows designers to insert GIF versions of their custom animations for better visualization during prototyping, which is a great tool for us.
We also utilize the pre-made animations from LottieFiles marketplace, which has the ability to change layer colors and transparency to adhere to our brand guidelines.
Were there any challenges or obstacles your team faced while implementing Lottie, and how were they addressed?
One of the biggest challenges we faced - and are still facing - is the need to use Adobe After Effects to create custom animations using our existing set of illustrations. Unfortunately, there weren’t many designers that are familiar with Adobe After Effects, so some had to take up the skill independently.
For simple animations, we usually encouraged the team to search for suitable animations on LottieFiles.com and customize them accordingly to match our brand colors.
Any key insights or recommendations from your experience with LottieFiles and Lottie animations that could benefit others considering a similar solution?
Start small. Try to implement small subtle animations in your product to make sure there are no technical issues or complications during development.
Also, be picky about what to animate. If you don’t have dedicated animators in the team (like us), you will not have the luxury of time to animate every single illustration or screen for every feature. Make sure to prioritize those that are more impactful for your users and screens that are frequently seen by your users (instead of a one-off thing).
