CTW: Optimizing Water Collection with Data Visualizations

Timeline: Fall 2023

Team: Cornell Hack4Impact

Project Managers/Leads: Adriana, Josh

Designer: Mohamed

Developers: Leanne, Mohammad, Tuni, Jiho, Hannah, Kaden, Suhani

Client: The WASH Foundation

Client Background

The WASH Foundation (previously known as the Clean the World (CTW) Foundation) is a nonprofit organization that focuses on improving global health through hygiene initiatives. They execute their mission to provide universal access to water, sanitation, and hygiene with their partners around the world.

The Problem

Many people in Lima, Peru live off the water grid without access to clean and reliable water. The Wash Foundation has partnered with numerous organizations to install fog nets as a water source around the city, though aims to increase the scale of deployment, and efficiency of the location decision-making process.

The Solution

To help The WASH Foundation along its decision-making process, we created a data visualization web application for the organization to compare the quantity of water collected from different fog nets, marked with important factors to inform their decisions.

User Research

Our target users would be the organization themselves, as they gain insights into the piloting phase of their project. Key insights were drawn from our partners and other employees from The WASH Foundation whom they identified as potential users of the web app, as these data visualizations would benefit them in their role.

We established that the benefits of this visualization are two-fold:

1. Understanding factors related to scalability, through patterns and trends.
2. Displaying growth over time for grant proposals to continue to expand the project.

These conversations prompted a few key features and comparisons.

1. A main dashboard displaying a map with the fog net locations and the quantity of water they have collected, as well as key information regarding the scale of the project.
2. A customization feature to make comparisons between the most crucial factors in understanding where to place a fog net (i.e what locations or materials are more effective). This was deduced to be the specific location, the mesh type of the fog net, altitude, and time frame.

This prompted the following low-fidelity sketches of the two pages and possible comparisons with a filter.

Design Decisions

Considering the main pages and features of the web app, we further developed these designs with different iterations as medium fidelities. Data visualization sites have a way of communicating key insights onto a main dashboard which is where we began our process.

Main Dashboard

Options 1: 3 Graphs

Pros:

• User-friendly and requires no scrolling
• Information is easily conveyed with data points at the top of the frame and the graphs just under it

Cons:

• The 2:1 ratio of the graphs to the map makes the map seem less important than it is
• Suggests a relationship between data points and the map or graph beneath it
• Feels stagnant

Options 2: 1 Map + 3 Graphs

Pros:

• The map is a primary data source
• There is a clear distinction between data points and graphs

Cons:

• Requires scrolling which may hide the graphs upon loading page

Options 3: 1 Map

Pros:

• The map is a key source and the only focus
• User friendly and requires no scrolling
• Able to make the map more interactive to bring in other data points

Final Decision: We decided to move forward with option 3, and only highlight a map on the main page. This offers room for different interactions, such as map hovers which were explored next.

Map Hovers:

For each of the iterations, we explored whether the interaction should be clicked, which added a “more” button and the ability to x-out, or if it should be a simple hover. Given that the map displays the quantity of water in different regions, we explored how the user could: a) hover over the cluster to get key facts, and click the cluster to be taken to the customization page preset to that location. Or b) click on the cluster to get key facts, and click a more button to be taken to the customization page.

Option 1: Simple Square

Pros:

• A very simple and concise way of sharing these key facts

Cons:

• The bottom option feels cluttered

Option 2: Rectangle with Image

Pros:

• This option adds a visual aid to see the municipality/ cluster in question

Cons:

• This option would take up much more screen space

Option 3: Compact layout with Image

Pros:

• Makes use of the image with less space
• Both poptions feel more cluttered

Cons:

• adding an image may not be feasible due to no existing images of the net clusters

Final Decision: We decided to move forward with the first iteration and the left option. Having a hover and then click requires fewer interactions to get to the customization page. Additionally, regarding feasibility, not having photos would be easiest, and the photos are not necessary for the user since they are more concerned about the data.

Hover States:

Upon deciding on a hover, we explored how hovering on a cluster may effect the rest of the map through the following iterations.

Option 1: Overlay

Pros:

• Easier to prototype with components
• Clear distinction and change of quantity data to hover

Cons:

