West Oakland Air Quality
Community health powered by environmentalism.
This is a project about community, health, data, and the environment. WOAQ uses participatory research to achieve healthy neighborhoods for all in West Oakland, California.
West Oakland CA has air pollution. It is a mixed use neighborhood with residential and industrial areas. Its borders are defined by freeways and there have historically been big air quality issues.
Aiming to help residents feel more empowered about neighborhood air quality, geo-tagged sample data was collected by community members on neighborhood walks through West Oakland. My team restored access to this ground breaking data and built a digital foundation to get the program started again.
My Role
User research
Ideation and prototyping
UI design, user testing
Results
Restore access to data
Alignment with community needs
Enable program to restart
Design Process
These are the steps that I took while working as a UX Designer at WOAQ .
WOAQ is a long running community volunteer project that I have been working on since 2018. The team size was around 10 people, with a steady change in the participants over the years.
Problem
West Oakland residents were having health problems that were correlating to the air pollution in the neighborhood. For a West Oakland resident, questionable Air Quality was not something to feel empowered about. On bad air days you might wonder if there was anything you could do about so large a problem.
This community did something about it. Starting in 2002, residents selected the neighborhood indicators they wanted to track. The West Oakland Environmental Indicators Project (WOEIP) was formed. They began to educate themselves and neighbors about the health effects of freight transportation.
In 2008, a partnership began with Intel Labs of Berkeley. The Berkeley team provided mobile data sensors for WOEIP’s citizen scientist volunteers, who collect air quality data on routes throughout West Oakland. The Berkeley team builds a database that translates sensor files emailed by the WOEIP team into data maps.
When the research funding ended, the access to the data visualization was lost. West Oakland could no longer see the data on a map.
Discover
Landscape Analysis
There is a large array of air quality sites out there. I looked at other platforms and outlined some strengths and weaknesses that we might consider in relation to our project. Two platforms, EPA Village Green and EnviroScreen were closest to our mission and scope. The difference being that they were either not participatory or not mobile.
As for the other sites, the science and approach is relatable but the scale was very different.
On the left is a WOAQ data path in West Oakland and on the right is data collected throughout the city at stationary sites.
The WOAQ project is at a city block level. This shift in scale points to local sources and their impacts. It revolutionizes how we look at pollution and what can be done to change it.
Workshop and Analysis
We held a workshop with West Oakland Environmental Indicators Project.
Participants were students and community members.
How has air pollution impacted lives and what were the changes that would have a positive outcome?
Workshop participants saw the West Oakland community as our primary audience.
Accordingly, my team looked at questions that a resident might ask:
Can my family and neighbors be outside today?
Can we advocate for positive change in our Air Quality?
Can doing this science help us to help others in the global community?
User Interviews
Next, we conducted in-depth interviews with community members involved with the program. Residents are empowered by participating.
What does success look like?
We asked participants what success looked like for the project. We categorized the data in terms of impact.
We asked participants what success looked like for the project. We separated the data in terms of impact.
Personal decision making took the form of things like, “Recycling rates go up”, “Amount they go outside” and “Food, what to eat”.
Community success encompassed both advocacy and awareness on a local level. Thoughts included, “Community reduction legislation” and “Seeing on social media”
Science ideas were on a larger scale, such as “To stop pollution” and “National recognition”.
Define
Persona
I consolidated the research into a persona. This was someone to keep in mind when building the platform.
Meet Reese. She lives in West Oakland and has a strong connection to the community. Reese needs to feel proactive because she believes air pollution is causing health problems in her neighborhood.
Journey Map
If Reese became aware of the soot on her windowsill, then noticed her neighbors getting sick and then thought the two things might be connected, what could she do?
This map is a storyline of how Reese feels when finding out about pollution and what to do about it.
Friction points would be smoothed through interface changes.
Empathy Map
What does a typical day look like for Reese and her neighbors? What is important to her?
This attitudinal research that was reported by and reflective of workshop participants, not a cross section of the whole community.
It gave us a solid understanding of thought patterns, feelings and activities from the viewpoint of a community resident.
How might we...
Tell a story through the data.
Make the data personal.
Capitalize on the benefits of mobile sampling versus stationary methods?
Utilize residents’ knowledge about the neighborhood?
Design an intuitive way to upload this data?
Ideate
Maps
The data collection itself was old school, WOEIP owns three mobile sensors and a GPS unit to sync location to timestamps.
As a starting point we made maps that would connect data from various devices and visualize it.
We put our data on Mapbox. We used a popup with an EPA standard color index that corresponded to the reading of PM 2.5 in the air. Each sample could be seen relative to the last and any changes would have both a location and time component.
If a participant was walking near an idling truck the data would be on the map.
This differentiated the collected time and location data we were visualizing.
Design Principles
We had a visual design workshop to understand the values that shape our community partner organization and how they see themselves.
Information Architecture
Uploading and file selection took up the bulk of the architecture and both paths are a focus for UX development. Accounts, which is a next step after the MVP, also had a fair amount of detail.
Prototype
Wireframes
For our wireframes we worked from the information architecture and made flows for account sign in with various error states, file upload with various error states, and finally the successful upload and view of a map.
MVP
This is the landing page from our Minimum Viable Product, an important milestone. The data upload and maps were both functional, now we could debug and do some usability testing.
Design Audit
We have many contributors and this has resulted in a wide array of design elements. I took an inventory of the many different versions of components and styles, here I’m showing a portion of them.
We needed to align the existing wireframe UI styles with our needs going forward. This audit enabled us to build a foundation from which to start developing a design system.
Design System
I built a design system. Our visual design workshop provided us with a palette of color to work with as well as a sense for typography that would be representative of West Oakland.
Prototype
I incorporated some changes from user testing in a new prototype.
This included clearer CTA’s on the landing page.
Information about West Oakland’s Air was consolidated below the fold on the landing page to increase engagement.
Map was formatted as a square, more aligned to the shape of West Oakland and a lot of the air sampling collection paths.
Test
Usability Testing
We did user testing at WOEIP. I consolidated my notes here and annotated screenshots. We took a look at the site on a mobile device and it was not responsive. Mobile is an important part of future development.
This will be a guide for what comes next.
Next Steps
Finally I’ll come back to the prototype featured at the top. This is how it might look to incorporate this kind of testing on a mobile device.
As mobile is dominant and familiar in a way that desktop just isn’t, this was an opportunity to show an example that could be a more personal, relatable product.