How Uber scaled motion design systems at enterprise level

Summary

Uber is one of the world's most recognizable apps, serving millions of users daily across ride-hailing, food delivery, and more. In this interview video, Uber designers Liz Hayward and Melody S. walk us through how Lottie became the backbone of their motion workflow and what that means for product quality at scale.

Key Notes

• Centralized motion library at scale: A single Lottie enterprise workspace replaced scattered personal accounts, giving Uber's small motion team a shared space to browse, iterate, and ship consistent animations across the entire product suite.

• Faster design-to-dev handoff: Engineers receive lightweight, production-ready LottieFiles instead of heavy video layers or MOV files, reducing friction and implementation time.

• Emotion-driven product moments: Custom celebration animations, including the women driver matching experience, deepened user connection to Uber's brand values.

• Cross-platform compatibility: Lottie animations run consistently across iOS, Android, and Web without performance trade-offs.

Transcript

Host: All right, welcome. Thank you for joining me. I have just a couple of questions for you. I wanted to get to know a little bit more about your experience using LottieFiles during this time and get to know a little bit about how you're using it every day, how it has transformed your animation process. So thank you for joining me, thank you for taking the time, we really appreciate this.

Liz: Yeah, sounds good. Happy to be here. Thanks for inviting us.

Host: All right, perfect. So I wanted to ask you about the process before LottieFiles. When you were creating animations before you had Lottie files, what were your biggest pain points? How has that changed over time as LottieFiles came in?

Liz: Yeah, so well when I joined Uber Design, the team was actually already using LottieFiles.Because the small file size and compatibility across our platforms made it kind of a no-brainer.

But we didn't have a centralized library of animations. Instead, designers were using their personal Lottie accounts to create and download animations and then hand off them to their engineers. And that was an issue in itself, because while some of the more elaborate animated illustrations we had were created by our in-house animator or our partner agencies.

So as you can imagine, we were starting to see a lot of inconsistencies in our base design system team in particular, we were having a problem with rogue confetti popping up in certain.

Host: Rogue confetti. I love it. You could say that the quality, the consistency of the animations has improved over time by using LottieFiles kind of like the central repository for it.

Liz: Yeah, exactly. The Lottie enterprise workspace has pretty much changed everything because now the team can see all of the animations that the design systems team is creating and that they can leverage, because we have them all in this centralized place. So they can easily browse assets from animated icons to celebration animations that now Melody is creating.

Melody: Yeah, I could also add a little bit. Before Uber I was working at a startup and we didn't have any Lottie implemented in the workflow. So it was pretty painful, to be honest, handling design handoffs. I remember I was working supporting the engineers on motion and animation for websites and products a little bit.

Sometimes we had to reduce a lot of the animations just to keep the file size small. And when it comes to motion specs, it's just really painful. You have to for example, if an animation has multiple elements, a lot of moving parts, we basically have to write down everything that is moving and the different properties as well, and then a lot of the time it just loses in translation. We'd sometimes just have to settle with it.

But I'm so happy that when I joined Uber, like Lottie was already implemented in the system, and it just makes everything much smoother, and we can really spend the time focusing on the animation itself.

Host: But if you were to pick, what is the biggest win of using LottieFiles? Is it the collaboration part? Is it the animations they're producing? What is, for you, the biggest win?

Liz: The big win is that now we can just see each other's files in Lottie. If we need to make small adjustments, we can just import things into After Effects, work on them there you know

Host: One question there, a little bit off script, have you tried using Lottie Creator at all so far?

Liz: Yeah, like in little bits. So we work predominantly in After Effects, but for making small adjustments, especially if we just need to do things like adjust color and stuff like that we'll work in Lottie Creator. We're also starting to experiment with state machines, which is super exciting. So yeah, we're using a Lottie Creator and State Machines, and our engineers are really excited about that, it's pretty cool.

Host: Nice. Have you tried tokens or have taken a look at tokens at all?

Liz: We haven't really used them yet because our engineers weren't sure they could use them. So not yet.

Host: It can be useful, not only for your engineers but for yourselves, because you can associate colors or a specific motion or sizing to a token, and then whenever you make a change, that applies everywhere, a little bit like Figma color styles or variables. So maybe useful maybe.

Liz: We should probably look into that for when we're converting animations to dark mode, for sure.

Host: What impact has using Lottie or using LottieFiles has had on key performance indicators?

Liz: It's been really exciting to see the impact that even small animations can have on product experiences. Like even a very small animated icon can drive enough attention to an element that significantly impacts performance metrics. So we have a lot of product managers getting really excited about using animation more in product, just because

Host: We're getting the metrics back improved?

Liz: Ya, They're getting fantastic results.Yeah, but we've also used animation for more custom celebration experiences, like if you're ordering an electric vehicle, or if you're getting matched with a woman driver. Melody did this great animation for the women driver matching. But yeah, it just really drives engagement and makes the products a little bit more emotional, and when people are connecting their values to the product and we're celebrating those things. the results have been incredible.

Host: If you were to describe Lottie Files to someone who hasn't tried it before, who hasn't heard of it, what's the one thing you'd want them to know?

Liz: I would say that they're small and powerful vector-based animation files that can now contain interactive state logic. So that's super exciting.

Melody: I would say Lottie for me is like a translator for motion. So it’s like a bridge communicating with motion designers and developers, and it just turns animation into tiny little code that they could implement right away.

Host: What is the coolest animation you've made? The one you're most proud of, the one you think "oh, this is awesome"?

Melody: With Lottie and for Uber. I also wanted to mention the women driver custom animation. I feel like that's a pretty cool project I worked on. So basically, we wanted to celebrate and empower women drivers, and when a female or woman user matches with a woman driver, it triggers this custom flower animation just to celebrate and empower — and I think it's pretty rewarding because you see how animation is delightful, and it boosts interest and improves the overall user experience. I feel like it's a pretty cool win, I think.

Host: Nice.

Liz: I'm ridiculously proud of some of the smaller icon animations I've done, I think the rocket ship is my favorite one. But I think the project that we used Lottie for, that I've used Lottie for, was when we were introducing autonomous vehicles to our platform. We did a series of more elaborate takeover animations over certain dialogues and things like that, and it was an exciting product launch, something different and cool that got people really excited about the product.

Liz: Thanks so much, really good to know.

Host: So if there's been a pain point or something you want to you know have, ask away.

Melody: We have been using blur a lot. I know you can sort of cheat it with Lottie, but it would be amazing if we could just apply it directly, because I mainly use After Effects, and that would be awesome, to just apply the standard blur.

Host: This might be a file format thing.Iif you're still using JSON as your main file format instead of .lottie, you might run into more compatibility issues. My understanding is the latest file format (.lottie) supports blur and layer blending all-in. at least. And it's also cross-compatible across the board, iOS, Android, web, everywhere. So if you, but consider moving to .lottie because it's going to enable so much more.