EDGI: Improving Access to Environmental Violation Data
Overview
Client: Environmental Data Governance Initiative
Team: Cornell Hack4Impact — Project Manager: Jennifer; Technical Leads: Jessica, JJ; Designers: Sonia, Tiffany; Developers: Anya, Brianna, Eric, Hubert, Jacob, Julia, Owen, Selena
Timeline: Fall 2023 (3 months)
Goal: The goal for this project is to create an interactive map web app to display county-based Environmental Protection Act violation data for educators, students, journalists, and informed members of the public to easily digest.
The Problem
The EPA is supposed to perform routine checks on facilities throughout the US and penalize those who fail to meet environmental standards. However, many industries tend to commit more environmental violations than others. EDGI analyzes data from the facilities in these industries to understand the extent of EPA violations.
They do this by generating PDF “report cards” to depict environmental violations by US Congressional District. However, the data used is from outdated 2010 census data, displayed on PDFs that are difficult to understand, difficult to access, and difficult to navigate.
The Solution
EDGI seeks to facilitate greater understanding and learning of environmental issues for educators, students, journalists, and informed members of the public by replacing their PDF report cards with an interactive, user-friendly data visualization platform displaying US county-specific data.
Our goals were to implement the following:
- An interactive map platform with clickable + searchable states / counties and facility markers
- A user guide that can be closed and reopened
- Clicking a county displays county-specific data visualization figures and associated explanation
- An additional information section with a scroll navigation
User Research
EDGI’s target audiences are journalists, students, and informed members of the public.
Kicking off our project, EDGI provided us with some contacts — journalists, data scientists, and professors — that we could interview for our user research.
Our user interviewees had varying levels of understanding of data, with the journalists needing assistance interpreting the data and the professor who helps non-profits use Jupyter Notebooks to understand the data. While we were unable to interview students and journalists who have directly worked with EDGI’s report cards, we gained some valuable insights:
- Users want clear and easy access to information for understanding the data, whether it be metadata or contacting an expert.
- Users find it helpful to see key points and explanations that supplement data visualizations.
- Users (mainly journalists) want to be able to access and download raw data so their newsrooms can create their own visualizations.
Competitor Research
We analyzed two data visualization web apps utilizing an interactive map:
From these competitors, we identified the following strengths:
- User guide upon page landing
- Ability to reopen the guide
- Search for a region
- Side panel with data and analysis
- Clickable circles denote facilities and clusters of facilities
We also noted the following weaknesses:
- Convoluted steps to access data
- Repetitive information on every side panel
Brainstorming and Sketches
From the insights gathered in user interviews and competitor research, we developed the information architecture:
We organized the information in similar groups to the PDF report cards, but notable changes are:
- The client notified us they wanted to prioritize the information under the sections: Grading, Highlights, District in Comparison, Recent Non-Compliance, and the additional information at the bottom of the PDF.
- We decided to implement a user guide to address the issues we discovered in our user interviews of user confusion when navigating data platforms and digesting data.
- The data reliability note was not present in all data sections of the PDF, but applied to all of the figures in the PDF, so we included it in all data-related groups in our architecture.
Once we had our information architecture roadmap, we spent some time sketching low fidelities. We focused the most on the general map display and interface (the logistics of the user guide, county name pop-ups, and how to display the county-specific information on a side panel):
Medium Fidelity Designs
With a clearer picture of what we were looking to design, we spent a few weeks iterating in mid-fidelity designs:
Side Panel Explorations
One major challenge we encountered was determining how we might display each data section’s contents.
There were many moving pieces in our side panel iterations, from collapsibility to the number of side panels. We concluded that we would proceed with Option 2, a single panel which a user would navigate between data sections via a tab navigation, because it was simple, intuitive, and clean.
High Fidelity Designs
Grading Tab
We had a challenging time deciding how to display a navigation bar inside of a navigation bar in the Grading tab. We knew we wanted to group the information within the Grading section by legislative act (CAA, CWA, and RCRA), but found the double-horizontal navigation bars to be visually unappealing. We explored different displays of this nested navigation:
We decided to proceed with Option 4 because we preferred the vertical orientation of the navigation and the offshoot line to denote that the information to the right belonged to the highlighted act.
We realized that the data that our developers work with only contains county percentiles and not letter grades. Originally, we were simply improving upon how the grades were presented by emphasizing the letter and color coding. However, after speaking with our clients and developers, we decided to include the county’s percentile for each type of violation, providing further explanation for the grade.
Graph Transparency and Colors
Although there is data based on all three acts (CAA, CWA, RCRA), not all data is equally reliable. As noted in all of our side panels, the reliability of the data varies, with data on the CWA being most reliable. Following and improving upon the PDF report cards, we decided to change the colors for the visualizations comparing the county to the state and nation — this would enhance the color accessibility and better highlight differences in reliability.
One of our user interviewees mentioned that she didn’t understand the significance of having several different colors on the Noncompliance graphs. After sharing this with our clients, they suggested using shades to reflect intensity of violation, so we chose a single color and adjusted the shades accordingly.
Additionally, as the data visualizations will be located within the side panel, we would have to reduce the width of the graphs. We did this by removing the column of links to ECHO reports and hyperlinking each report to each facility.
Making Space for the Map
A few of our developers mentioned that it would be helpful for users to have more space when navigating the map. While this wasn’t explicitly brought up in user interviews, we felt that it was indeed a useful feature to have and it wasn’t difficult to implement, according to developers.
We explored 3 different designs for a collapse and expand button:
We ended up choosing Option 3. The placement of the collapse icon in Options 1 and 2 was a bit awkward, and we were unsure where an expand button would go after collapsing the panel. With Option 3, however, the button at the side of the panel would remain visible whether the panel is hidden or shown.
Additional Information
The additional information contains all of the indexes, tables, and background on the county data reports project. The PDF version of these sections is very difficult to read and navigate, so we decided to implement an anchor navigation that would scroll to a section upon a user’s click.
At first, we were using EDGI’s current design for their navigation between pages (Option 1), but we realized that would be confusing for the user, because the navigation we are implementing above has a different function (scrolling to a section on the same page). We went with Option 2 instead.
Reflection
We would like to begin by thanking our team: our PM, TLs, and developers. Thanks to them and their tireless work, our designs will improve the user experience of any individual looking to learn about EPA violations by U.S. county.
This project has been an incredible experience. We have grown dramatically as designers, learning throughout the project’s start-to-finish design process this semester.
Neither of us have designed a data visualization application, not to mention one utilizing an interactive map. While this posed many challenges during this design journey, we were able to blend design principles, user research, and iterative design processes to create a product we are both very proud of.
Additionally, this semester is our first as a part of Hack4Impact, and we are so grateful for this opportunity to connect and work with so many talented individuals on such impactful projects.
