The Economist's interactive storytelling grabs readers

Interactive storytelling is no longer optional. In fact, for The Economist, it’s essential. But how do you transform dense, data-heavy content into something that grabs readers by the eyeballs and keeps them engaged?

In walks HLabs, a design agency known for turning static designs into click-worthy, interactive moments for editorial heavyweights like RedBull, Hearst, and Atlas Obscura. With Rive in their toolbox, HLabs created animations that redefined what The Economist’s campaign with IBM could look like.

Here’s the story of how HLabs made it happen.

The problem

First, let’s go back in time to the challenges they faced.

Using legacy tools to create interactive, mobile-first content for clients was no walk in the park. HLabs was running into roadblocks.

Heavy video files: Large files lost sharpness when compressed for mobile, became pixelated, and often failed to auto-play due to power-saving modes.

Limited interactivity: Legacy tools like After Effects and Ceros made interactive animations difficult, especially with vector-raster blends that bloated file sizes and slowed load times.

Time-intensive workflows: Frequent trial and error and inefficient collaboration hurt HLabs’ ability to deliver projects at scale.

Why Rive?

HLabs determined Rive was the right tool for the job for several reasons.

Lightweight and scalable: Rive’s vector-based animations offer a steep advantage over traditional video formats. Files are smaller, ensure faster load times for mobile users, and are adaptable across different screen sizes — all without losing quality.

Interactive and engaging: “Rive’s state machines and timelines turn static visuals into interactive, scroll-triggered animations that captivate users,” says Hannah Springett, CEO of HLabs.

Efficient collaboration: Rive lets designers make real-time updates, making it easier for HLabs’ remote team to work together. Hannah explains, “This is an amazing tool for collaborative remote team structures. No more local file handling. And just like Figma, multiple animators can collaborate on a file.”

Reusable components: The ability to reuse animations across multiple formats saved hours of production time and promised design consistency. 

Creative accessibility: “I like Rive because it means we animate more,” explains Alexandru Savescu, HLabs’ Illustration and Animation Director. “It’s easier to understand and way more accessible to designers.”

The brief

The Economist challenged HLabs to create interactive visuals that simplify complex topics and engage readers. The visuals also needed fast load times for their mobile-first audience.

HLabs had to produce:

• Three header animations for the campaign hub, optimized for desktop and mobile

• Two inline animations visualizing complex healthcare and sports data

• Dynamic graphs and scrolling elements that elevated user interaction

The process

HLabs broke the project into clear phases, from static designs to interactive animations.

1. Building the foundation

The team began by making illustrations in Adobe Illustrator and prototyping wireframes in Figma. Once approved, assets were imported into Rive to bring the visuals to life.

2. Streamlined animation

Using nested artboards in Rive (akin to precomps in After Effects), HLabs created reusable animations that adapted effortlessly across multiple layouts — mobile, desktop, and even Instagram Stories.

"With Rive, we animate once, and the design adapts beautifully across layouts," explains Alexandru. “The ability to reuse animations across layouts saved us hours of production time.”

3. Dynamic interactivity

HLabs implemented scroll-triggered animations and breakpoints, ensuring smooth, device-friendly interactions that loaded only when needed. 

4. IBM’s design system 

IBM’s vector-based design system played a necessary role. By incorporating predefined scenes, character libraries, and abstract elements, HLabs accelerated production while maintaining alignment with The Economist’s brand guidelines. This kept the budget and scope in check, delivering big impact without big overhead.

“Vector-based systems speed up production and keep everything on-brand,” Alexandru adds. “It lets us focus on the animations rather than building everything from scratch.

5. Custom graphics, consistent themes

Each article featured a distinct centerpiece — a circle, square, or supercomputer shape — as a thematic anchor. Rive’s flexibility allowed HLabs to replicate and customize these elements across pages. 

“Rive’s State Machine makes transitions between animation states incredibly smooth,” notes Senior Motion Designer Rick Kluskens. “It allowed us to create fluid, responsive visuals that felt natural.”

Results

The campaign exceeded all expectations:

5x budget growth: Clients saw the ROI of interactive content, leading to bigger budgets for future projects.

526% revenue growth: Animation projects became a major driver of HLabs’ business within a year of adopting Rive.

Higher engagement metrics: Interactive visuals boosted user interaction and time spent on The Economist’s pages.

The rise of interactive content

Hannah puts it best:

“Interactive storytelling is no longer optional. Audiences crave experiences, not just information. Tools like Rive allow us to meet this demand and make content both beautiful and impactful.”

With Rive, HLabs created animations that transformed The Economist’s IBM campaign into a blueprint for interactive branding.

Check out HLabs' guest blog post for Rive on how to prep illustrations before animating in Rive!