EDGI

EDGI: Enhancing Access to Environmental Data

Role

Product Designer

Timeline

Fall 2023 semester (3 months)

Team

1 Product Manager, 2 Technical Leads, 8 Developers, 2 Designers

Background

EDGI analyzes EPA violation data to identify neglected communities

Our client, EDGI (Environmental Data and Governance Initiative), is an action-oriented collaborative watchdog that aims to identify the ways the Environmental Protection Agency neglects various communities throughout the United States.

The Environmental Protection Agency (EPA) is responsible for routine checks on facilities throughout the United States and penalizes those who fail to meet environmental standards. EDGI analyzes data from facilities to communicate the extent and trends of EPA violations.

EDGI measures violations of three legislative acts:

Clean Air Act (CAA)

Clean Water Act (CWA)

Resource Conservation and Recovery Act (RCRA)

Problem

EDGI’s PDF report cards are frustrating to navigate, difficult to understand, and challenging to access

EDGI’s current medium to display their findings is through “report card” PDFs, depicting environmental violations by U.S. 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 PDFs are long, cramped with figures and writing, and are disorganized. It is difficult to decipher or scan the information in the report cards.

EDGI’s PDF “report card” flow:

Solution

An interactive map web application displaying county-specific data

EDGI came to us 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 U.S. county-specific data.

Knowing that the data was primarily region-specific, we concluded a map with interactive counties would be a better solution than the current grid display. Here is a teaser of our final product:

Research

A desire for relevant, comprehensible data

I conducted user interviews with typical users of the PDF report cards:

Journalists

Data Scientists

Professors

I organized my interview notes into an affinity diagram below:

An affinity map of our insights we gained from user interviews

Affinity diagram of user insights

From these interviews, I gained key insights into common pain points, familiarity levels, and preferences:

Interpreting the data

Users who have less experience with data want easy access to information to understanding the data, whether it be through metadata or contacting an expert.

Quick Summaries

All of our users expressed the importance of succinct key points and explanations to supplement data visualizations, especially for journalists, who only need the data's overall conclusions.

Outdated Data

Many users I talked to expressed frustration with how relevant the data is. This is especially an issue for journalists hoping to create up-to-date news content.

Raw data

Journalists were interested in having the ability to access and download raw data from the visualizations, as a user specifically mentioned that some newsrooms create their own visualizations.

Learning the importance of onboarding, flexibility, and clear visualizations

I studied similar products to determine their strengths, weaknesses, and potential opportunities to address:

Competitor platforms

User guide

Search by region

Data and analysis in side panel

Clickable markers denoting facilities and clusters

Convoluted steps to access data

Repetitive information on multiple different side panels

Exploration

Restructuring content to streamline data comprehension

Our product is a redesign of the display of EDGI’s data, so our information architecture structure is very similar to the current PDF architecture. However, I did make some notable improvements:

Prioritize certain report card sections

Proceed with the most important sections: Grading, Highlights, County in Comparison, and Recent Non-Compliance.

Map and user guide

Implement a map with facility locations marked, implementing a guide to address user confusion when navigating data platforms.

Standardizing reliability note

Put the note under every section to emphasize transparency, because the note applied to every section but was not displayed in all sections.

The information architecture we drew up for the entire webpage

Our information architecture for the interactive web app

Sketching to translate the content to an interactive map

With an information architecture roadmap, I was able to start exploring designs. I was primarily concerned with the layout of the map, the logistics of the user guide, and the organization of the side panel.

The first brainstorming sketches of the interactive map

Refining

How might we display each data section's contents?

There were many different moving pieces in the side panel iterations, from collapsibility to the number of side panels.

Different layouts for the interactive map sidebar

I concluded that we would proceed with Option B, because it:

Has enough space to comfortably fit data visualizations and easy navigation across sections
Has a clean, simple, and intuitive design
Has a more optimal data loading time because the data are displayed one at a time

How might we display a navigation menu inside another navigation menu?

Our client wanted the violation data within the Grading section to be grouped by the legislative act that was violated. Originally, the letter grades were presented in a simple bulleted list, making it difficult to read. Our design groups by act, allowing the user to select an act to view its data.

We had to differentiate the inner navigation from the outer tab navigation because they navigate through different things, so I explored other ways to lay out the inner navigation.

Different layouts for the sidebar Grading tab

We decided to implement Option D, because it:

Had a visually distinct layout compared to the tab navigation
Best illustrated that the two inactive legislative acts were selectable
Clarifies that the right-hand side content belongs to the selected legislative act

Prioritizing accessibility via graph transparency and colors

In Comparison Figures

While EDGI has data on all three legislative acts, not all of the data is equally reliable. EDGI uses color opacity in their figures to denote reliability, and we found multiple opportunities to improve upon their In Comparison figure designs.

The old PDF In Comparison figure (left) and our redesigned figure (right)

I wanted to replace the black color, because the table’s axes and labels were black. We also were tasked with adding a County region to the existing National and State regions (because the data is county-specific), so I wanted to create a color scheme that was visually appealing, well-contrasted, and would be effective at conveying reliability through varied opacity.

Recent Noncompliance Figures

One of our users mentioned confusion from the different colors in the Recent Noncompliance section’s visualizations. After conferring with our client, we selected a single color and adjusted the shades according to a key, reflecting intensity of violation by the specific violator.

Our key is broken up into proportional fourths relative to the highest number of violations per county to account for variation in violation maximums. The key is not meant for public view, but for our developers to assign shades to values.

The old PDF Recent Noncompliance figure (left) and our redesigned figure (right)

We also compressed the original figure by linking the EDGI reports for each facility within the axis itself, saving space on the sidebar for other information.

Final Prototype

The long-awaited, polished product!

Map interactions

Additional information section

Search by county

Reflection

Lessons, new experiences, and takeaways

This was my first design project, both on Hack4Impact and personally. This was also a 0 to 1 project, so I was able to experience all of the stages of the design process. I am so thankful for this incredible and fulfilling opportunity; I have learned an immense amount. While it is difficult to summarize my growth in a few points, here are some key takeaways:

Working with another designer

I had no experience working with another designer before this. Being in a designer duo taught me the importance of considering other perspectives and ideas. The product of multiple minds is greater than the sum of those minds’ individual products.

Being mindful of developer feasibility

As this project was entirely created by college students, there are certain features we initially designed that are not feasible to implement. I learned to balance advocating for the user and keeping developer feasibility in mind.

Prioritizing certain features

There were many features we wanted to implement that we simply did not have time for, such as downloading figures and raw data. However, because our team were full-time students and many new to the project team, including myself, we had to prioritize certain features over others.

I 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.

I would also like to thank Tiffany, my design partner. Working with and learning from her on this project has been a privilege, and I hope to carry what I gained from her and this experience as a whole into my future project endeavors.

Lastly, thank you for reading! <3