How we built an air quality app (and why it was harder than we thought)

Shameless opener: Today we’re excited to announce that our team at Wynd is launching our free app, Air Bubbles, out of beta. It’s the simplest way to see the air quality around you. You can download it here.

Air pollution lives all over the world. You might’ve heard about (or even experienced) airpocalype moments in Beijing or New Delhi, but there are actually pollution flareups in every country in the world.

Photochemical smog over Mexico City in December 2010. (Source: Wikipedia)

In fact, air pollution is one of the world’s greatest killers. It causes over 3 million premature deaths annually — that’s 6% of the world’s preventable deaths. It’s more than malaria and HIV/Aids combined. And that’s projected to double by 2050.

Everyone on our team has experienced the effects of air pollution — from catching a smog-caused cough to watching friends and family suffer from long-term respiratory illness.

3 members of the Wynd team in Beijing in 2015. Despite the 300+ AQI, we actually had a great time.

Our goal at Wynd is to help people be aware of their air quality — and ultimately, be able to improve it. We decided to build an app that shows you an air quality map and alerts you when the air around you is getting significantly worse.

Some screenshots I took Wednesday, April 6.

It was a long journey out of beta. Here’s how we did it.

Getting the data

There are air quality monitoring stations all over the globe. We use over 5 thousand of them for Air Bubbles — that’s one of the largest air quality data collections on a single app.

An air quality monitoring station in Wagga Wagga from New South Wales EPA (Source: Wikipedia)

What do these stations measure?

Typically, these machines can tell what’s in the atmosphere by analyzing the air for various pollutants, including:

  • PM2.5 — Tiny particles (with a diameter smaller than 2.5 microns) that can be inhaled deep into your lungs and camp out there for a long time. This includes ash, smoke, car exhaust, heavy metals, and industrial plant pollution. PM2.5 can cause asthma, lung disease, and heart attacks.
  • PM10 — Large particles (smaller than 10 microns — about 1/7 the thickness of a human hair), which includes dust, soot, and dirt. Like PM2.5, PM10 can cause various respiratory illnesseses.
  • O3 — Ozone, which is pretty useful in the upper atmosphere, but unhealthy at ground levels. It reacts chemically to your lungs and damages them, and too much exposure can cause heart disease and strokes.
  • NO2 — Nitrogen dioxide, which comes from emissions from vehicles and power plants. Exposure can cause lung illness and infection.
  • SO2 — Sulfur dioxide, a terribly stinky toxic gas which primarily comes from fossil fuel combustion, as well as volcanoes. It can cause bronchoconstriction and increased asthma symptoms.
  • CO — Carbon monoxide, a gas that comes mostly from car emissions. It’s the reason your dad taught you to not leave your car running in the garage. Carbon monoxide can prevent oxygen from getting to all of your organs. It causes intense nausea and dizziness.

The pollution data from these air monitoring stations is aggregated by service providers, which range from government agencies to small companies.

Once we found these service providers, we had to:

  1. Heavily, heavily vet these sources
  2. Aggregate their widly different data formats into our own database (which was a super-involved engineering effort)
  3. Find ways to turn their raw data into our numbers.

So, what are those numbers on the bubbles?

Now that we’re getting pollutant levels from monitoring stations all over the world, we can use fancy math to process this data.

The EPA Air Quality Index formula chart (Source: Wikipedia)

Each bubble shows the Air Quality Index (AQI), which tells you how clean or polluted the air is.

Source: AirNow

The AQI takes into account the 6 different pollutants listed above (PM2.5, PM10, O3, NO2, SO2, and CO). The actual number is determined by the worst pollutant on any given day. For instance, if pollution levels are all low on Thursday except that there’s a huge amount of nasty ozone at ground level, then the overall AQI will reflect ozone levels.

Which air quality standard do we go with?

Not everyone in the world uses AQI. Malaysia uses the Air Pollution Index, Canada uses the Air Quality Health Index. We tried our best to actually source each individual pollutant so that we could do our own math and use a consistent global standard. When crunching our own numbers, we chose to use the EPA’s air quality index algorithm. We could’ve customized it to meet the government standards for each individual country — but for a consistent, transparent user experience, we went with just one AQI scale.

The design

There are a lot of air quality apps out there, so what could set us apart?

Our hypothesis: A simple user experience that consistently works.

User experience doesn’t just mean beautifying the UI.

