Canada's infrastructure under the climate crisis

The Canadian Climate Institute wanted to bring to light the costs of climate change for Canada’s infrastructure.

With the tangible impacts that infrastructures have on our daily lives, we leveraged the power of illustration to bring this message to life.

A physical reality

With this web interactive story, our objective was to draw people in and entice them to read the research report.

The story features illustrations of different types of infrastructure to match the research areas of the report: electricity, homes and buildings, and roads and railways. By reflecting the physical reality of these topics, the images highlight the importance of infrastructure in our economies and our daily lives.

It is through traversing these concrete examples in the landscape that the reader is presented with the main messages of the report: the costs of infrastructure damage due to climate change, the savings brought by adaptation, and the new opportunities to adapt and make better decisions on infrastructure.

Click here to go directly to the interactive.

Layering the information

We used a layered approach to sprinkle in facts, nuances and detailed information. While the central image and the scrolling narrative provide the main message of the story, annotations on the image appear one at a time, with information that backs up these claims.

We chose a limited colour palette for this project, adapted from the palette of the Institute’s research report, to visually highlight the positive and negative messages presented in the piece. Throughout the story, a red-orange highlights the negative impacts of climate change on infrastructure.

1. An isometric illustration of a landscape, featuring city buildings, a power plant, roads, homes on the coast, and farmland. Layered on top of the illustration are 3 purple text boxes detailing the importance of infrastructure. They read: "Dependable transportation, electricity, water, phone, and internet lower business costs and increase productivity"; "Roads and bridges are critical to trade, food security, and personal travel"; and "Homes and buildings are centres of family, community and economic activity".

2. An isometric illustration of a landscape, featuring city buildings, a power plant, roads, homes on the coast, and farmland. Several pieces of infrastructure are highlighted in orange. Beside each, there is a corresponding orange text box on how this infrastructure is broken. They read: "The current cost of power outages in Canada– most of which are weather-related– is estimated to be $12 billion annually"; "Over 15 percent of Canada's roads are in poor or very poor condition"; and "Traffic congestion in the Greater Toronto and Hamilton Area costs $11 billion per year".

Zooming in

As the reader scrolls down the page, the central image pans and zooms into different parts of the landscape. As the narrative talks about one key part of the message, it relates it to a concrete example of infrastructure. A circle, akin to a magnifying glass, then appears on screen, containing a zoomed-in image that illustrates that particular example.

1. An illustration of city buildings, with a hand-drawn style circle overlaid on top, enclosing the corner of an intersection, street lights, the corner of an office building, and a bus.

2. A circle, larger than before, illustrates a zoomed-in view of the street corner in greater detail, with the bus, street lights, office building, and people. The larger landscape, behind the circle, is faded away in the background.

Scroll-bound animations

As the reader scrolls forward, the illustration comes to life, animated by the scroll wheel.

In these animations, colour is utilised again to mark the negative impacts of climate change. In the scene highlighting climate impacts on homes and buildings, the landscape turns a red-orange hue as the water level rises and inundates the houses.

A progression of a scroll-bound animation. A circle on-screen contains a zoomed-in view of the coastal portion of the landscape, featuring a number of houses by a coastline. The landscape is in the neutral colour palette, dark purple and beige, then turns orange as the water level rises and eventually floods the houses.

Back to the report

To close the story, a little Easter egg brings the reader’s attention back to the report. The cover of the research report is seen on a desk in one of the office buildings in the landscape.

As the story comes to an end, the cover animates out of the building and faces the reader, inviting them to read the report and share it on social media.

Play Video about A zoomed-in circle shows the corner of an office building, with a desk and a plant visible through the window. The cover of the research report is seen on the desk.

The final interactive

Here is the full and final interactive piece. Scroll away!

« Back to projects

Related projects

Finding the Canadian path to net zero greenhouse gas emissions

How to explain clearly the myriad of ways by which Canada can achieve its target of net zero greenhouse gas emissions by 2050?

Client: Canadian Institute for Climate Choices

Year: 2021

See the project

The misunderstood role of water in conflict

How can we draw a picture of the difficult access to drinking water in the Middle East and North Africa by populations forcibly displaced in times of conflict?

Client: World Bank Group