David Tsai
Motion/Interaction Designer

WaterWatch

A Problem Reporting Flow
(App & Responsive Web Design)

Image alt tag
A Social Good Research Tool That Can be Utilized in Different Settings

Project Overview

The product:
WaterWatch is a part of the global research agency that focuses on water resources. The organization needs a tool that helps people learn about and manage water waste. WaterWatch's primary target users include community developers and members who are concerned with the amount of water they waste and would like to learn more about what they can do to reduce waste.

Project duration:
October 2021 to November 2021.

The Problem:

Household leaks can waste approximately nearly 900 billion gallons of water annually in the United States. The strategy team at WaterWatch has identified a lack of general knowledge about water waste and limited understanding about personal impact as crucial drivers for continued water waste.

The Goal:

Design an app that can let users report water problems and will improve education on the topic of water waste and help people manage their own water waste.

My Role:

UX designer leading the app and responsive website design from conception to delivery.

Responsibilities:

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.

Understanding the User

User Research: Summary

I used WaterWatch's data on water waste to develop interview questions, which were then used to conduct user interviews. Most interview participants reported feeling bad about water waste, but they didn't actively try to reduce their own water waste. the feedback received through research made it very clear that users would be open and willing to work towards eliminating water waste if they had access to an easy-to-use tool to help guide them and report water problems in the neighborhood.

WaterWatch

Persona: Laure

Problem Statement:

Laure works as a real estate agent who needs to collect accurate information to perform real estate market analysis because they work with clients to help them buy, sell or rent real estate, including office buildings, houses, and land.

Persona: Erec

Problem Statement:

Erec is a working caregiver who needs to track, suggest, and coordinate with community builders on water resources because they have a strong passion for helping to build a sustainable community with the best resource possible.

WaterWatch

Paper Wireframes

I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on waste tracking and simple reporting features.

WaterWatch

Digital Wireframes

After ideating and drafting some paper wireframes, I created the initial designs for the WaterWatch app. These designs focused on tracking and reporting water problems.

WaterWatch

Low-Fidelity Prototype

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of viewing an item about to expire and using it in a recipe.

View the WaterWatch
Low-Fidelity Prototype

Usability Study: Parameters

Study Type:

Unmoderated usability study

Location:

USA, remote

Participants:

7 participants

Length:

30-60 minutes

Usability Study: Findings

Report

People want a fast and easy problem reporting process

Track

People had difficulty finding information on ongoing projects and repairs.

Profile

People preferred clear indications of where to log in for further options.

Refining The Design
WaterWatch

Mockups

Based on the insights from the usability studies, I applied design changes like providing a clear section from the home screen to report problems that are specifically divided into 2 main categories.

WaterWatch

Mockups

Additional design changes included adding an overview page with in-depth water information of the city, and providing a clearer indication of the way to add or report problems.

High-Fidelity Prototype

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.

View the WaterWatch
High-Fidelity Prototype

Accessibility considerations

1.

Clear labels for interactive elements
that can be read by screen readers.

2.

The initial focus of the home screen
with the most used features helps define
the primary task or action for the user.

Responsive Design

Sitemap

With the app designs completed, I started work on designing the responsive website. I used the WaterWatch sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.

WaterWatch

Responsive Designs

The designs for screen size variation included mobile and desktop. I optimized the designs to fit the specific user needs of each device and screen size.

Going forward

Takeaways

Impact:

Users shared that the app made water waste seem like something they could actually help reduce in the community. One quote from peer feedback was that “with the reporting features, WaterWatch app helps bring caring about the environment to a personal level in a way that’s easy and engaging.”

What I learned:

I learned that even though the problem I was trying to solve requires more effort, diligently going through each step of the design process and aligning with specific user needs helping me come up with solutions that were both feasible and useful, and everyone get to help out!

Next steps

1.

Conduct research on how successful the app is in reaching the goal to save water and reduce water waste.

2.

Add more educational resources for users to learn about the importance of water conservation.

3.

Develop a system or ways to provide incentives and rewards to users for successfully reducing their water waste.

Let’s connect!

Thank you for your time reviewing my work on the WaterWatch app
and responsive website! If you’d like to see more or get in touch,
my contact information is provided below.

Email: perkymind@gmail.com
Website: perkymind.com