Air Quality Index Educational Comparison Tool
Hack4Impact x OpenAQ — Spring '24
My Role
Product Designer — Interface Design, Visual Design, User Flows, Wireframing, User Research, User Testing
Team (Hack4Impact)
- 1 Product Manager
- 1 Tech Lead
- 2 Product Designers
- 4 Software Developers
Tools
Figma, Google Forms
Timeline & Status
3 months (Feb-early May '24), developed and handed off to client
Overview
A desktop-based educational comparison tool to calculate different Air Quality Index standards from raw data.
This web app was designed and developed for OpenAQ, the world's largest open-source air quality data aggregator, to support their mission to tackle air inequality through universal data access.
I designed this product with a co-designer, while working closely with our Product Manager, Tech Lead, Software Developers, and stakeholders at OpenAQ. Our fully designed and implemented product was handed off in early May '24.
context
Air Quality Index (AQI) is an indicator developed by government agencies to communicate how polluted the air is.
Example of the United States' AQI standard
An AQI of 55 would be considered 'Moderate' by this scale.
Example of the United States' AQI standard
An AQI of 55 would be considered 'Moderate' by this scale.
AQIs are calculated based on concentrations of specific air pollutants.
Different AQI standards factor in different pollutants and apply distinct formulas to evaluate their impact on the overall AQI.
problem space
All this air quality data, but no clear comparison of different AQI standards.
OpenAQ is the world's largest open-source air quality data aggregator on a mission to solve air inequality.
The Air Quality Index (AQI) is a metric used by government agencies around the globe, but its single-number representation often lacks clarity about health impacts. Additionally, AQIs are calculated differently by different government agencies. What could be deemed 'Good' air by one country could be deemed 'Unhealthy' by another.
To address this challenge, OpenAQ partnered with our team at Hack4Impact to create a tool that calculates multiple national AQIs from raw data to empower changemakers to advocate for healthier air.
Pain Points
AQIs lack clarity
What does a 55 AQI really mean? AQIs often distill complex data into a single number, leaving users with little understanding of what it means for their health and environment.
Various AQI standards
Different countries calculate AQIs using varying pollutants and thresholds. What one country considers 'Good' air quality might be deemed 'Unhealthy' elsewhere, creating confusion and misinterpretation.
Transparency in AQI calculations
Providing transparency in AQI calculations can help users better understand the pollutants involved and their impact on health and air quality.
redefining our goal
To educate users about national AQI standards, their calculations, and increase transparency in their differences.
Additional Considerations
Our projects at Hack4Impact must be designed, implemented, and handed off to our client within three months. With our developers relying on our designs for implementation, the design process is fast-paced but rooted in careful choices.
users
For learners.
Since AQIs affect everyone, not just climate justice advocates, we decided that our target audience could be broadened to be learners—that is, anyone who's curious about AQI calculations, regardless of pre-existing knowledge.
As a user, I'd like to...
Recognize differences in AQI standards
Understand that AQI standards differ across countries with different calculation methods, leading to varying interpretations of air quality levels.
Understand AQI calculations
Learn about the pollutants that contribute to an AQI, how their concentrations are measured, and the calculation process that translates these values into a single index.
Visually compare AQI standards
Given a location, explore how various AQI standards take in the same data, but compute indexes differently.
design process
Before we could start designing,
we had a lot to learn.
Coming into this project, our team at Hack4Impact had little knowledge about AQIs. Luckily, our contacts at OpenAQ were the experts!
Between reading up on AQIs and brainstorming sessions within our team, we hopped on weekly client calls with OpenAQ.
Communication with our stakeholders
was vital.
In our early brainstorming phase, our client calls were filled with questions for OpenAQ, ranging from broader knowledge acquisition questions like 'Are AQIs calculated for an entire city or different locations in a city?' to more technical questions like 'Will this tool be a standalone product or should we incorporate design elements from OpenAQ's Design System?'
Visual depicting sub-index calculations
AQI calculations broken down into sub-indexes; provided by our contacts at OpenAQ
Clearing up misconceptions...
These questions sparked follow-ups discussions to ensure alignment across both teams. In other calls, we ran our preliminary feature ideas and sketches by OpenAQ. Talking through these ideas together helped clear up misconceptions and highlight important concepts we needed to incorporate into our tool.
A particularly notable discussion centered around the use of color. We initially wanted to use OpenAQ's base colors when displaying differences in AQI standards, but quickly learned that the specific color choices in different AQI standards were crucial, even if they differed by just a shade.
Getting down the basics
Quick sketches to jot some early ideas down
...and building the foundation.
These early conversations were crucial for setting the foundation for the design process. Regular check-ins with our client ensured we were on the right path and met their standards throughout the project.
Sketches turned into low-fis
Once our general flows were approved by OpenAQ, we turned our sketches into low-fidelity designs
final designs
Learn. Explore. Interact.
Our final product featured three sections: Learn, Explore, and Interact.
Learn consisted of our Welcome Flow, a seven-screen slideshow that introduced AQIs, their importance, and the two-step calculation process.
In Explore, users can search for any location worldwide—and we pull data from OpenAQ's APIs to retrieve air data from nearby weather stations.
Armed with the knowledge introduced in the Learn stage, the Interact section allows users to visually compare and contrast different AQI standards.
Desktop-first approach
Our final designs followed a desktop-first approach. To accommodate the comparison of AQI standards and given the timeline for this product, we prioritized desktop views.
Learn. Explore. Interact.
The Welcome Flow
Our initial Welcome Flow had just three screens addressing the What, How, and Why of AQIs (as seen in our early sketches and low-fis). More research on AQIs revealed the complexity of AQI calculations and the process of relying on sub-indexes to determine the overall AQI.
This was a lot of information on sub-indexes.
We realized that more slides would need to be added to the Welcome Flow. By splitting the content into multiple screens, we highlighted the calculation steps and made the information more digestible, reducing cognitive overload.
Design choices
For the Welcome Flow layout, we took inspiration from Duolingo's onboarding flow. In particular, we incorporated a progress indicator to enhance user context and orientation within the flow. To improve usability for returning users, we added a skip button, while balancing the fact that we wanted new users to go through the entire flow.
For navigation controls, we initially used text-based buttons ('Go back' and 'Continue'), inspired by Duolingo. However, since our slides were already text-heavy, these buttons added unnecessary visual clutter. We ultimately opted for arrow-based buttons, which provided a cleaner interface and more intuitive navigation.
Learn — Welcome Flow
A 7-slide welcome guide to navigating the tool.
Future Steps
While we aimed to incorporate visuals and less text on each slide, user feedback from our preliminary interviews indicated that there is still too much text. Improvements could be made by refining information hierarchy to further enhance clarity and reduce cognitive overload.
Learn. Explore. Interact.
City search
The Explore section allows users to search for and select any city to calculate AQIs for. Users can search manually, choose from pre-determined locations, or use geo-location.
Air quality data is fetched from local weather stations using OpenAQ's APIs. This data is collected frequently by OpenAQ's partner stations throughout the day.
Since OpenAQ often has multiple weather stations in a given city, we decided to retrieve data from the closest station to the user (if using geo-locate) or to the city center.
Explore — Search
Search functionality for users to find and select their city of interest.
Future Steps
The lack of feedback during the geo-location process creates uncertainty for users, as the API calls create a noticeable latency, but the interface provides no status indicators or system response. Adding a loading indicator, toast notification, or progress feedback would improve clarity and trust.
Learn. Explore. Interact.
The Main AQI Calculation Page
After selecting a location, users are directed to the main AQI Calculation Page, where they can explore AQI calculations for their chosen location.
This page allows toggling between different AQI standards, displays sub-index values contributing to the overall AQI, and provides a summary of the AQI's environmental and health implications.
AQI Sidebar
AQI calculations for the selected location in various standards. Clicking on any of these AQIs will populate the rest of the AQI Calculation Page.
Designing the AQI Sidebar
In designing the AQI Sidebar, we faced a space constraint due to the amount of visuals and data we needed to display. We ultimately chose a vertical sidebar for switching between AQI standards, a common design pattern in web apps.
Additionally, we considered making the sidebar collapsable for more space, but ultimately decided against it. The visual representation of different AQI standards, with their distinct numbers and colors, emphasized how these standards calculate AQIs differently for the same location, reinforcing our educational goal.
Location Header
Displays the selected location, the weather station used, current weather conditions, and the timestamp of the last data update.
AQI Standard
The selected AQI standard, the standard's scale, and dropdown selection for adding another AQI standard for comparison.
Sub-Index Calculation
Weighted sub-index values used in calculating the overall AQI. Users can learn more about how the AQI is calculated and the pollutants involved.
Summary
Key points relating to the AQI and implications for health and the environment.
Interact — AQI Calculation Page
The completed AQI calculation page showcasing AQI standards and sub-index calculations.
The Comparison View
The blue Compare dropdown in the single AQI standard view allows users to select a second AQI standard for comparison.
After discussing the limitations, we decided to allow users to compare no more than two AQIs at a time due to screen constraints and to maintain clarity by presenting the data for each AQI standard in parallel.
Interact — Compare AQIs
Users can compare two AQI standards for one location at a time.
Flippable pollutant cards
When users click 'Learn more about pollutants,' they are brought to a modal featuring interactive, flippable cards. Each card represents a pollutant considered by the AQI standard, and the back of each card provides a brief description about the pollutant.
Pollutant Info Cards
Flippable cards for the user to learn more about what pollutants are.
Future Steps
We anticipate that users will spend most of their time on the AQI Calculation Page. Future designs could improve usability by offering an easier way to access the Welcome Flow information, beyond clicking the logo.
Additionally, providing more insights into the AQI calculation process, such as specific formulas, would improve the cohesiveness of the tool, as users are currently directed to external documentation for this information.
user testing
Preliminary user insights
Once our final designs were implemented, we conducted user testing through a volunteer survey. Participants were asked to navigate and use the tool as they normally would, providing feedback on ease of use and key takeaways.
Understanding what an AQI is
Most participants felt more informed after navigating through our tool.
Understanding the purpose of this tool
Most participants found it easy to understand the purpose of this tool.
Returning to the tool
Most participants could see themselves visiting the tool again.
Breaking down AQI calculations
Most participants found the sub-index calculations to be particularly valuable.
retrospective
All about Air Quality Indexes.
In early May '24, our team at Hack4Impact handed off the AQI Educational Comparison Tool to OpenAQ after three months of designing, development, and user testing. With the goal of educating users on varying AQI standards, our desktop-first, user-centered designs enable users to explore AQI concepts, search for any location to calculate AQIs for, and compare AQI standards effectively.
Key Takeaways
Prioritize stakeholder engagement
Regular check-ins with OpenAQ provided invaluable insights into misconceptions and pain points.
Balancing visuals and functionality
Prioritizing functionality over visual aesthetics oftentimes led to a better designed product overall.
Importance of information architecture
Excessive text can be condensed or hidden in tooltips and modals to maintain clarity and enhance usability.
Future Plans
Future iterations of the product could aim to enhance user feedback for the geo-location functionality, ensuring users receive immediate and clear indications of progress.
Additionally, while the tool was initially designed for desktop views, designing mobile views can increase accessibility. However, these views pose a challenge, as maintaining clarity and intuitiveness for the comparison feature on smaller devices is pertinent.