Improving access to environmental law data
Interactive data visualizations for understanding trends in environmental act violations
INTRODUCTION
As a designer at Cornell Hack4Impact, I worked closely with a co-designer, developers, and a non-profit client––Environmental Data & Governance Initiative (EDGI)––to make data on EPA act violations more accessible and digestible for journalists and the public.
I played a leading role in dictating our design process and sprint timeline, including conducting user interviews and competitor analysis.
MY ROLE
Product Designer
TEAM
1 Product Manager
1 Technical Lead
2 Designers
6 Developers
TIMELINE
Sep 2023 - Dec 2023
SKILLS/TOOLS
Figma, FigJam, Product Design, User Research, Visual Design, Interaction Design
CONTEXT
What is EDGI?
EDGI (Environmental Data Governance Initiative), is an environmental non-profit that aims to identify ways the EPA (Environmental Protection Agency) neglects various communities throughout the United States. The EPA is supposed to perform routine checks on facilities throughout the US and penalize those that fail to meet environmental standards. However, many industries tend to commit more environmental violations than others...
EDGI analyzes data from facilities in these industries to understand and report the extent of EPA violations by generating PDF report cards that depict environmental violations by US Congressional District.
PROBLEM
Report cards are difficult to navigate, frustrating to access, and based on outdated data.
Currently, the report cards display data by congressional district. Users must click into specific districts to view the PDF and are faced with slow loading times. This process can quickly become tedious if users are interested in multiple districts (which they often are).
The report cards themselves are difficult to scan, requiring users to scroll through pages and pages to find what they want. Furthermore, the report cards use outdated census data from 2010 -- our partners needed to find a way to generate reports less reliant on census data.
Thus, we asked ourselves...
💭 How might we improve EDGI’s data visualization reports for user-friendly access, streamlined navigation, and up-to-date data?
SOLUTION
An interactive data visualization platform displaying county-specific data
👀 A sneak peek of the final product. Jump to final designs
Our partners sought to facilitate greater understanding and learning of environmental issues for educators, students, journalists, and informed members of the public. Therefore, we replaced the report cards with a user-friendly web app for users to view county-based data and learn about environmental statistics for specific locations.
Since a lot of the data analysis performed is location-based, we decided that an interactive map, rather than a grid of links to congressional districts, would best display the data.
RESEARCH
Understanding the audience
We had three guiding pillars when conducting our research:
Familiarity
How comfortable do users feel with EDGI’s website and working with data?
Pain Points
What are users’ obstacles to accessing data on EDGI’s platform and interpreting report cards
Preferences
What do users find valuable when viewing data visualizations?
We conducted 4 user interviews with several different types of users...
We interviewed journalists, data scientists, professors, and people who worked on building the existing site, then aggregated our notes into the affinity map below:
User Research Affinity Map
Here are the key insights we gained:
💡 Non-expert users seek guidance from professors and data scientists at EDGI to interpret the data
This helped us prioritize clear access to information about the data, either as metadata or ability to contact an expert.
💡 Key points are necessary
All interviewees expressed the importance of having explanations and summaries to supplement the data visualizations
💡 Access to raw data is also a plus
Journalists were interested in being able to access and download raw data, as newsrooms sometimes prefer to create their own visualizations. While other users may simply screenshot figures, providing the source of the data is also helpful.
💡 The data is outdated
As we anticipated, users expressed frustration with how often EDGI updates report cards and how recent the data was. This is especially an issue for journalists who need to report on up-to-date material.
We looked at 2 other data visualization platforms with maps for guidance
We studied other data visualization platforms with interactive maps to gain an understanding of what features we should include and avoid in our product.
Strengths
✅ User guide
✅ Search by location (state or county)
✅ Side panel for visualizations and analyses
✅ Clickable circles to denote facilities and clusters of facilities
Weaknesses
❌ Excessive number of clicks to access information
❌ Repetitive information
IDEATION
Putting it all together
With the insights we gathered from user interviews and competitor analysis, we then had a better understanding of the product scope and features we wanted to implement.
Information architecture
Information architecture of the platform
Initial explorations
We began designing by focusing mostly on the general map interface, thinking about logistics of the user guide and what the county information panel would look like.
Following what we observed from competitor research, a side panel was a common UI pattern throughout our sketches. Its flexibility allows users to view the map alongside the data visualizations, compared to a popup that would cover the map and have to be closed before users can click on another county.
Side panel iterations
A major challenge we encountered was determining how we might display content within the side panel. We explored a few visual and interaction design options.
Mid-fidelity explorations of the side panel
Option A distinguishes category-specific content with a separate sub-panel, but takes up too much space on top of the map.
Option B also distinguishes category-specific content by allowing more space for content. However, navigating between categories would be tedious.
Option C seemed like a great option because it allows users to easily navigate between categories. However, we realized an engineering-constraint: all the data would have to be pre-loaded, which would mean longer loading times and an overall negative user experience.
We decided to move forward with Option D. It allows sufficient space for data to be displayed and quick navigation across categories. The design is simple, clean, and intuitive. Moreover, only data specific to the category would be loaded on-click, unlike in Option C.
County grading
We knew early on that we wanted to group the grades by legislative act (CAA, CWA, RCRA). However, we had a challenging time deciding how to display this navigation within the navigation bar UI. We created four different iterations of this nested navigation:
Mid-fidelity explorations of the Grading tab
Options 1 and 2 were continuations of the original design from our mid-fidelity wireframes, but we realized that having two navigation bars on top of each other was visually unappealing and could be confusing.
We chose Option 4 because we preferred the vertical orientation of the navigation, and the offshoot line clearly denotes which legislative act the information on the right belongs to.
Grading in the report cards (left) vs. our design (right)
Graph transparency & colors
As noted in the report cards and our side panel, not all data is equally reliable––CWA data is the most reliable. Currently, the report cards reflect this difference with opacity. In addition to opacity, we updated the colors in the visualizations to better highlight differences in reliability.
Comparison figures in PDF (left) vs. our design (right)
During our user research, one interviewee expressed that she didn’t understand the significance of having different colors on the Noncompliance graphs. After communicating this to our partners, we chose a single color and adjusted shades according to a key that consists of four intervals based on number of violations. (This key is purely our developers to assign shades to different bars.
Non-Compliance in PDF (left) vs. our design (right)
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 helpful and it wouldn’t be difficult to implement.
We explored 3 different designs for a collapse and expand button:
High-fidelity explorations for sidebar interactivity
We ended up choosing Option 3. The placements of the collapse icon in Options 1 and 2 were 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.
Organizing additional information
The report cards contain information containing indexes, tables, and background on the county data reports project. However, it’s difficult to read and navigate such a large volume of information, so we decided to implement an anchor navigation that scrolls to a section upon click, as well as a more effective type hierarchy with colors and different font-sizes.
High-fidelity explorations for anchor navigation
Initially, we followed EDGI’s current design for their navigation menu (Option A). However, we realized that this could lead to confusion––the existing design serves to navigate between pages, whereas we wanted our design to help users navigate between sections on the same page.
Thus, we went with Option B instead.
FINAL DESIGNS
Introducing EDGI’s county-based data visualization platform!
Interactive map
Upon landing, a user guide will appear with helpful directions on how to use the platform.
Access county-specific data by clicking into a state and selecting a county.
Click on facility markers to access facility-specific data.
Location-based searching
Having trouble identifying the state or county? Use the search bar to quickly locate the county you’re looking for.
View figures and explanations
Explore county-specific data by the following categories:
Grading
County Highlights
Comparison (on the county, state, and national level)
Non-compliance
Collapse the side panel to explore the map
Additional information and links
Easily find information about the project and data limitations and useful links to data by utilizing in-page anchor navigation.
OUTCOME
Ready for development!
My co-designer Sonia and I are the first designers to join the EDGI subteam and transfer their work from Jupyter Notebook to an interactive web app. While we were working on designs, developers were familiarizing themselves with the Streamlit framework, which is what we’ll use to build this platform.
As we approached the end of the semester with our final designs ready for handoff, our developers began bringing them to life. In future semesters, developers will be hard at work building the product. Due to constraints with other projects, the EDGI subteam did not end up taking designers in the second semester –– if I did join again, I would’ve conducted user testing and further refine our visual design.
REFLECTION
A lot of firsts…
This was my first semester-long, cross-functional design project––while it was a challenging semester, I am so grateful for the opportunity to be part of a team that creates positively impactful technology. I hope that our designs will help improve the experience of journalists, students, or anyone hoping to learn about environmental justice.
Here are my main learnings from this project:
🌟 How to lead a design process
This semester was my first time ever leading a design process without the guidance of a syllabus or design manager. As the more experienced designer on the team, I took responsibility of leading our design process--deciding to do competitor research, how long we should spend on each stage, etc.
🌟 Communication is key
There were so many iterations and revisions that we’d make throughout the week. It was crucial that we presented these changes and explained major decisions at our meetings (subteam, design crit, and partner call).
🌟 How to be a design mentor
I joined my project team looking for a mentor, but instead, I became the mentor! As someone who really values mentorship, I loved giving my co-designer advice on conducting user interviews, prototyping, and most of all, feeling confident to defend her design decisions!
THANK YOU
You made it to the end ❤️
Thank you for reading this case study! If you’re interested, feel free to check out my other projects below 👇