• Increases the busyness of the map

Option 2: Blur

Pros:

• Clear focus on the hover state
• Other data points are still noticeable to compare

Option 3: Blur and Hide

Pros:

• Heavy focus on the hover data

Cons:

• Too much contrast between initial state and hovering state

Final Decision: We decided to move forward with the second hover state, as it has a clear focus on the appearing data, though the user would still be able to see what other data points are available to look at next.

Customization Filter:

Moving on from the main dashboard, we iterated through the customization page. The main objective was to have an interactive dashboard with filters, allowing the user to highlight regions or factors of interest.

Option 1: Squeeze

Pros:

• User friendly and requires no scrolling
• Contains primary comparisons

Cons:

• Opening the locations tab would overlay on the other filtering options
• Does not include altitude
• Expanding and collapsing filter would drag the visualization to the right

Option 2: Scroll

Pros:

• Could include all comparisions, and be flexible to add more.
• Would not need to overlay filters

Cons:

• Would have to scroll

Option 3: Horizontal layout

Pros:

• Can visualize both a map and graph
• User friendly and requires no scrolling
• Expanding does not shift the visualizations

Cons:

• Expanding filters may overlay on the visualizations

Final Decision: We decided to move forward with the third option of a horizontal layout of the filtering options. This option allows you to see all the filtering selections at once and two congruent visualizations.

Data Input Iterations

With filtering through data, it was important to consider how the user would be picking their target ranges. While checkboxes made the most sense for the locations and mesh types, selecting a time frame or altitude of interest provides the user with the choice of range. Considering this, we explored different data input options.

Option 1: Manual Input

Pros:

• Very straightforward and user-friendly

Cons:

• Unable to easily know where the data starts or ends.

Option 2: Manual Input on Slider

Pros:

• Able to manually input, also able to use the slider.

Cons:

• Slider has minimal functionality besides providing bounds to the data.

Option 3: Manual Input + Slider + Chart

Pros:

• Manual input or use slider.
• Able to see the quantity of water vs time with the chart.

Cons:

• Takes up space from the filter

Final Decision: We decided to move forward with the third iteration because of the value added from the chart, and the ability to look into important time frames. This can help make note of seasonal trends on how much water is captured over time. This is similar for considering which altitude ranges produce the most water.

Final Product: Hi Fidelity Designs

Considering the design decisions above, here is the final product!

Starting with our landing page, we are exposed to a map of Lima, the target region established by The WASH Foundation. We see different dots representing the municipalities in that region, with the total quantity of water produced from the given municipality.

Hovering over a municipality, in this case Villa Maria del Triunfo, where The WASH Foundation has decided to begin their piloting phase, the user is able to see key facts such as the population of the region to know how many people they intend on serving, as well as the number of clusters, total quantity of water, and average quantity of water per cluster.

Beyond looking at the map through a municipality, the user is able to zoom in and see the breakdown of water quantity across different districts and clusters.

At this level, a hover looks slightly different, showing when the cluster was established, the number of fog nets within it, the total quantity of water it has produced, and the average quantity per fog net.

Moving into our data customization feature, we can see a map, similar to that on the home page with the different data points, along with a graph showing the quantity of water over time.

By expanding the filters, the user can use the checkboxes to filter down to specific municipalities, districts, or clusters, to see how efficient they are individually. They can also look at different mesh types, with Raschel, Stainless Steel, and 3D Nets being those used by The WASH Foundation. Additionally, they can use the chart and slider to look into a more specific time frame or altitude of interest.

Reflection

This project was 0 to 100 this semester, though built off the established relationship between the Hack4Impact team and CTW in the spring as they put together a mobile app which stores the quantity of water collected by different clusters. It has been an amazing experience building off the previous semester’s work to create data visualization tool based off their existing data collection app. My gratitude goes out to the current and past CTW team, along with our design leads for everyone’s contributions to this amazing cause.

As a new designer this semester, I experienced how truly iterative the design process is. There are many considerations that go into every decision— anywhere from who the user is, to the end goal of the app. Despite inevitable challenges arising along the way, I am proud of the work that was put together and look forward to the seeing how it contributes to The WASH Foundation’s mission as they continue to scale their fog net project.