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...
GUIDING QUESTION
How might we improve EDGI's data reports to be more comprehensible and easier to access?
SOLUTION
A map-based and county-specific data visualization platform
FINAL FLOW DISPLAYING MAP CONTROLS & COUNTY DATA VISUALIZATIONS
We replaced the report cards with a map-based data visualization platform 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 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 obstacles to accessing and understanding EDGI's data reports?
Preferences
What do users find valuable when viewing data visualizations?
We conducted 4 user interviews with contacts provided by our client.
We spoke with journalists, data scientists, professors, and people who worked on building the existing site.
AFFINITY DIAGRAM
Our audience needs relevant and comprehensible data that they can easily draw conclusions from.
We gathered the following insights from our interviews:
To report on more up-to-date data, our partners decided to replace the census data with county-based data.
We studied 2 other data visualization platforms to help inform our designs.
Specifically analyzing other environmental data websites, we concluded that onboarding, easy discoverability, and clean design were most important.
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
EXPLORATIONS
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.
Displaying grades through nested navigation
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.
Improving graph visuals for better understanding
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).
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
FINAL DESIGNS
The final product!
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.
REFLECTION
My first time working cross-functionally! (outside of hackathons)
I am so grateful to have had the opportunity to be part of a team that creates socially 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:
It's better to over-explain than under-explain.
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 with developers, design crits, and partner calls)
Prioritize features with greatest impact and with scope in mind.
With only 10 weeks to complete our MVP, there were some features we didn't have time to implement, such as the administrator end, and easy access to raw data. If I had more time, I would've explored designs for the administrator experience to upload data.
How to lead a design process while collaborating with another designer
As the (slightly) more experienced designer on the team, I took responsibility of leading our design process — from conducting user research, competitor analysis, how long to spend on each stage, etc.