CLAIRITY

Clairity

A speculative app for breathing cleaner and better air. 

A speculative app for breathing cleaner and better air. 

A speculative app for breathing cleaner and
better air. 

DURATION

DURATION

November 2018

TYPE

School Project

ROLE

Research, Illustration, Data Visualization, UI/UX, Data Processing

SOFTWARE

Sketch, Adobe Illustrator, Photoshop

An app allowing users to easily understand the air quality in the city of their choice and the air in the surrounding area.

An app allowing users to easily understand the air quality in the city of their choice and the air in the surrounding area.

An app allowing users to easily understand the air quality in the city of their choice and the air in the surrounding area.

An app allowing users to easily understand the air quality in the city of their choice and the air in the surrounding area.

Wildfires and poor air quality is a big issue during Vancouver summers and in other cities in the west coast. Due to increasingly dry weather the wildfires have only gotten worse. In other parts around the world, pollution causes constant smog to the point where people can make bricks out of the air we breathe.  

This project was inspired by my curiousity about the city and how it had even come to exist. I was able to connect with my family who explained their own stories of the city and how they saw the way of life there. It sparked my interest in human centric design and concentrating on the residents' stories. 

PROBLEM

"9 out of 10 people breathe air containing high levels of pollutants."

"9 out of 10 people breathe air containing high levels of pollutants."

- WORLD HEALTH ORGANIZATION

Due to climate change and drier weather, wildfires are now outbreaking more frequently in the West Coast and can have a severe impact on the health of people living in these areas. Fires are now growing larger and burn longer due to these conditions. In other areas around the world, pollution and global warming can also contribute to poor air quality. It is estimated that 7 million people a year die from outdoor or indoor air pollution. People who may be vulnerable to this include elders, children and people with lung and/or heart disease. 

SOLUTION

Innovative Data Visualization

Develop an app that allows users to immediately see what the air quality is, their personal intake and areas around them that have high levels of pollutants. Use illustration as a method to showcase multiple factors of both AQI and weather to create a custom visualization. 

RESEARCH

Data Within the App

SYSTEM
The Air Quality Index is a universal system that has a clearer naming convention (low, moderate, hazardous) and a more specific level of air quality (ex. 1-500 scale). I used the AQI system and also took components of the Air Quality Health Index system (used in Canada) to put more emphasis on how the user can protect their health. 

POLLUTANTS
Several different types of pollutants are important in making up the general AQI which could be of interest to users using the app. I emphasized Fine Particulate Matter (PM2.5), Ground-level Ozone (O3), Nitrogen Dioxide (NO2), and Carbon Monoxide (CO) as it is often shown with data related to air quality.  

IDEATION

drafts-29

 

Sketches

I liked the concept of breaking down components of a certain object which let me to air pollutants. I felt that it was effective to do a general "live view" of where the pollutants are in the area around the user. I found air quality to be an interesting topic as colour and imagery is effective in showing the differences between poor and good AQI. 

Product Features

  • AQI and weather of the city as the lock screen background
  • Home page displays the weather and AQI of the specific city
    • General breakdown of humidity, temperature and air composition
  • Tips on how the user can put less strain on their health
  • Historic view of AQI trends
  • Live view to see where pollution is usually and pollution around the user with wind direction

App Architecture

An interesting component of the app would be a live updated background where the illustration would be influenced by the current weather and AQI. I wanted to ensure that the data and overview is the main focus of the app. 

project3_visualization2-20

Data Visualization

project3_visualization2-34

WEATHER
The weather is shown within the illustrations. The weather does not impact the air quality colour schemes. The icons are simple and clear. 

project3_visualization2-35

AIR QUALITY
Different colours indicate air pollution levels- the warmer the colours are the worse the air is for you, the cooler it is the better. Landscapes indicate AQI- the more buildings there are the worse the air is vs. the more nature images the better. 

project3_visualization2-36

LIVE VIEW
Pollution is depicted by red lines. Places that are previously or usually polluted is shown with yellow lines/ circles. The wind direction is shown with the white triangle as wind can quickly influence pollution. 

LO-FI WIREFRAMES

project3_visualization2

The initial lo-fi wireframes shows the visualization and explains how the data will be laid out. With the final I opted for horizontal scroll rather than veritical scroll. 

FINAL APP

MICRO-ANIMATION

NAVIGATION

I experimented with displaying navigation with more unique icons that reflect the illustration style of the app. 

iphone_x_flat_mockup

Play with the App

To view in Invision please click here

TAKEAWAYS

Have forward thinking. 
At first it was difficult to think speculatively and to create a whole new data visualization system for the main concept. It forced me to use design principles such as colour, shape and imagery to create a model that made the data easier to understand. This project focussed on trying new strategies and creating new design solutions.

Critique is essential to the process. 
Asking for various opinions from people from different backgrounds helped diversify and improve the final product. It was essential to ask users for their opinions on the app and what they thought could be improved. 

 

More Work

OverfishingPrint and Digital

Kowloon Walled CityPrint Design

Product IllustrationPrint and Digital

Say Hi!

Let's grab a coffee- feel free to email me at hmchen98@gmail.com. 

Here's my resume!

© 2019 Hillary Chen