C40 Cities

website + infographics for a global non-profit

The C40 Cities Climate Leadership Group is a network of the world’s largest cities working together to make measurable progress in addressing the effects of global climate change.

fig. 2

The city page displays a set of dynamic, cumulative infographics — reflecting available data as it is updated across individual cities.

fig. 3

And each city has an individual overview page, generated on-the-fly based on the data entered via individual accounts in the CMS.

This project had two main goals: (1) to serve as a communication hub for the sixty-plus cities in the C40, and (2) to communicate their mission and ongoing progress to the general public.

figs. 4–7

A stand-alone long-scroll HTML5 narrative infographic designed to explain the focus and mission of the C40: the city in the center of the screen appears to go through several animated transitions as the user scrolls.

fig. 8

In order to better reach a global audience, the site is designed to be device agnostic and fully responsive.

figs. 9–12

This interactive Web-GL powered infographic allows users to pan, zoom and rotate an idealized city block in 3D space to learn about the challenges cities have overcome with green solutions.

I lead the design team from Discovery through QA to design the website, both interactive infographics and a strong visual system to carry through all of the C40’s online messaging.

fig. 13

Design details were all carefully considered to support the overall brand message of clarity, transparency, boldness of vision and accessibility.

“We are revolutionizing the way cities communicate with each other and share information more broadly and this new platform will play a critical role.”

NYC Mayor Mike Bloomberg, as told to Mashable

“This is a gorgeous infographic. Go look at it. Scroll through. Savor.”


“Check out this sharp interactive graphic that illustrates the myriad problems associated with climate change facing the world’s cities.”

Atlantic Cities

“…some nice data visualization… [and] a nifty, animated infographic which [gives] a nice visual sense of how big cities and climate change affect each other.”

Agency Spy

“…an effective forum where [cities] can collaborate, share knowledge and drive meaningful, measurable and sustainable action against climate change.”

Visual News

“Dynamic data visualization is the hallmark of the Barbarian Group’s new website for C40 Cities…”

Creativity Online


  • Large-scale dynamic website, built on Refinery CMS.
  • Parallax scroll interactive infographic.
  • WebGL interactive infographic.

my role

Creative Lead

at the Barbarian Group


Spring 2012


Bloomberg Philanthropies