It also means that our developer Lee has to engineer an intuitive way for the bubbles to disappear and combine when the user zooms out.

It means that we have to create logic that alerts the user exactly when they need to be alerted, and never more.

An early draft of Push Notification logic

We wanted to make all of the interactions as invisible as possible.

Our “2 screen” app. Major feature creep, but we tried to shave it down as much as possible.

But why blue

I’ve had several people ask me why I chose to use blue instead of green (the government standard) to represent good air. Well, I think that green is a rather arbitrarily-adopted color based on antiquated stoplight metaphors and vegetation-driven “eco-friendly” conventions. Blue is a much more intuitive indicator of clean air because clean skies are blue. Also, my favorite color is blue. So there.

Choosing which countries to support

We want to bring air quality awareness to everyone in the world. But, unfortunately, we have to prioritize and add countries one at a time, in a deliberate, conscious order.

How did we choose which countries came first?

At first we thought the worst annual average air quality X the most iPhone users. Once we released beta, we figured out that choosing which regions to add is actually way more complex — it ranges from how passionately users reach out to us, to where our friends and families live, to how accessible, parseable, and costly regional air quality data is.

We get requests from friends and strangers to add regional air quality data all the time.

Here are the countries we added, in order, and the reasons we added them:

1. U.S.

We live here. And since many environmental agencies in the U.S. (including the EPA) have an initiative to make air quality open to the public, they created a group called AirNow — which provides a free and easy-to-use API. The air quality in the U.S. is generally fairly good, but there are many cities (especially here in California) with perpetually bad air quality, and people need to get alerted when smog or smoke flares up.

2. Mexico, Peru, Canada, Colombia, Vietnam, Indonesia

They’re covered in AirNow’s API. We’re quite pleased with that, since our team has family in almost all of these countries.

3. Mainland China

Several members of our team are Chinese, and the air quality is notoriously bad there. The iPhone market’s also huge. This was a no-brainer for us.

4. Germany

We really didn’t anticipate this one. After we launched beta, a huge chunk of our users came from Germany. They were our #3 demographic.

A couple weeks after our soft Beta launch (from App Store analytics)

Über unexpected! So we got to work sourcing data.

5. India

India’s air quality is arguably the worst in the world.

Source: World Economic Forum

But, unfortunately for us iOS developers, Apple only has 1% of the smartphone market in India. We debated if putting resources towards providing Indian air quality data (despite their lack of iPhones) was a good initiative — and we decided it was worth it.

6. Hong Kong, Taiwan, Singapore

Serious air pollution, lots of iPhone users. Also a no-brainer.

Translating the app

If we’re going to do all this backend engineering and data sourcing, we might as well translate the app so that people can actually use it.

This is a 2-screen app, so this should be easy, right?

Wrong. Here’s why:

1. Feature creep

Here’s an idea of how much text we ended up needing translated for all of the app’s bells and whistles — modals, alerts, onboarding screens…

2. Hey, do you guys know anyone who speaks fluent Japanese?

Not only do they need to be fluent, but they need to be a great writer well-versed in iOS jargon, not someone who just speaks it when their Japanese grandmother visits San Jose. Also, they need to do it for free, because we’re a 5-person startup.

3. App updates

Just one more thing, can you re-translate this secondary button on the Push Notifications gateway screen?
Just one more thing, can you translate this sentence for our App Store description?
Just one more thing…. Okay, you get the picture.

But we did it

Well, pooling our international friends and family, we localized Air Bubbles for English, Simplified Chinese, Traditional Chinese, Japanese, Spanish, and German.

A special shoutout to our lovely translators:

In order: Lizhi Liu (Chinese), Reina Tanaka (Japanese), Wesley Koo (Chinese), Kayla Thompson (Spanish), Patrick Daniel (German), and Stefan Woywode (German)

On the shoutout note…

High five to the Air Bubbles team

Lee Kang, backend wizard and iOS engineer
Ray Wu, Wynd Co-founder and air quality data sorcerer
Me, Anna Bleker, UI/UX designer
Brennan Stehling, iOS engineering consultant

We realize there is so much more we can do to improve Air Bubbles.

Let us know what you’d like to see. We’re constantly adding data for new countries, so tell us which regions you’re interested in and what features you’d like.

Thanks for taking the time to read this, and we hope you join us on our mission to create healthy environments everywhere.

— Anna and the rest of the Air Bubbles team at Wynd