AirPal

AirPal is an app that educates and motivates people in areas of high air pollution to protect themselves with pollution masks.

  • 2016–17
  • Coursera Interaction Design Capstone Project
  • Research, UI, UX, Prototyping, Illustration
Discover / Research

Why design for air pollution?

The New York Times has reported that outdoor air pollution contributes to 1.6 million deaths a year in China. During a visit to Beijing in 2013, I wore pollution masks to protect myself. Research has shown that masks can prevent negative health effects. It was an obvious choice for me. Yet even on days when the air quality degraded to levels synonymous with forest fires, I rarely saw people take adequate precautions.

Fueled by those terrifying facts and the stark dearth of masks I witnessed, I sought to build something to raise awareness and motivate the haze-shrouded country.

Needfinding

To better understand the current scene and discover opportunities where an app might help, I interviewed residents of China, asking about their views and feelings on air pollution, masks, and their daily routines.

My Hypothesis

People are too lazy to wear masks, and don’t fully understand the health impacts of air pollution and the effectiveness of masks.

Interview Learnings

One of the most important things I learned was how disconnected I was. From my distant perspective, wearing a mask seemed like a no-brainer. But to people living through constant air pollution—the people I was designing for—they felt powerless and overwhelmed.

I was happy to learn that since my 2013 visit, people had started putting more effort into protecting their lungs. Yet much of what I gleaned from my interviewees aligned with my hypothesis, and some of it was eye-opening for me:

  • ∙  People are not aware of exactly how and why air pollution is dangerous.
  • ∙  People are unsure of the effectiveness of masks, even thinking that they could be harmful.
  • ∙  People dislike wearing masks because they are a hassle to carry and uncomfortable to wear.

As I moved into defining the problems to solve, my learnings and insights gave me clarity about what to build. I learned a lot of useful information, but there were two prominent themes I extracted from my learnings.

Define / Synthesize

Forming a foundation

The first theme from my research findings was lack of specific knowledge. In order for people to start wearing masks more often, they have to want to wear them. And that desire for behavioral change stems from knowing why change is necessary. There was no way I could leave people misinformed about how particulate matter in the atmosphere affects respiratory and circulatory health, or not inform them on how they could protect themselves.

The second theme was the undesirability of masks. One idea that I easily dreamed up was a digitally-connected smart mask, but given that this wasn’t an industrial design project, I had to tackle this issue more indirectly. Instead, I turned to using motivation to help people stomach the annoyances of masks.

I synthesized the research insights into opportunity areas in the form of user needs and distilled those into two guiding questions that correlated to the themes:

How might we educate people about air pollution?

How might we use motivation to increase mask usage?
Develop / prototype

A two-pronged framework

Drawing from the two HMW’s, I generated ideas for solutions. Some of these included the ability to gift masks, getting notifications when favorite friends are experiencing dangerous levels of air pollution, and gamification of in-app actions. I bundled these ideas in various ways to get a feel for how the most promising ones could fit within an educate-and-motivate framework.

I wanted to go all out on the motivational front. Dangle the carrot in front, wield the stick behind, and back pats for good measure. After researching behavior change methods, I thought about how to cover both intrinsic and extrinsic motivators. The intrinsic motivators would come from the educational portion and realtime pollution data (a commonplace feature in apps dealing with air pollution), urging you to preserve your health.

Gamification was the obvious extrinsic motivator, but I put that on the back-burner when I realized the potential for social interaction. It made so much sense to leverage community to encourage users because air pollution is an inherently shared problem. Comparative analysis also showed me that this was a feature missing from available pollution monitoring apps.

So I refined the project’s motivational scope to focus on engaging personal relationships. The main idea was to allow you to track the air quality of your friends’ locations, and provide ways to send them simple, timely encouragement. In this way, people who are already health-conscious could be catalysts to inspire apathetic friends and family.

I started prototyping with storyboards, which allowed me to visualize how my solutions would play out in real life scenarios. I used a journey map to understand how specific features would fit within the app’s lifecycle. Low fidelity UI sketches let me quickly materialize my ideas without getting stuck on details.

I then utilized a paper-plus-digital prototype to get closer to the eventual form of the app, reveal holes in the initial flows and interactions, and derive more realistic feedback.

