MyWater: Flint

I designed a responsive web platform to monitor lead levels of the Flint water crisis.

WHEN
May - September 2016
WHAT
Interaction Design
fullscreen

THE CHALLENGE

In 2014, a water source change in Flint, Michigan, led to dangerously high lead levels in the city’s water supply. By early 2016, the city of Flint was declared to be in a state of emergency. In 2016, Google.org donated $150,000 to the University of Michigan Flint to develop a comprehensive data platform to assist community leaders in making more informed decisions and providing critical information to the citizens of Flint.

On  behalf of Google.org, I served as the lead product designer to create a responsive web platform to track local data surrounding the Flint water crisis. My designs were implemented by a team of University of Michigan computer science students, with data provided by students from the Michigan Data Science Team.

How can we provide the citizens of Flint with information about their water supply in a way that is relevant, informative, and safe?

INSIGHTS

To better understand the Flint water crisis and its effects on the community, I created a user survey, which was filled out by local Flint residents. Questions ranged from "When was the last time you had your water sampled?" to "Where do you currently get information about the water in Flint?" to the open-ended: Is there any other type of information, resource, or tool that would be useful to you regarding the water in Flint?. The answers revealed the following:

There’s a lot of information already out there regarding the water supply.

“There are so many apps out there, but I don't know which one is realiable.”

“Facts, facts, and more facts! No politics!”

Trust and morale in the government are at an all-time low.

“No one in local or state government is truthful about the water quality and safety.”

It's not enough to know the numbers of your lead levels. What does that mean?

“Why must I still drink filtered water when my water tests negative for lead?”

“I picked up a water filter but I haven't even installed it because I don't know how!”

water-2

CLEARING THE WATERS

It became clear that the water supply was relative to the location. Based on the survey findings, I narrowed down the app to the following functions:

  • Understand: Map (powered by the Google Maps API), with the ability to search for lead level data in a specific location, toggle water pickup and recycling locations, submit photos of local service line pipes, and receive targeted advice based on the local lead levels
  • Empower: Step-by-step walkthroughs on how to test your water, clean a water filter, and clean an aerator
  • Inform: News and alerts feed of local news coverage of the water crisis

The crown jewel of the web platform was the map, as it allowed the community to better visualize their water. Users were found to be split in their usage of a desktop computer versus a phone, so when designing user flows, I designed for both mobile and desktop.

Toggling the map to view water pickup locations:

Zooming in to view lead levels for a specific location:

Learning how to install a water filter:

VISUALIZING DATA

Even though we had robust data (thanks to machine learning) to effectively show lead levels in the map, selecting the most appropriate way to visualize the data required many rounds of user testing.

homepage_heatmap

Heatmap: Originally, the data visualization was depicted in a heatmap style with organic shapes. However, users had trouble disassociating heatmap-style form factors from temperature and pressure, as opposed to lead levels, which were more discrete.

flint_oldcolors

Red-Yellow-Green: To have the data reflect the tiered categories of lead, I opted for a discrete, block-style visualization, with each block reflecting the average lead levels. I used a traditional red-yellow-green color scheme to reflect the levels of lead, with red = highest tier of lead levels, yellow = medium, and green = low.

However, during testing, users interpreted the green to mean that the water in their area was "safe." This was not the case and was a very dangerous assumption to make, as low lead levels is not the same as having safe drinking water.

homepage_yellowsqaures

Red-Brown-Yellow: To ensure that the data could be safely interpreted, the colors were updated to a red - brown - yellow scale. This allows the map to communicate any urgencies through the red areas, yet still informing users that there were still widespread lead levels in a way that was informative.

fullscreen

In the next round of testing, users adapted well to the new color scheme and felt it expressed the gravity of the lead level situation. However, we noticed that users were reluctant to zoom into each "block" of color, as they did not realize that the discrete blocks reflected the aggregated average of the lead levels in that area. Because the block structure did not effectively convey that the data could be examined on a micro level, we opted for a dot structure. Users felt this was more inviting to examine specific and granular data on the mpa.

OUTCOME

The platform, named My Water - Flint, was launched in November 2016, and a mobile app version is available for download in the Play Store. It was featured in the following:

COLLABORATORS

Ellen Faulkner (Google / Product Designer - Mobile App), Maribeth Rauh (Google / Software Engineer), Mark Allison (UM - Flint / Professor: Computer Science), Jake Abernathy (UM - Ann Arbor / Professor: Data Visualization), Rebecca Pettengill (UM - Flint / Community Relations), Jes Kane (Google / Marketing), Miyako Jones (UM - Flint / Developer), Phil Boyd (UM - Flint / Developer), Adam Powell (UM - Flint / Developer), Brad Schmelzer (UM - Flint / Graphic Designer), Chengyu Dai (UM - Ann Arbor / Data Scientist), and Cyrus Anderson (UM - Ann Arbor / Data Scientist).