COVID Wastewater Dashboard at UC San Diego
My Role
UX Designer in a cross functional team. Spearheaded research processes, iterating, prototyping, and user outreach efforts.
Outcome
Thousands of UC San Diego students and faculty use the dashboard almost daily to stay up to date on where COVID is on campus.
The Problem
Students & faculty need a way to quickly access data collected from the COVID wastewater system in order to safely return to campus and take proper precautions.
To quickly respond to the public health emergency, we had a tight timeline to adhere to. Rob Knight, the microbiome researcher who spearheaded the implementation of a wastewater monitoring infrastructure, gathered a team of 3 designers and 2 developers. We worked day and night to get this dashboard out to the public within 2 months.
Note: this project, as of 12/2021, has since been handed off to a different team to maintain and improve.
Final Product
Check the website out here!
Two Non-Negotiable Needs
1. Smooth Zooming & Dragging
As our efforts were quite early in the wave of wastewater COVID testing infrastructures, we conducted secondary research on mainly Google maps and other navigational tools.
Nobody wants to use a map that’s difficult to zoom into an area of interest!
2. Accessibility
We found that it was very difficult to distinguish different buildings not using color. Most technical maps used different texture shadings, but our campus buildings were more complex and smaller shapes than countries.
Therefore, we had to make sure that our colors were widely understood and had enough contrast to support accessibility.
Color had a semantic meaning here. We picked red to represent buildings with COVID detection in wastewater and blue to represent the lack thereof.
USER RESEARCH
User Journey
From talking to users, we created and maintained a user journey map to keep track of all the action items in our design. This was helpful documentation for both designers and developers!
USER RESEARCH
Design Documentation
While designing endless iterations, we also created design documentation that is easy for devs to follow and navigate.
User Testing
We validated our initial designs with many stakeholders via Zoom: professors, campus health faculty, and campus IT folks. These were more in-depth conversations showing mockups and asking some research questions.
Our first iteration was validated with “hallway” testing. Due to COVID restrictions, we set up a table on the busiest walk path on campus so we could recruit passerbys. We collected basic demographic info: student/faculty and if they would be willing to participate in further testing via Zoom.
TESTING
User Validation
Nearing the release date of our dashboard, we validated our design multiple times and tested the functional dashboard with university faculty. Most of the faculty was curious how the wastewater was collected (they knew that multiple buildings fed into a single wastewater infrastructure), so we decided that it’d be informative to add an extra bullet points in the banner:
VALIDATE
Creating the Product
As our developers worked on the backend development, we continued iterating based on our user feedback. Here is one of our many hi-fi mockups:
DESIGN AND DEV
Reflection
I learnt how to align user needs and technical constraints while creating a high quality dashboard. During the iteration process, I researched a ton about data visualization and dashboard requirements. I had a lot of grand ideas that did not match our timeline and exceeded what our users needed. Our users didn’t need a fancy dashboard, they need to be informed about COVID detections around campus and get on with their day. So that’s exactly what we made!
I developed a strong understanding of complex biotech systems in order to design a streamlined user journey. While I can modify the UI workflow, we can’t modify the wastewater infrastructure. I did this by maintaining a strong flow of communication with the developers, engineers, and health IT technicians. The knowledge I gained from them is invaluable!