Moving to a net zero future in an uncertain world

CPP Investments, Canada’s largest pension fund, is committed to achieve net zero in their portfolio and operations and they wanted to communicate their plans to a larger audience.

We worked with them to craft an interactive explaining their commitment to all Canadians.

A guiding hand

One of the main challenges was communicating a nuanced approach to a very diverse audience.

To address this concern, we created a simple yet interconnected structure, concise language and visual elements and animations that maintained the attention and interest of our readers.

To help the reader make sense of a wide array of actions, the interactive follows the single thread of a shifting world and CPP Investments’ role in it.

The flow of the story

To maintain the flow of the story and structure the information, Voilà: divided the interactive into scrollytelling and static sections.

The introduction and conclusion of the interactive are designed as immersive scrollytelling experiences, aiming to captivate readers and communicate overarching concepts crucial to CPP Investments’ net zero commitment. This section uses mainly text, animation and transitions to convey information.

In the middle, the static section delves deeper into the specific commitments made by CPP Investments and outlines the strategic pathways to achieve them. This section uses text and charts to convey information.

Using animation to convey meaning

In the scrollytelling segments, animation takes center stage. The blobs move around and change colour according to the information presented when you are scrolling.

In the static middle section, animation is used sparingly, emphasizing the values presented in the charts.

Accessible for all

The mobile version optimizes multiple animations in the body of the interactive, as well as the navigation and menu, to seamlessly accommodate the varying screen sizes of mobile devices.

While animations can enhance the user’s experience, they may also pose a challenge for some who find them discomforting while reading.

To ensure inclusivity and accommodate diverse preferences, we’ve incorporated an option to disable animations.