AeroSpec

AeroSpec's Crowdsourced Map

Helping respiratory patient to avoid polluted area with a crowdsourced air quality map

My Role

Responsible for user research, interaction design, and execution of the crowdsourced air quality map

Team

3 UX Designers, 4 Hardware & Software Engineers, 1 Data Scientist, and 1 Product Manager

Timeline

February ~ April 2021 (3 months)

Project Background

AeroSpec is a portable IoT air quality sensor that detects the composition and density of chemicals in the air, targeting people who are sensitive or allergic to particulate matter in the air. Users can receive immediate analysis of the air they are breathing through AeroSpec's companion app.

By the time I joined the team, an MVP app were already completed. To further showcase the technology of IoT sensor network, I was assigned to design a crowdsourced map that visualizes air quality of users’ surroundings in different granular levels.

By the time I joined the team, an MVP app were already completed. To further showcase the technology of IoT sensor network, I was assigned to design a crowdsourced map that visualizes air quality of users’ surroundings in different granular levels.

Prototype Sensor and Companion App (MVP)

Project Goals

Design interactive and intuitive air quality map

Allow users to avoid polluted area by offering real-time and historical air quality data

Present crowdsourced data without compromising user privacy

Project Process

Research & Synthesis

Prior to the user research, I carefully studied a previous research report done by other designers to understand AeroSpec’s target user profiles and their pain points.

After identifying general user pain points, I decided to conduct a diary study, because sporadic activities like checking air quality of certain places do not happen on a set schedule. I assumed I would only get a narrow glimpse into such experiences with a contextual inquiry or an interview.

User Profile

Previous research suggested two user profiles.

Sensitive & Allergic Users

Have lung or heart diseases
Need to monitor air quality or their immediate surroundings in real-time
Need intuitive guidence when air quality reaches unhealthy levels

Have lung or heart diseases
Need to monitor air quality or their immediate surroundings in real-time
Need intuitive guidence when air quality reaches unhealthy levels

Citizen Scientists

Curious and concern about their local air quality
Collect and report local air quality data to advance scientific research
Collaborate with others to create air quality map

Curious and concern about their local air quality
Collect and report local air quality data to advance scientific research
Collaborate with others to create air quality map

Diary Study

We sent prototype sensors to three participants and helped them install the companion app on their smartphones

We sent prototype sensors to three participants and helped them install the companion app on their smartphones.

Method

Pre-study Brief: After sending prototype sensors, I held a pre-study brief to explain a concept of the crowdsourced air quality map and what to log.

Logging Period: I asked participants to log entries when they felt the air quality map would be useful.

Post-study Interview: After a week of logging period, I conducted follow-up interviews to discuss and clarify their logs in details.

Pre-study Brief: After sending prototype sensors, I held a pre-study brief to explain a concept of the crowdsourced air quality map and what to log.

Logging Period: I asked participants to log entries when they felt the air quality map would be useful.

Post-study Interview: After a week of logging period, I conducted follow-up interviews to discuss and clarify their logs in details.

Key focus areas

When and in which context would they need to check an air quality map?
What information they would like to see in the map?
How they are utilizing existing air quality map/forecasting services?
What features would help users to avoid polluted areas?

When and in which context would they need to check an air quality map?
What information they would like to see in the map?
How they are utilizing existing air quality map/forecasting services?
What features would help users to avoid polluted areas?

Findings

When

While planning a day

All participants wanted to check air quality data of their neighborhoods or places to visit when they were planning their days. One interesting pattern I noticed is that they wouldn’t necessarily check the air quality map right before going out, because 1) they often forget and 2) their destinations are usually indoor where air quality data woudn’t be measure by AeroSpec’s sensor network.

Participants logged that checking the air quality map in the morning would help them to make informed travel decisions or to gauge how much outdoor activities they could do for the day.

Context

Need to understand air quality trend rather than a snapshot

Most participants were interested in learning historical and forecasted air quality of certain places, as much as they are interested in a real-time data. They understand that a current reading is just a snapshot, and air quality may be changed by the time they arrive at a place.

In addition, they expact the map to support search feature, because they are interested in not only places they frequently visit, but also places they are not familiar with.

Pain Points

Existing air quality servcies aren’t relevent enough

All participants were already regularly checking Air Quality Index (AQI) via different services like weather apps or broadcasts, but they don't feel information from those services are relevant enough to them because of following reasons:

Their air quality monitors are often too far away from participants' locations, so they are skeptical about accuracy.
Participants don't necessarily know how to interpret air quality data and appropriate actions to take.
Participants don't get alert when they get into a polluted area.

Competitive Analysis

I conducted competitive analysis of four direct competitors and two indirect competitors.

Define Requirements

After synthesizing research findings and understanding industry standards, I defined design requirements with other UX Designers and my product manger.

