Intercom’s product animation evolution: embracing Rive

Intercom prioritizes product animations, those true-to-life examples that drop a customer in without forcing them to sign up. Designers and developers rebuild the product as an animation, thereby creating an incredibly effective sales and marketing tool.

Because product animations represent the end product, they need to be as high-fidelity as possible. They also have to be small in file size and easy to use for both designers and developers. That’s where Rive comes in.  

Jared Gay, a senior motion designer on Intercom’s Creative Studio team, swears by Rive and uses it for product animations across the website. Their first official project with Rive was for an important product launch, their new personal AI assistant, Fin AI Copilot. 

To hear their story, we chatted with him about Intercom’s time-crunched transition from Lottie to Rive and how it’s transformed their design workflow, all for the better. 

The problem: a lotta issues with Lottie

Jared shares how he faced ongoing difficulties with Lottie. “I was always in battle with Lottie. What it could accomplish was good, but there were always issues every single step.” For him, the process was cumbersome from the start. Storyboards had to be meticulously moved to After Effects, where any rearrangement turned into a headache, particularly with pre-comps. Once animations were made, rendering introduced a new wave of problems, often leading to a drain on engineering resources. 

“Using Lottie felt like playing 3D chess,” Jared admits. “All of my decisions were tied to the pain I was anticipating.”

Earlier this year, the team considered switching to Rive ahead of the Copilot product launch. Ultimately they decided learning and implementing a new tool could jeopardize delivering the six animations on time. They had no choice but to continue with Lottie. 

As anticipated, the pre-comps caused some animations to look soft, but the launch was already live. “My hell is having to go back in and un-precomping,” Jared remarks. Faced with this dilemma, the team more seriously considered shifting to Rive.

The solution: a shift to Rive

The turning point came when a design contractor tested a simpler animation in Rive and successfully reproduced it in six hours. The result was sharp and clean, superior to what Lottie rendered. “Let’s just do it,” Jared and the team decided. 

The workflow transformed significantly. Designing in Figma, animating in Rive, and connecting it to the website became seamless. “So many steps were immediately gone,” he explains.

Exporting SVGs from Figma to Rive was efficient with size optimization tricks, like unchecking “Outline text” to reduce file size. This attention to detail ensured sharp, beautiful product animations that kept the website fast.

All animations were recreated in Rive, and the difference was stark — not only in clarity but also in speed and backend reliability. After delivering four additional animations to engineering, they were live on the Copilot page within 24 hours, a task that usually took a week.

The results: freedom, speed, and clarity

Rive’s impact was profound. “Before Rive, I would think in terms of technical limitations. Now there’s a lot more freedom to iterate and test,” Jared tells us. “I might have avoided testing something out because I didn’t have time.” Now, the ease of use and quick turnaround times mean more room for creativity and experimentation, which is essential for a production environment. 

Using Rive, the team cut the process time to 20% of what it was with Lottie. File sizes were consistently halved, enhancing performance across all browsers, including Safari. For example, the Copilot Hero animation was reduced from 1.49 MB (Lottie) to 831 KB (Rive). Similarly, the Insights & Reporting animation went from 880 KB (Lottie) to 441 KB (Rive). 

“The Lottie files were crumbling, especially in browsers like Safari due to how heavyweight they were. That’s completely fixed with the Rive versions,” says Sam Goddard, a senior design engineer on the Creative Studio team. 

“Rive’s ongoing improvements are exciting,” Jared adds. “Certain things that were more complicated six weeks ago are already simpler and cleaner. That’s cool to observe in real time.” This shift has not only improved their current workflow but also opened new possibilities for future projects, ensuring sharp, interactive, and speedy digital visualizations.

Get your team started in Rive

Rive is an interactive design tool that bridges the gap between designers and developers. Visit our pricing page to learn more about how it can benefit your company’s workflow. Don't forget to read our article about Fluxverse's interactive product demos for another B2B way to use Rive.