The Journey of New York City’s Water
A project using Processing
The Problem
Despite growing up near to and then moving to New York City, and constantly hearing about how great the tap water is, I never thought about where that water comes from, or why it has been described as the “champagne of drinking water.” It turns out I am not alone there—only 32% of Americans can say with conviction that they know exactly where their tap water comes from.
The Goal
Although there are many detailed resources for teenagers and adults to learn where their water comes from, these don’t exist at the same scale for kids. For this project, I set out to design a kid-friendly, interactive, comprehensive explanation of where New York City tap water comes from.
My Role
I executed every aspect of this project, including background research, illustration, coding, and writing.
Step 1: Research
Step 1 - Research
The New York City water system provides more than 1 billion gallons of clean, drinkable water to city residents. My first step in this project was to figure out how exactly that happens - which I learned was a long, complicated process involving different reservoirs, filtration systems, UV radiation, and treatment. To make it kid-friendly, I watched educational science videos geared toward children to get an idea of the correct vocabulary and pace to use.
Step 2: Breakdown
After research, I was left with 17 steps of the water filtration process of New York City’s tap water. Knowing this was not conducive to the attention span of the intended user, I simplified it into five, concise steps. It still didn’t feel as kid-friendly as I wanted it to be, so I added a water droplet character to act as a narrator for the process. It creates a more friendly feel and is more in line with the educational videos I came across in my initial research.
Step 3: Plan
I sketched out the main screens. It was during this part of the process when I decided to use a map, pinned to the bottom right corner of the screen, to give context and show the water in its journey every step of the way.
Step 4: Illustration
Next, I drew the screens in Adobe Illustrator, 50 screens total for this project. This was my first project using Adobe Illustrator.
Step 5: Code
Next, I imported everything into Processing and wrote the code to make it into an interactive module, in which users click buttons on the screen in addition to using the arrow keys on their keyboard. It was important that there was an interactive element to this project to keep the user engaged.