AirPal: Motivating People to Wear Pollution Masks

Coursera Interaction Design Specialization Capstone Project

Kevin Mao
8 min readNov 28, 2016

For my capstone project based on the theme of change, I designed an app that motivates people in cities with serious air pollution to wear pollution masks. It starts by educating people who are skeptical of the dangers of air pollution and the effectiveness of pollution masks. Its core features include the ability to gift masks to contacts, and the ability to keep track of local air quality, as well as the air quality where friends and family live. By notifying you when your contacts should be wearing a mask, it fosters a sense of community and encouragement.

Here’s the story of designing AirPal.

In the summer of 2013 I spent two months in Beijing, China. I distinctly remember one night while I was out walking, I noticed a thick haze all around. It was quite the surprise to see this level of fog pervade an inland city. It was a greater surprise to find out that I was actually looking at air pollution. Even more unbelievable than that? Seeing almost nobody take adequate precautions against the pollution throughout my visit. On days when the air quality degraded to levels synonymous with forest fires, I would only see a handful out of thousands of people wearing masks, and only the kinds that are practically ineffective. In those two months I ate plenty of delicious foods, saw beautiful sights, and met some great people. Yet one of the most memorable things by far was that capricious yet constant pollution — at times impenetrable, other times a warm tint fading into the ether.

The project brief was to design an interface that facilitates personal or social behavior change. Although I spent a while thinking of what problem to tackle for my final project, it felt right that I settled on how to motivate people to wear pollution masks. Thoughts of that gray air have been as permanent in my mind as China’s air pollution has been in the lives of its people. Admittedly, I knew that an app wouldn’t be the best way to motivate people, but I wanted the challenge of doing something that spoke to me.

So do people living under pollution-laden skies need a change in behavior? According to the World Health Organization, outdoor air pollution caused an estimated 3 million premature deaths worldwide in 2012. With facts like these, and the stark dearth of masks I witnessed in China, it seemed a worthy challenge to explore.

Needfinding

Existing solutions are missing:

  • social component. Apps that do include this are leveraging human connection to enhance inherently isolated experiences. It seems fitting to explore this direction for an inescapably shared problem.

I was confident in this need for change, but in designing for real people, personal anecdotes alone are never enough. I interviewed four people — three residents of China, and one expat who had just moved out of the country — to better understand the current scene and to discover opportunities where an app might help.

Hypothesis: People are too lazy to wear masks. They don’t fully understand the health impacts of air pollution and how effectively masks can help them.

What I learned:

  1. Many people have started putting more effort into protecting their lungs since my lasting impression of 2013.
  2. People still don’t want to wear masks.
  3. There’s a need to encourage new behaviors, but that requires a reversal of apathy. People have to want to change.
  4. There’s a need for more thorough education on the topic.

I’d always been incredulous that people choose not to wear pollution masks. Wearing one when the air quality calls for it is a no-brainer to me. It’s not ideal, but neither is death by chronic obstructive pulmonary disease. Interviewing people different from me, and who have lived through air pollution for longer than a summer vacation, was an important step to building something truly useful.

Design research is crucial for building empathy in solving real problems for real people.

Ideation

With the insights gleaned from my research, I brainstormed a list of user needs. This really stretched me to think beyond the preconceived solutions that initially popped into my head. I distilled the user needs with the most potential into a point of view that would guide the rest of my project:

The omnipresence and severity of air pollution in China is a double-edged sword that impels action, yet can also overwhelm and paralyze its victims into inaction. People need to be educated about the dangers of air pollution and the effectiveness of masks. People need timely, inspirational, and actionable guidance to reverse apathy and encourage protection.

I came up with two core questions to further help frame the development of solutions: How might I educate people about air pollution and motivate them to wear pollution masks? How might I empower health-conscious and environmentally-minded people to motivate others?

As the dust settled, I chose to have the functions of my app revolve around a two-pronged educate + motivate approach.

For the educational information, I chose to address questions correlating to the interview insights. I thought about what people might like to know, and things they should know. This led me to the following topics: 1) How does air pollution affect my health? 2) How can I protect myself from air pollution? 3) When should I wear a mask?

Prototyping

The first stages of prototyping began as storyboards to visualize the sequence of events surrounding the usage of my app. It was a really practical way to imagine how specific features of the app could fit into someone’s life, without getting prematurely caught up in UI details.

Storyboards
UI sketches

I evolved and solidified these storyboards through sketches of what the actual UI would look like. To ideate quicker and focus on high-level concepts, I kept my sketches small.

With a better idea of what to include in a higher fidelity prototype, I sketched the UI in more detail and brought them into POP, an app that combines paper prototyping and hotspot-based digital prototypes. The way it enabled me to go beyond pure paper onto the smartphone where it was destined to be was highly useful. It was a good first opportunity for revealing holes in my screen flows and interactions that I overlooked during initial sketching, and it was great for deriving more realistic feedback.

Paper prototype

Design Heuristics

The realistic feedback came from the first people to test my prototype. I filmed one person running through it in person while I observed them. Afterwards I played the videos back to conduct some heuristic evaluation by linking the tester’s actions to Jakob Nielsen’s 10 Usability Heuristics. Then I had two classmates run heuristic evaluations on the prototype. As educated, outside perspectives, their feedback was immensely helpful in patching up holes in the UX and prompting changes.

At this point I made changes based on the evaluation feedback, began designing a low fidelity prototype in Figma, and implemented it with InVision. Through this process I further learned that rolling up my sleeves and prototyping can be better than running through ideas in my head, something that I often get stuck on in my idealistic mind.

Wireframes / low-fi prototype

Prototype Testing

I spent quite some time fleshing out the InVision prototype, especially with illustrating some characters I wanted to include in the educational sections. This may have been a substantial mistake that hindered the ideation and feedback loops I should have focused on repeating.

Final prototype (https://projects.invisionapp.com/share/NQ9FJI24G)

Eventually I developed a user testing protocol that included a usability script and debriefing questions. I used this protocol to test the prototype in person on two people. With their great feedback in hand, I continued tweaking and building the prototype.

I also used feedback from one of the testers in selecting a UI component to redesign for an A/B test on UserTesting.com. Interestingly, the four testers for the A/B test never ran into the problem the in-person tester encountered. This made me think that basing the A/B options solely on one person’s feedback might not have been ideal. Yet perhaps it was evidence that my redesign of the component was successful, and it was never a major problem to begin with. Regardless of whether the problem was valid, I still think the second version I designed was an improvement, and the testing at least didn’t invalidate that.

One thing I learned through user testing was the importance of testing on many different kinds of people within your target demographic. Due to the low number of testers I had throughout this process, each one seemed to be a revelation of UX findings and swayed my thinking quite a bit. For in-person testing, being able to reproduce a problem would give you more confidence in singling it out for further testing. Ideally I would have tested on many more people, especially on those for whom air pollution is a reality.

Next Steps

Measuring the success of AirPal would require data on rates of new user signups and usage of core functions. I would also interview users on their knowledge of air pollution after using the app. Most importantly, did the app increase the frequency of wearing masks in the long-term? In the short-term I would ask potential users if they would want to use AirPal, and if they could see it changing their behavior.

Testing usage of the contact communication options to see which could be prioritized or removed. Perhaps WeChat messages would be overwhelmingly popular compared to the other options. Testing for which option produced the most positive responses from recipients.

The journey of designing AirPal was an immersive lesson along the whole spectrum of product design. I still have lots to learn, but I’d say this gave me a good taste of what’s to come.

Try out the AirPal prototype here: https://projects.invisionapp.com/share/NQ9FJI24G

--

--