Fighting air pollution in cities in collaboration with WHO and UN Environment

World Health Organization

Fighting air pollution in cities around the world in collaboration with WHO and UN Environment

World Health Organization

breathelife-back

ROLE

Design Lead / Art Direction / UI & UX Design




VISIT AT

www.breathelife2030.org

ROLE

Design Lead / Art Direction / UI & UX 




VISIT AT

www.breathelife2030.org

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.

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.

double

 

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.

 

imgery

 

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.

 

usergroup3
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:

 

breathelifesite1

 

Front page intro animation + fullscreen video background prototype above. Prototype for fullscreen navigation interactions below:

 

menu-animation-concept

 

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.

 

Desktop HD Copy
iphone-hands

 

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.

 

infographics

 

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

 

doublescreens

 

 

Email     /    Instagram     /     LinkedIn     /     Twitter      /     Vimeo     /    Dribbble    /    Medium