H2Flow - Interactive water kiosk

The Problem - How might we mitigate the problem of water pollution?

Due to the continuous physical and chemical contamination of the White River, the overall water quality in Indianapolis is facing a potential crisis. Moreover, it is notable that the primary source of water pollution comes from people's daily discarded garbage, and the primary source of chemical contamination derives from untreated agriculture and industrial waste. All of these are human-made, and most of them are making a tremendous impact on the ecosystem and the purity of the water.


As a part of IU grand challenge, our team decided to design an interactive social product, which could present the current water quality situation, relevant knowledge and potential hazards from water pollution to Indianapolis residents. The goal of this product is for educating and encouraging citizens to maintain the water quality and change their habits positively.

My Role

I managed various roles like interaction designer and UX researcher in a team of four. Our team conducted user interviews and gathered significant findings from primary and secondary research which was the base of our overall design. I was responsible for developing concept sketches, UX flow, mockups, wireframes, visual design & presentation.

Team Members - Swapnil Kosarabe, Hannah Roper, Huang Fu, Tabitha Tsai

Duration - 6 weeks

Design Approach

Site and User study

To understand the existing scenario and condition of the white river and the drinking water quality in Indianapolis, we conducted interviews with local citizens, white river cleanup volunteers, an official of white river state park, a nurse working in IU hospital and students. These interviews and site observations assisted us in learning surprising facts and deducing insights.

Local citizen
"I never experienced any health problems with tap water, but I am aware that white river is polluted."

White river cleanup volunteer
"Preserving biodiversity and educating public will help reduce water pollution problems."

Official from white river state park
"If we as citizens are not the watchdogs then water as we know it will cease to exist"

Nurse - IU hospital
"I do realize the threat of consuming tap water, and so we prefer packaged drinking water."

Official - Citizen energy group
"Reducing water pollution is a team effort, and the residents need to work with us."

White river cleanup event 

Physical trash removed from river

Discussion with White river state park officials

Summarizing Interviews

  • We mapped down all the observations and key findings from the interviews and found interviewers often referred to community engagement, public awareness, educating citizens for tackling the white river pollution issue.
  • As most of the physical trash collected from the white river was plastic, tires, bottles, etc. it was quite clear that a platform or a tool is necessary so that the government can address the issues directly to people.
  • We found workshops and events have the potential to bring all the people together to share their ideas for a cause, explore more into it and develop concrete solutions to fight the problem of pollution.
  • This, in turn, motivates people towards social welfare, and promote social interactions.

Interviews and Research insights

After gathering data from interviews and research articles, we deduced nine such significant causes to the white river pollution. These source of white river pollution are massive in scale and require expensive technology to curb the effect. However, even after adopting such sophisticated technology one cannot ensure if the white river will be devoid of any contaminants or physical trash unless the citizen of Indianapolis determines to take efforts from their end.

Brainstorming potential solutions

We created personas and listed down design recommendations to the core issues concluded after conducting interviews and research. Using these suggestions, we formulated design directions that would assist us in the process of brainstorming several solutions.

How our design direction addresses the problem:

Water quality: 
Our team decided to focus on water quality which forms a central issue of water pollution. According to a recent report, there are nine contaminants currently found in the potable water (Bowman, 2017 ). While this amount is over the level of what scientists believe is safe, it didn’t exceed the legal standards set by the Safe Water Drinking Act. Through the detection feature in our design, we intend to provide the users to check the water quality supplied at their residence for consumption.

Water quantity:
Global warming impacts our environment including water quality which affects the amount of clean water. That is to say, more contaminated water means less usable water for people to consume. Possible ways to tackle this issue is to reduce and treat water waste and to recycle trash (Denchak, 2017 ). With our design, users will be prompted to segregate recycled trash and dispose it in recycling centers and learn about diverse ways of reducing wastes.

