Bringing motion to everyday apps with Loopcraft
By Loopcraft team
Lottie made apps more interactive with motion. It uplifts the brand and gives it a prestige look.
Loopcraft is a design technology company based in the Maldives. They offer a range of services, including motion graphics, animation, mixed reality, website development, marketing, and product design, all under our service umbrella.
Over the past decade, Loopcraft has evolved into a design invention firm – actively engaging with cutting-edge technologies to craft impactful and purposeful products.
Here, we speak to the team at Loopcraft to understand how to use the power of motion to enhance their digital designs.
What inspired you to incorporate animations into your mobile app projects, how did it all start?
Prior to using Lottie files, we used PNG sequences, but the file size was huge! We tried to do SVGs as well, but it was more complex than we wanted it to be. For these reasons, we really needed something that was quick to work with and easy for both our developers and designers.
We started by trying Lottie animations on our Foodies App project, one of the local food delivery service providers. As Foodies App is very service-oriented, there was a need to add emotions and empathy within the app. This is how LottieFiles became so important in our design flow.
With Lottie becoming a success within the Foodies App in streamlining the process and aiding in communicating complex information to customers, we forged ahead with using Lottie animations in all e-commerce applications and other projects we developed. The process was a hundred times quicker! It bridged the gap between the concept to the final look much more easily. This, in turn, helped to align the tone and visually express the brand much better.
How did you get your team onboard to use LottieFiles?
It wasn’t difficult to get the team on board! The moment we realized the file sizes were so small, we were so excited to experiment with it!
We went through some tough times with the old processes, so when it came to Lottie animations everything seemed a lot easier. The onboarding process was straightforward and easy to grasp.
With Lottie animations, we can create bigger, more complex, and cooler-looking animations. We believe it has given us a lot more flexibility to experiment. Additionally, it is also much easier to work within a team with handovers taking place.
What is the creative process behind designing and implementing the animations using LottieFiles?
Our creative process goes something like this - concept, design, animate, output, test and voila!
The preview feature was a game-changer for our team, and being able to change the background on the preview was a huge plus! Previously, there was a lot of back-and-forth between the design and development teams.
These features proved to be highly valuable, particularly when developing online grocery e-commerce applications called SIMDI and Ganna Mart. As both of these apps utilized a lot of Lottie animations to guide customers from browsing products to making a purchase, this feature greatly reduced the time and effort required for testing during the development process.
Once the animations are made, our developers test it out for the various platforms and inform the designers if there are any visual issues.
Simdi: an e-commerce mobile app offering over 15,000 products.
Were there any challenges or obstacles your team faced while implementing Lottie, and how were they addressed?
Initially, there were issues with the merge path and gradient resetting. However, over time we learned the tricks and all is fixed now, so yay! We did encounter a minor issue where the Lottie animation appeared fine on the tester but not on the website as well at first. We had to go back and forth a couple of times to resolve this.
That all being said, there's nothing that comes close to what LottieFiles offers, and we won't be going back. Life has become so much easier - the process is much simpler now. Even for those who prefer to design in Adobe Illustrator rather than Adobe After Effects, you can still do so using the LottieFiles plugins!
What do you feel about animation, do your clients feel the same?
We feel that motion design or animations are the best when it comes to visual communication, especially for e-commerce websites and mobile applications since they are lightweight and scalable.
With Lottie animation, the brand gets a whole new look and the customer experience becomes better. And work-wise it has definitely helped us to streamline our workflow when working on multiple animations at the same time.
For the companies we have provided e-commerce applications, they loved how Lottie made their app more interactive with motion. It uplifts the brand and gives it a prestige look.
Can you share any examples of Lottie animations created contributed to your project's success?
Previously the visuals used were very rigid, and we could not add any visual entertainment. But now we can give customers a good experience even when they are waiting for something to load, etc.
After our first mega project with Foodies, we do consider the placement of Lottie animation in our initial UI UX design process. It has become an integral part of our product development, regardless of which client or industry we are catering to.
One such app is the Geveshi Gulhun - Madhadhugaaru App, a platform designed to address and combat Gender-Based Violence (GBV). This app provides a safe and secure space for individuals to report incidents of GBV and seek support and assistance. To ensure the product aligns with the sensitivity of the topic, Lottie has played a crucial role. The use of animated birds, with motions such as chirping and flying, has helped victims take actions such as voicing out and seeking freedom.
Geveshi Gulhun - Madhadhugaaru: online app for reporting Gender Based Violence
How do you see your company continuing to leverage LottieFiles in future projects or campaigns?
Design is at the core of all products being developed at the Loopcraft. And we will continue to use Lottie animations to create an interactive visual experience for the target audience.
