How Brilliant.org motivates learners with animations

Interactive animation makes learning — no matter your age — more engaging, enriching, and enjoyable. Playful and colorful moments brimming with surprise and delight strike a universal chord with learners, compelling them to stay focused and continue on their learning journey. 

Animation’s benefits apply to all companies with a digital footprint, not just those focused on learning. It motivates users on any UX journey to continue clicking or tapping through each screen to completion, holding users' attention long enough for a brand to establish an emotional connection. 

Enter Brilliant, the digital education platform delivering interactive math, data, and computer science learning experiences to professionals, lifelong learners, and students around the world. They’ve been using Rive — a design tool that creates interactive UI and motion graphics that run — to build engaging animated experiences that motivate users to keep learning. The features they built with Rive, like day streaks and color-coded pathways, provide learners with satisfying indicators and celebrations of their progress.

To understand how Brilliant uses Rive to optimize their animation strategy, we chatted with their Lead Product Designer Zack Davenport and Senior Product Illustrator Juliana Chen. Zack is on a team focused on encouraging daily learning habits with a tailored and rewarding experience for every user. 

Comparing Lottie and Rive

Depending on the tool, designing and implementing animation can be easier said than done. 

In the beginning of 2023, Brilliant underwent a redesign of their game mechanics. They were relying on a mix of Lottie, After Effects, and native coding for animations and gifs. As they conceptualized the work for the project, they realized their current workflow would force them to remake many assets. They set off to find a solution to their problem: a new design tool.

An engineer at Brilliant decided to do a comparison analysis between Rive, the new contender, and Lottie, the design tool they already used, with a focus on interactivity, user triggered transitions, and different states. They were impressed with Rive’s State Machine, which would allow them to define transitions and behaviors between states. Lottie’s interactivity didn’t allow for custom transitions between states without additional engineering effort. 

Another consideration for Brilliant was file size. Rive files are a fraction of the size of videos, GIFs, image sequences, and JSON-based formats — the latter is what Lottie uses. They downloaded a few Rive animations and discovered the file sizes were small even when interactivity was added. 

In their comparison analysis, the Brilliant engineers concluded: “Rive is significantly easier to integrate, handles our use cases, and allows designers to focus on making the animation while developers just add them and trigger the desired states.” From an engineering and design perspective, it was a huge win for Rive over Lottie. 

Rive: the design tool to the rescue

Brilliant’s User Motivation team relies heavily on animation to bring energy to a learner’s experience. After the successful redesign of their game feel mechanics, they use Rive for several use cases, such as customized colors for learning paths, and a streak feature that counts how many days in a row a user has actively learned on Brilliant. 

Color-coded pathways

The path’s nodes and connecting lines are all built using Rive. Each learning path is color-coded based on the learning topic. Animations are done in many color variants with multiple node types. Without Rive it would be impossible to account for all of these factors.

Streak feature

Brilliant leveraged Rive’s Event triggers to show when a user has successfully achieved their streak. The streak animation is seamlessly aligned with the increasing number count, making it feel more tied to a user’s actions. 

Easing design workflow while adding complex animations 

Adding Rive to their design toolbox drastically reduces duplicative creative effort for their illustrators. "I saved a full day of work using Rive because I didn't have to do all the prep work and cross-check for handoff anymore," Juliana told us. "If we still used Lottie, changing any element would mean doing everything all over again.”

Rive also cuts down on Brilliant’s designer to developer communication. “So many things can get lost in translation when you’re going from a prototype and then rebuilding it in code. As a designer, no matter how much time you put into trying to communicate how a prototype should look, it will likely not look the same in the final build,” Zack explained. “There is definitely a one-to-one that what you build in Rive is what’s in the product.” 

Brilliant’s streak project was the first time they rolled out a project across Android, iOS, and web, all at the same time. Rive streamlines their QA process across platforms. Zack said, “If there was a problem on Android, it would be the same on iOS because we’re using the same Rive file. This means we can address problems once for all platforms rather than fix the same problem across multiple platforms.”

Because their animations contain many “if/then” moments, their end-state flow is very complex and holds many possibilities. Zack told us, “We embrace complexity because we know Rive can handle it. Without Rive, we would have downgraded to a simpler and less effective solution.” 

Brilliant customers delighted by the animations

What do Brilliant’s customers think about the interactive animations? And do they affect how they learn? We checked out their Trustpilot reviews to hear from the students themselves: 

• “The interactive and visual elements are fantastic… It’s the best visual learning tool I have ever used.” - Sebastian, March 30, 2024

• “I was learning Computer Science and the app is super easy and dare I say it, fun?!” - Emily, March 16, 2024

• “Brilliant has an awesome and interactive learning model. I find it much easier and way more fun to learn things this way.” - Anonymous, June 20, 2023

• “Brilliant is one of the most well-made apps I’ve used. It really is fun and engaging to learn on there.” - Sean, April 4, 2024

• “The design and interactive graphics make math more intuitive and easier to understand.” - R S, June 7, 2023

Get your team started with Rive

Rive is the interactive design tool helping companies surprise and delight users with ready-to-run animations. Learn more about how it can benefit your team’s workflow at our pricing page.