I designed and integrated a mobile app and dashboard for real-time water monitoring, tailored for residents and building managers. My role encompassed UX/UI design, prototyping, and close collaboration with researchers to enhance the overall user experience.
Timeline
4 months
The Team
1 UX designer
1 researcher
3 scientists
My Role & Goal
UX designer
MVP shipped in 2024
Collaboration
Physical product team
Design team & researcher
What
SunWATER+ is an AI-powered solar panel system that treats greywater from washing and bathing for indoor reuse. It utilizes photoactive nanomaterials and microlenses to disinfect water while generating energy. The system also features a mobile app and dashboard for real-time water quality monitoring and energy savings tracking.
Who
How
Impact
•
PROBLEM STATEMENT
Challenges in existing greywater reuse technologies often deters user adoption due to unclear operational feedback, difficult maintenance procedures, and perceived reliability issues. Users require a straightforward, transparent, and engaging way to interact with greywater systems to build trust and encourage broader adoption.
💬 @LauraM (Environmental Researcher), July '24
One of the biggest issues we see in greywater adoption is the lack of real-time water quality feedback. Users hesitate to trust treated water without clear, simple indicators showing when it’s safe for reuse.
To address these challenges, the SunWATER+ science team developed Solar Optics-Based Active Panels (SOAP), integrating photo-active microlens technology to visually and thermally demonstrate the disinfection process. These panels helped bridge the perception gap by making water treatment more transparent and intuitive.
However, physical transparency alone isn’t enough—users still need a clear and accessible digital interface to interpret system status, water quality data, and maintenance requirements. That’s where UI/UX design comes in.
•
DESIGN PROCESS
The SunWATER+ system has inherent complexities—the physical product integrates a Greywater Panel and a Treated Greywater Tank, while the software supports its greywater treatment functionality by visualizing data from AI-driven water monitoring, filtration processes, and energy efficiency tracking. Designing a UI for such a system presented a unique challenge:
Bridging the gap between scientific research and user-friendly design
Ensuring clarity for diverse users—hotel managers, and homeowners
Translating complex data into intuitive visuals and actionable insights
•
ITERATIONS
I crafted low-fidelity screens to define key interactions and streamline the user experience. Given the technical complexity, I started with the research team’s initial concept. These early mockups helped translate dense data into intuitive screens, making real-time monitoring, diagnostics, and filtration insights more accessible. They served as a crucial tool for gathering feedback and iterating quickly before moving into high-fidelity designs.
•
Design Sample
One of the key challenges was addressing users' skepticism about water safety. To tackle this, I initially explored a color-coded status indicator system, aiming to provide immediate visual feedback on water quality.
Iteration of Color-Coded Status Lights
🔵 Safe for Indoor Use
🟢 Safe for Irrigation Only
⚫ Not Safe (Two color variations: Brown & Gray)
While this approach provided instant clarity, it also raised unintended concerns. Discussions with the research team revealed that a “Not Safe” indicator created unnecessary anxiety, leading users to question the reliability of the system itself—even when it was functioning correctly.
Improved Design: Actionable Alerts Instead of Static Warnings
Recognizing these concerns, we shifted toward a more dynamic and user-friendly approach—replacing static warnings with an notification system. This decision was informed by insights from meetings with engineers, where I learned that the system stops functioning primarily due to two reasons:
Beyond the mobile app design, I also worked on designing a web-based dashboard tailored for hotels and large-scale property management. Water quality monitoring at this scale presents additional complexities, such as identifying system anomalies and managing emergency responses.
I designed the foundational framework for the web interface, including a building installation overview with interactive elements like a slider for exploring internal system components. Given my four-month timeline, my focus was on structuring the core framework while ensuring adaptability for future refinements.
Throughout this project, I collaborated closely with architects, engineers, and scientists, conducting both primary and secondary research to ensure an informed UX iteration process. I engaged in direct discussions with the research team and project stakeholders to align technical accuracy with usability. If invited to contribute to the next phase of SunWATER+ next year, I would further refine these interfaces and expand upon system feedback mechanisms. This experience deepened my understanding of designing for trust in scientific systems, and I look forward to applying these insights to future UX challenges.