WaterWatch
A Problem Reporting Flow
(App & Responsive Web Design)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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