Improving access to environmental law data
Interactive data visualizations for understanding trends in environmental act violations
MY ROLE
Product Designer
TIMELINE
Sep 2023 - Dec 2023
TEAM
1 Product Manager
1 Technical Lead
2 Designers
SKILLS/TOOLS
Figma, FigJam, Product Design, Data Visualization, User Research, Visual Design, Interaction Design
OVERVIEW
EDGI is a non-profit that monitors and analyzes federal environmental data to promote public awareness of environmental policy.
As a designer at Cornell Hack4Impact, I worked closely with a co-designer, developers, and our client, the 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, competitor analysis, ideation, prototyping, and hand-off.
EDGI analyzes data from facilities across the U.S and communicates trends in EPA enforcement and violations by generating PDF report cards organized by Congressional District.
PROBLEM
EDGI’s report cards are difficult to understand and frustrating to access.
Currently, users must click on specific districts in a grid 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.
EXISTING REPORT CARDS
Thus, we asked ourselves...
SOLUTION
A county-based data visualization platform
Interactive map and guidance
Access county-specific data by clicking into a state and county to open a collapsible side panel.
Location-based search
Having trouble identifying the state or county? Use the search bar to quickly locate the county you’re looking for.
Quick links for faster discovery
In-page anchor links allows for easy navigation for information about the project, data limitations, and useful links.
We replaced the report cards with a user-friendly and interactive 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.
OUTCOME
Currently under 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.
RESEARCH
Understanding our users
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?
User interviews
We conducted 4 user interviews with contacts provided by our partners: journalists, data scientists, professors, and people who worked on building the existing site.
AFFINITY DIAGRAM
Insights
To report on more up-to-date data, our partners decided to replace the census data with county-based data.
Competitor analysis
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
The platform will take data visualization concepts from the Congressional Report Cards and simply size them down to the county-level. Therefore, we organized the information similarly to the report cards, with a few changes.
To address user confusion and make the platform less intimidating, we included a user guide. This would help users understand how to interact with the platform and make the most of the information.
Determining how to display county-specific information
Starting with the general map interface, we decided a side panel would be the best UI to present county-specific information. 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.
A major challenge we encountered was determining how we might display content within the side panel.
SIDE PANEL EXPLORATIONS
We decided that a single panel with horizontal navigation tabs would be the best approach to present the data. It provides the most space for data visibility, quick navigation, and a more optimal loading time than the accordion.
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:
GRADING TAB EXPLORATIONS
We moved forward with the vertical tabs and an offshoot line as the vertical orientation best distinguishes this sub-navigation, and the line clearly denotes which information pertains to each tab.
Graph transparency & colors
To better highlight differences in data reliability, we adjusted opacity and chose more vibrant colors for stronger visual appeal and enhanced accessibility.
During our user research, one interviewee expressed that she didn’t understand the significance of having different colors on the Non-Compliance graphs. After communicating this to our partners, we chose a single color and adjusted shades to reflect intensity of violation (higher violation count = darker shade).
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:
SIDE BAR INTERACTIVITY EXPLORATIONS
We moved forward with an attached button, as it would remain visible whether the panel is hidden or shown.
DESIGN SYSTEM
Creating a component library
To maintain consistent visual design throughout the process and reduce developer lift, we continually updated a UI component library based off the EDGI branding.
COMPONENT LIBRARY
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: