Interactive Rive Product Diagram

Joseph Fioramonti / Interactive product diagram / 2024

A product map you can click through.

My role: Rive animation and interaction build, After Effects motion

Delivered: An interactive Rive diagram (production builds v2 to v4.2), two Lottie demo animations and four Lottie component pieces

Tools: Rive, After Effects, Illustrator, Bodymovin (Lottie)

The brief

Joseph Fioramonti needed a static product diagram turned into an interactive animation. The diagram maps a platform's modules, among them Estimate, Schedule, Cost & Schedule, Contracts & Change, Plan & Progress, Compliance, Document, Model and Report & Explore.

The build

I first animated the diagram in After Effects and exported two Lottie demo animations on 3 December 2024, along with four component pieces (fill, mask, body and the starting hexagon). The interactive version is a Rive file: the first build followed on 4 December, then optimized v1 and v2 builds, and production files v2, v3, v4, v4.1 and v4.2, the last three on 20 December.

The delivered experience

The handover was the production Rive file (v4.2), with the Lottie demos as linear versions of the same diagram. The job closed on 23 December 2024.

Client feedback

"Ilya was very responsive and helpful in explaining the technical aspects of what we worked on together and providing everything I needed for the project. Great experience overall."

Joseph Fioramonti