Test / Iterate

Getting feedback

The paper/digital prototype emerged through two rounds of user testing and heuristic evaluation with feedback that I incorporated into a mid-fidelity interactive prototype.

Testing at higher fidelity

After a third round of usability testing and design improvements, I zeroed in on a specific component for A/B testing: a set of navigation buttons in the education section that were skipped over in the usability test.

Interestingly, the four A/B testers never had any trouble interfacing with this navigation. This made me think that basing the A/B options solely on one person’s feedback might not have been ideal. Regardless, the second version of the navigation seemed to be an improvement, and the A/B testing at least didn’t invalidate that.

A Breath of Fresh Air

Prototyping a better solution

To further develop AirPal, I revamped key features and refined the visual design based on feedback. I also coded a fully interactive prototype with Framer so I could bring my idea to life more accurately for people to test.

Wireframe explorations of the revamped home screen & core navigation

— Introduction

My research indicated that welcoming first-time users with convincing facts would be crucial, so initially I wanted to do this with an abridged version of the education section. This turned out to be too overwhelming, so I pruned the intro to better grasp attention and promptly deliver the app's value proposition.

Old
New

— Contacts + Favorites

To give more prominence to Favorite contacts, I enlarged each card, added more glanceable info to easily discern when a friend is in danger, kept them on the home screen, and moved All Contacts to its own page. I combined the two step tutorial for adding Favorites into one part of the UI for persistence and to explain more upfront.

Old
New

— Communication

A built-in messenger was initially a large focus for letting users communicate. I removed this in favor of integrating with default system messaging and providing more options to better serve different use cases and lighten the overall experience. Send an auto-generated reminder for quick encouragement. Text or call for more urgent situations.

Old
New

More features

Essential knowledge

The Essentials section includes the most salient information on air pollution and how to protect oneself, and the latest topical news. All information in here would be easily shareable.

Sending gifts

The ability to gift air pollution masks could reduce friction and be a strong catalyst for those reluctant to wear them. A gift store also reinforces AirPal as a hub for combating air pollution.

Gamification

I plan to add a gamification element to create a more holistic motivational force. The implementation would avoid shallow, meaningless rewards in favor of concrete, useful ones. My initial thoughts were to have a system of points for taking actions like reminding friends and reading through educational content. A certain amount of points would grant access to a lottery that could award something like a vacation to an atmospherically clean location.

Try The Prototype

Next steps

Measuring the success of AirPal would mean gathering data and feedback to see whether or not users gained knowledge on air pollution, increased their frequency of wearing masks and other protective behaviors, and helped their friends initiate the same changes.

Based on that feedback and usage metrics, I would want to revisit the design of key features. How many different communication options are necessary? Could there be better hooks for persuading friends to use the app? Are the home screen features justified in their placement? It was a challenge deciding what features needed to be on the home screen. For example, did I need to partition the Contacts page into Favorites and all contacts when Favorites had a dedicated home screen spot?

Brain Growth

What I learned

Design research is crucial for building empathy in solving real problems for real people. I’d always been incredulous that people choose not to wear pollution masks. Interviewing people different from me—those who have lived through air pollution for longer than a summer vacation—was an important step to building something truly useful.

What I could have done better. The list is endless. Conduct observational and ethnographic studies. Generate more UI iterations during ideation phases. Better differentiate when to design at specific fidelities. Do illustrations later to avoid impeding ideation and feedback loops.

A little testing goes a long way. One thing I learned through user testing was how much you could learn by testing on just a few people. Each participant seemed to bring a revelation of UX findings and swayed my thinking quite a bit. At first I thought being able to reproduce a problem would give me more confidence in singling it out for further testing. In retrospect, I learned that it works to your advantage when the first few testers of a usability study cover a wide range of issues.

Special thanks to Lucy Lin and Tiffany Eaton for reviewing this project and case study. Thanks to Cory, Cyndy, Essie, Hetao, Humbeen, Jaclyn, Kegeng, Kenny, Laura, Michelle, Mike, Pei, Rundong, Sveta, Tiffany, my interviewees, my IxD classmates, and Nir Eyal for their insight and support on this project.