World Health Organization

World Health Organization

Role:
ART DIRECTION + UI+UX + WEB
Scroll down for good times

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.


 

 

The campaign focus was to:

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.


 
breathelife wireframes
 

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:


 
   
 

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.

iphone-hands

 
 

Final search page design above. Final design for the air pollution gauge -data visualization and results page design & functionality below:


 
 
   
 
 

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.

Visit the live site at: BreatheLife2030.org