Screenshot of the title screen, featuring an isometric illustration of highrises, buildings, houses, coastline, and roads. The title reads:

Screenshot

Screenshot

Screenshots of the scrollytelling piece

With the team at Voilà: Information Design— Estelle Villemin on illustrations, Chris Viau and myself on code, and Francis Gagnon and I on direction, I had the opportunity to work on a scrollytelling teaser for the Canadian Institute for Climate Choices on their report on the costs of climate change on Canada's infrastructure.

The story revolved around four isometric "tiles", each highlighting a different part of the story and together forming a cohesive isometric landscape. As you scroll through the page, you move around the landscape and zoom in on different elements highlighted in the report: electricity, buildings and flooding, and roads and railways. It was a fine balance between using the numbers from the research results to highlight the importance of investing in resilient infrastructure, and keeping the nuances of the topic at hand.

We used CSS to handle the panning and zooming, with enter-view as our scroll handler and Svelte as our JavaScript framework.

Animated screencapture of the scrollytelling piece.

< Back
LinkedIn: Patricia AngkiriwangTwitter: @cautioushopefulMail: hello@patriciatiffany.ca