At Swiggy, motion design is inherently present in our DNA and it is an integral part of our product and UX decision making. It is like an added set of vocabulary that helps us to communicate better. You know, the kind of vocabulary that sets an orator apart from a regular Joe? That’s exactly what motion brings to Product Design.

We use Lottie for any kind of animations that are not transitions. Well, there were also instances where we tried to hack-out transitional animations using multiple Lottie files. As we know, transitions aren’t inherently possible using Lottie but, a bit of thinking and playing around can make almost anything possible (with a cost though).


From a week to 30 minutes with Lottie

The biggest benefit of Lottie is that it reduces development time considerably! Previously, coding even a simple animation like a tick could take more than a week’s effort on each platform. It takes less than 30 mins of configuration today. All that happens now is that we the designers create the animation in After Effects, we generate it using LottieFiles and then finally we have a JSON file and it takes barely 15 or 20 minutes of configuration where we sit with the developer to finalise things for it to work on all platforms. We are saving a lot of time!

Also, there is no loss in quality or information during implementation, because what the designer animates is what we finally see. It's almost like having a vector image that also plays like a movie. Win-win! Changing or replacing the animation is again as simple as changing an image - just replace one JSON with another.

We use the LottieFiles preview feature very often, especially in cases where the asset is a combination of JSON and images. I don’t know if any other tool offers this feature in a more seamless way. It is very important to test assets out, since not every feature of After Effects is necessarily supported in Lottie. Previewing reveals all those details that need to be fixed before sending the asset off to the developers. And although as an organisation we tend to create all our animations in-house, the LottieFiles repository or millions of user created free Lottie animations is a goldmine and can be immensely helpful for teams that do not have a dedicated motion designer.

The amount of dependency a Lottie has on the hardware of a device is a challenge we are facing at the moment which is why we try to restrict the usage of Lottie to smaller and shorter animations but I hear that LottieFiles is working on something right now to help manage CPU usage when it comes to Lottie animations. This Lottie below is perhaps the biggest we have ever implemented using Lottie. There weren’t any noticeable difference in the performance, though.


Using Animation to Create Empathy

Motion design is like that extra set of flowery vocabulary and we at Swiggy, precisely know when and how to use them (without sounding like a douche) When we see the need to include an animation into the workflow, we do it. There can be varied reasons:

  • Seamless transitions
  • Bringing more affordance (without having to bump the size or colour)
  • Empathy
  • Delight

and the list goes on.

The team at Swiggy.

But Motion Design at Swiggy doesn’t only solve the problems mentioned above, it also makes us one of the most talked-about products in India. Recently, we implemented a small animation in our app to build empathy for our delivery partners who are out working in the field, even during the COVID-19 lockdown period.

Here you can see our animated driver.

Along with driving the empathy that we wanted to deliver, it also became a talk of the town on social media. Stuff like this motivates us to expand our limits time and time again.


You can follow Saptarshi and his work here:
LottieFiles
Dribbble
Twitter
Instagram