Design Requirements

More local air quality map

Users often don’t find existing air quality maps relevant, because majority of monitors used by them are often too far away from users’ locations. AeroSpec’s crowdsourced map should provide more local and relevant information to users.

Not compromising privacy

Due to a unique aspect of portable IoT sensor, AeroSpec users may be hesitant to share their device data to contribute. The crowdsourced map should ensure users that all data is anonymized and not disclose their location.

Action & health recommendation

Although existing services provide essential variables for air quality measurement (e.g. wind speed and humidity), users don’t necessarily know how to interpret them. AeroSpec should provide more intuitive and actionable health recommendation rather than reciting measurements.

Trend analysis

Users are interested in learning historical, current and forecasted data at the same time to gauge if the current air quality of certain place is better or worse than the past.

Success Metrics

Daily Active Users

Number of Contributors

Satisfaction Survey

Design & Iteration

I started design exploration by selecting a visualization method for the air quality map. Then, I proposed features and concepts to meet design requirements.

Air Quality Visualization

I identified a visualization method that is accurate, intuitive and not compromising user privacy.

Selecting Map Style

I found that most competitors use either heatmap or markers to visualize air quality in map view. However, heatmap is a least accurate way to visualize air quality, as the map is filling gaps between monitors with predicted value. On the other hand, using markers is the most accurate way to visualize air quality, yet it would pin point contributors' ' exact locations which causes privacy issues.

Therefore, I decided to use grids, because it can accurately visualize aggregated air quality data within a cell, and it does not compromise privacy if granularity is properly defined.

Selecting Cell Shape

I tested three geometrical grids which are squares, triangles and hexagons with stakeholders, because they are the only shapes that could form a continuous grid. Based on discussion with engineers, I decided to go with hexagon grids, because a triangular grid would have inaccessible tap targets, and a square grid would suffer from distortion issues.

Defining Level of Granularity

Although the crowdsourced map would not show exact locations of users, they may feel uncomfortable to share their device data if the level of cell granularity is too small. To understand user’s comport zone, I launched a survey with mocks depicting multiple cell resolutions for the highest zoom level. Based on 54 survey responses, I defined 8 cell resolutions.

Sketch & Wireframes

Usability Testing

With the same participants recruited for the diary study, I tested my concepts and usability of the map.

Final Design

Crowdsourced Air Quality Map

Upon landing on the crowdsourced map, users could see nearby air quality data in hexagon grids. They could pan and zoom the map to see air quality of other neighborhoods as well.

Individual hexagon cells, including empty cells, are selectable. When they are selected, a bottom sheet showing air quality details of corresponding cell slides up.

Upon landing on the crowdsourced map, users could see nearby air quality data in hexagon grids. They could pan and zoom the map to see air quality of other neighborhoods as well.

Individual hexagon cells, including empty cells, are selectable. When they are selected, a bottom sheet showing air quality details of corresponding cell slides up.

How Hexagon Grid is Populated?

When enough number of air quality sensors is deployed, they could form a IoT sensor network.
AeroSpec collects and anonymize air quality data from contributors.
By referring coordinates, AeroSpec’s database identify where data sources are located in the pre-defined hexagon grid.
The crowdsourced map changes grid color to reflect aggregated air quality data in real-time.

Detail Page

When users scroll up the bottom sheet, it snaps to the top and become a full page. Instead of listing all kinds of variables used to calculate AQI, I only presented essential information that users actually care, such as AQI, approximate address of selected area and number of contributors.

Furthermore, users can get actionable insight and proactively make informed decision by accessing health recommendations and air quality trend.

Actionable Insights

Health Tips: Depending on AQI of selected area, action and health recommendation in this section updates. I avoided using technical jargons to help users interpreting current air quality measurements.

Air Quality Trend: Instead of separating historical and forecasted AQI, I decided to merge them into one section. By scrubbing the bar graphs, users can see predicted AQI of different timeframes calculated based on previously shared data.

Encourage Contribution

User contribution is a key to make crowdsourced products successful. To encourage user participation, I added social elements that shows the number of contributors and CTA button that leads to a shop page. I also tried to ensure users that shared data will not compromise user privacy by repetitively using the word “anonymous.”

Learning

Users don’t necessarily need to know all details

When I was interviewing subject matter experts like aerosol researchers and data scientists, they suggested me to present critical variables that are used to estimate air quality, such as wind direction, humanity and variety of particle measurements. However, I learned that users don’t necessarily know how to interpret those technical details. Such details even add cognitive loads to users and impede users from getting information they need.

Shelf Organizer

Redesign Libropia

WOW! Time really does fly when you’re having fun.

Redesign LibropiaUX Design

Zulily Filter RedesignProduct Design

Shelf OrganizerService Design