Summary

Grubhub set out to make a key customer milestone feel more rewarding. Using Lottie, the design team built a rich, celebratory confetti animation that now runs inside the Grubhub app and website for millions of diners. Beyond the delight factor, the team saw early signals that the experience correlated with higher reorder rates and, just as importantly, Lottie allows designers who don't specialize in motion to produce high-quality animation. That success is now pushing Grubhub toward a bigger goal: a standardized motion system built on the same foundation.

For Grubhub, motion started with a simple question: how could the team make an important customer milestone feel more rewarding?

The answer was confetti Lottie animation.

As part of a larger company initiative, Grubhub wanted to create a richer celebratory experience when diners reached a specific order milestone. The design team had built animations before, but those experiences had generally been limited to relatively simple motion within their existing design tools.

For this experience, they wanted to go further and decided to explore Lottie animation.

“We wanted to introduce a more complex, celebratory confetti animation for a specific user milestone. We knew we wanted to do something really big and celebratory, and that's when we started looking at other options and came across Lottie.”

— Rory, Staff Product Designer. , Grubhub

From Lottie animation to real business impact

The resulting Lottie animation is delivered directly within Grubhub’s consumer app and website. When a diner reaches the qualifying order threshold, the Lottie animation is triggered to celebrate the moment.

Because Grubhub serves millions of users, the experience has been seen at meaningful scale.

But the team wasn't only interested in delight. They also looked at whether the experience correlated with customer behavior.

“We've seen that it's providing users a ton of value and delight, and we've seen that in higher reorder rates. It's been amazing to see the investment in animation impact our bottom line.”

— Katharine, Director of Product Design, Grubhub

In particular, Grubhub observed that new diners who reached the milestone returned and reordered at a higher frequency. This gave the team an early indication that thoughtfully applied motion can contribute to more than aesthetics alone.

Giving more designers the ability to work with motion

One of the most important outcomes for the Grubhub team has been making sophisticated animation more accessible to designers who don't specialize in motion.

“One of the benefits of Lottie is that it's really democratized and empowered designers who traditionally aren't motion designers to come in and execute at a high bar.”

— Katharine, Director of Product Design, Grubhub

Rather than relying exclusively on specialized motion design resources, product designers can continue to build animation directly into the experiences they own. That has opened the door for Grubhub to explore motion across more projects.

Moving from individual animations to a motion system

Today, Grubhub still approaches animation primarily on a project-by-project basis. But because Lottie made motion portable and accessible across the team, the ambition now extends beyond isolated moments and toward a shared system.

One area they're exploring is onboarding.

Many onboarding flows depend heavily on written instructions, and Grubhub sees an opportunity to use motion to communicate concepts more visually to help diners, drivers, and merchants understand new experiences more quickly.

“Right now we rely a lot on copy, but people don't read. Having a visual to reinforce what you're saying is going to drive higher impact.”

— Katharine, Director of Product Design, Grubhub

They’ve realized that the longer-term opportunity is to build a more consistent motion language across Grubhub's products.

[Animations can include varieties from Dark folder and Light folder.]

That motion language would include standardizing elements such as transition behavior, timing, duration, movement, dimensions, and other motion characteristics, which is similar to the way a traditional design system standardizes typography, color, spacing, and components.

“We have really big ideas for how we can push motion on a systems level—more on the component side—and how we can be more standardized in how we approach it.”

— Katharine, Director of Product Design, Grubhub

The goal is not simply to create more animation. It's to establish a shared language for how Grubhub moves.

The next chapter for motion at Grubhub

Grubhub is already incorporating Lottie animations into upcoming projects and reusing parts of its existing confetti experience, marking an early step toward creating more reusable motion patterns.

The team is also exploring how LottieFiles' Motion System tooling could fit into its broader design-system workflow.

For Grubhub, what began as a single celebratory interaction is gradually becoming something bigger: a way to bring delight, clarity, consistency, and measurable value into digital experiences at scale.

“It's a priority for us and something we're really excited about continuing to invest in—bringing motion into our systems and thinking about it more at a component level.”

— Katharine, Director of Product Design, Grubhub