MyWater: Flint

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

When:
May - November 2016
What:
Product Designer

Background:

In 2014, a water source change in Flint, Michigan, led to dangerously high lead levels in the city’s water supply. This led to lead exposure in the tap water. The city of Flint was declared to be in a state of emergency by early 2016, and Google chipped in by donating $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. I was the lead product designer, though my role was that of many hats. My designs were implemented by a team of UM Flint computer science students (under the leadership of Professor Mark Allison), with data provided by students from the Michigan Data Science Team (under the leadership of Professor Jake Abernathy).


The site on a DESKTOP BROWSER

The site on a mobile phone

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 reliable.” “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 it mean?

“why must I still drink filtered water when my water tests negative for lead?”
And also, what are you supposed to do with the data?

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


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 (EPA ratings on tested samples) 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.

ABOVE:
These are two early-stage user flows I had designed for the map. It was originally heavily map-centric, with the ability to view more detailed information and submit information about a specific location. While this did emphasize the map features, it was not initially inviting to first-time users (”Where do I start with this map?”).
BELOW:
A low fidelity mock of the home page. I designed this after initial feedback on the user flows above showed that users found the map layout with no informational context too intimidating. I tried a new approach, using boldly placed blurbs to invite the user (”Let’s get started.”) with a text-based layout of proposed features of the platform.




Testing the waters:

Prof. Mark Allison's students at UM - Flint developed and coded the platform, using data sourced by UM - Ann Arbor students (under Prof. Jake Abernathy). For each iteration of the website, there were on-site user tests conducted with local citizens, who each tried out the prototype. The key findings that struck the biggest chord with me and inspired me to keep iterating?
  • Go Blue or go home. The overwhelming majority of users explicitly pointed out that they liked that the app was made in Flint, as noted in the header. With so many water-monitoring apps out there, it was comforting to have a tool crafted by fellow Flint residents (”I’d trust an app built by someone in Flint than someone outside of Flint.”). This inspired the visual design, which used a color palette featuring the UM blue and maize and hopefully struck a familiar chord with users.
    LEFT: This was another iteration of the desktop homepage. I applied a color palette of UM blue and maize. Originally, the map visualization was done in a “heat map” style. Later user studies showed that this was misleading, as users often associate this with temperature, as opposed to lead levels.
    RIGHT: In a later mock, I decided to try color overlays for the map instead of a “heatmap” effect, with green = low, yellow = medium, and red = high lead levels respectively, as I had felt that this was synonymous with the levels of danger. Read below to find out why I ended up scrapping this color scheme.
  • Transparency =/= safety. In the first iteration, I adopted a green-yellow-red color legend to denote low-medium-high predicted lead levels on the map. (See above -- Who hasn't seen that color scheme in a color-based safety scale?) When we tested the map with users, they interpreted green as "safe", which could have had dangerous implications (predicted low lead levels are not safe; there could still be lead!). In our next iteration, we had to be upfront about what a lead level prediction means for the actual water safety, in addition to clarifying some of the more technical information (i.e. "what does 2 ppb mean?") into actionable steps for the user (i.e. "Can I use this water to wash my food?"). This led to design decisions such as reworking the color scheme (yellow-brown-red -- see below) of the legend, including information on when the lead was last tested, and providing very targeted directions based on the predictions.

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:

The live site was coded and developed by students at UM - Flint, based on the user flows and product design that I had created:

What’s next?

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:

Other 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 / Student Developer), Phil Boyd (UM - Flint / Student Developer), Adam Powell (UM - Flint / Student Developer), Brad Schmelzer (UM - Flint / Student Graphic Designer), Chengyu Dai (UM - Ann Arbor / Student Data Scientist), and Cyrus Anderson (UM - Ann Arbor / Student Data Scientist).