Instacart, the on-demand grocery delivery giant, offers people the chance to buy food items and other essentials in their local area and have them delivered swiftly. Operating in thousands of cities in North America, many major retailers, from grocery stores to home goods and more, are available on Instacart, all offering their goods through the app and website.
We had the opportunity to speak with Robert Paige, the Associate Creative Director of Motion, and learn about his thoughts on motion design and its importance to user experience. He was the first motion designer for Instacart and shares how Lottie animations and LottieFiles have enabled Instacart to create beautiful user journeys through meaningful designs. Here are his thoughts:
At Instacart, we aim to create delightful experiences when adding motion. Meaningful interaction between the product and the user, communication in the form of an answer, is what we envision our designs to deliver. Motion for users can drive an experience and work to guide them where they need to go and what they need to do. Motion is comforting for a user. It lets you know that the app is working. With attention spans shrinking, motion keeps the user intrigued. Anything that static can achieve, animation can do better when it comes to UX. Motion helps drive the message and does things static imagery just can't; it can tell a longer story with more emotion. A picture is worth a thousand words, so that's one million words if you have a thousand pictures!
There are many things to consider when working with motion design: scaling on multiple devices, different size requirements, landscape and portrait mode, dark and light UI. PNG and GIFs aren't scalable. PNG sequences can get so long that there's no way those can be under 2MB. The dimensions determine GIFs, and if there's an alpha channel or transparency, they together can blow up a GIF to a huge size. It's even harder to get that color mix down and that pixelization on the edges. Lottie is the only file format that can overcome all that; create it and hand it off to a developer who can incorporate it as is.
Without Lottie, we would have to render all those different variations to cater to those different environments for that responsive design. With Lottie, we no longer have to make these thousands of different versions of one animation; just one solution for web, mobile, iOS, and Android.
The file size has also been a constraint until Lottie came around. We'd any day go for a small file size that's scalable and vector-based rather than something that's rasterized, pixelated, downright poor in terms of quality, and that won't load all the time.
Today, we don't even have to leave After Effects. We can use the LottieFiles plugin instead of having to export and render the old way with Bodymovin. Upload the Lottie to LottieFiles, hand the file off to the developer, and wish them luck. It's quick, easy, and foolproof!
There are many opportunities with the future of Lottie, and we still think it's the current and best way to get animation into mobile and web. Lottie is awesome! We wish it came out sooner than it did.
We look forward to the next thing that the LottieFiles team brings and know it will be awesome!
