Project Intro
Air pollution kills 6.5 million people each year. It impacts our health through long-term exposure and causes near-term climate change, threatening the lives of future generations. The WHO and the Climate and Clean Air Coalition wanted to launch a campaign to mobilize cities and individuals to combat this invisible killer.
The Problem
Air pollution causes 1 in 9 deaths. It is the biggest environmental health crisis we face. WHO and the Climate and Clean Air Coalition wanted to launch an online campaign to mobilize cities and individuals to combat this invisible killer.
Campaign Focus
1. Get cities to become a BreatheLife city by committing to reduction of air pollution levels that meet WHO guidelines by 2030, and
2. To educate individuals to call for and adopt solutions that will reduce air pollution in their own communities.
My task was to help come up with a visual language & web experience that is highly engaging, while also being informative & easy to navigate.
Design strategy & concepts
The goal was to translate the WHO data into more accessible stories and content to raise awareness of the pervasive and severe nature of air pollution. In addition, we also needed to serve as a resource for the health and climate community and to mobilize cities and individuals to combat this invisible killer.
As first step in the website development process we fleshed out user flows for the main target groups, as well as developed wireframes to establish a blueprint for site content and required functionality.
Design direction
After establishing the user flows and wireframes for both desktop and mobile, I moved to develop a few different design directions. After discussions with the client, we landed on a fresh direction that makes use of smog and smoke as a design element to bring more life to the page. Prototype of the front page above-the-fold functionality below:
<style>
.video-container { margin: 0 auto 0 !important; max-width: 70% !important; }
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; box-shadow: 0 10px 40px 0 rgba(0,0,0,0.15); }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='video-container'><div class='embed-container'><iframe src='https://player.vimeo.com/video/179829152?autoplay=1&loop=1&autopause=0&background=1&quality=720p' frameborder='0'></iframe></div></div>
Front page intro animation + fullscreen video background prototype above. Prototype for fullscreen navigation interactions below:
Data visualization
A big part the website & UX challenge was to translate the WHO data of air pollution in thousands of cities around the world into an accessible and engaging experience. Even though the client initially wanted it to be just number-based, we knew we wanted to go beyond that brief and create something more visual, more engaging.
After several rounds of back-and-forth with the client to find the right balance between scientific accuracy and readability for the layman, we finally had it: An action platform that allows visitors to find the air pollution levels in their city in a visually engaging way, and also easily take meaningful action to address this global environmental and health crisis.
<style>
.video-container { margin: 0 auto 0 !important; max-width: 70% !important; }
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; box-shadow: 0 10px 40px 0 rgba(0,0,0,0.15); }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='video-container'><div class='embed-container'><iframe src='https://player.vimeo.com/video/184634296?autoplay=1&loop=1&autopause=0&background=1&quality=720p' frameborder='0'></iframe></div></div>
Infographics & social graphics
Smaller part of the project was to create a series of infographics to visualize the key statistics and figures regarding air pollution risk and prevalence.
In addition, we also created a set of shareable graphics for social media that exposed the links between air pollution and some of the world’s most common causes of death.
Campaign results
Many mainstream outlets covered the campaign and highlighted the linkages between air pollution and its effects on health and climate change, including global publications like the Huffington Post and local publications like El Tiempo.
The web experience also received extremely positive feedback both from the client as well as from the target cities, several of which are now in the process of becoming BreatheLife cities and committing to reducing their air pollution levels by 50% by 2030.