Most interviewers mentioned people need to be better educated in regards to water quality and water scarcity. For example, if people keep wasting water without knowledge of the water scarcity issue Indianapolis is likely to face, it will be too late to fix the problem. Through our design, users will learn about various sources of water pollution, interact and collaborate with the community to share their ideas, propose new solutions and promote social interactions.

Key project requirements:

We used design directions to devise key project requirements which form the base of our overall product.


The system needs to be focused on education and more specifically help create an awareness about water pollution and contamination.


The user needs a more time-efficient and more straightforward way to test the water they consume.


The system needs to have prevention techniques to guide the user how to lower water pollution and therefore improve the water quality.

Social Interaction

The system should be capable of bringing different communities together to learn, share ideas, propose new solutions and promote social change.

Defining key project requirements

User requirements categorized 


Closed card sorting after defining project requirements

Cognitive evaluation of the screens

Design possibilities

Interactive water kiosk: Touch screen kiosk to promote social interaction among different communities and people to share ideas and propose solutions.

Mobile app: A smartphone app to notify citizens of the issues and create cleanup events to work collaboratively against pollution.

After several brainstorming sessions, we came up with diverse solutions to tackle these issues. We frequently refined our ideas and integrated multiple features to narrow down these solutions into two concepts - an interactive water kiosk and a mobile app. Further developing these concepts and evaluating our ideas with HCI experts we decided to move ahead with an interactive water kiosk which aligns with the principle of social interactions.

Exploring features to address issues

Interactive water kiosk

We conceptualized a water fountain during brainstorming sessions to address the issues. With several iterations based on ease of access, integrating water testing feature and interactive screens, and following ADA standards, I thought of a hexagonal shaped structure with an extensive roof, six interactive interfaces, and a water filling station. Purpose of providing a water filling and testing station was to appeal users towards the kiosk and further interact with the screens.

The hexagonal shape is divided into three parts :

Extensive roof acts as a water harvesting tool and restores the groundwater level

Central core: 
The central hexagonal stem of the kiosk holds six screens and four water filling and testing outlets. The kiosk has a LED news bar over screens that display news or general statistics of the city. There are four regular screens with dimension 750mm x 900mm and two giant screens with dimension 750mm x 1500mm.

Accessible design:
The lower part of the structure ensures safety for kids and ADA people.

Initial concept

Refined product

Low fidelity screens

Introduction screens
Introduction screens provide a user with brief information about using the kiosk and details about each feature to get familiar.

Feature 1: Evaluate your water
To prompt people to use the kiosk and promote social interactions we provided the feature of evaluating water where people will be able to test the water quality in their locality and analyze the conditions over a period through a timeline. Also, people will be able to check health and recycling statistics to understand the cause. Through evaluate your water, participants can compare the water quality in two different locations and learn about the measures taken to prevent the water pollution in different regions.

Feature 2: Education
The education feature intends to raise awareness among people about the sources of water pollution in the city and ways to prevent it. It includes various options like articles, videos, and poster design. People can go through the interesting articles and share the same with friends and families. Similarly, users can watch videos, rate it and share it with friends.

Feature 3: Events
Events provide an opportunity to users to participate in various events and workshops. It displays the range of activities occurring in a particular region and gives a brief description of the events. Users can enroll in the events or share it with their friends. People can view past events and learn about the impact it had on the public through photos and statistics. 

Feature 4: Discussion boards
People can provide feedback about water kiosk or content presented through it. Through discussion boards, users can initiate a conversation on a specific article or videos, and this will involve and engage other people in interacting and generating potential solutions for a problem.

Cognitive evaluation

Our team performed the cognitive walkthrough using paper prototype and identified several issues related to consistency, design, ADA standards, visibility, and clarity in the information. We considered two scenarios where the user would like to test the water quality for their location, and the second being that a user is looking for volunteering activities associated with the White River. Through these scenarios and a set of questions, our team came up with following issues :

Final prototype

3D model of water kiosk

Introduction screens

Evaluate water quality screens

Education screens

Discussion board