Physical and Digital concepts for enhancing Real-Time Water Quality Awareness on University Campuses
ROLE
User Research
Product Design
UI Designer
Usability Testing
TIMELINE
12 weeks, Sept - Dec 2023
TYPE
Student Team Project
TOOLS
Figma

Project Overview

Design a user-experience aimed at increasing awareness and accessibility of real-time water quality information across a university campus. HydroPace addresses the critical issue of water quality on university campuses by developing a real-time water quality awareness system. Recognizing the reliance on water coolers, the project integrates physical and digital elements, providing instantaneous information.

ColLaboration

THE CHALLENGE
Limited awareness about the safety of drinking water!!

goals 🎯

To increase awareness and accessibility of real-time water quality information across a university campus.

Contribute to the overall well-being of students, faculty, and staff by addressing the critical concern of water quality on university campuses

To mitigate potential health risks associated with the consumption of unsafe water.

Let's walk you through  

User Research📚
Interview📋
Persona👩
User Flow🌟
Moodboards🌼
Concept✨
User Research📚
Interview📋
Persona 👩
User Flow🌟
Moodboards🌼
Concept✨
Ideation💡
Sketch✏️
Wireframe💻
UI Design🖌️
Prototype📱
Design System🎨
User Testing📎
Final Product🎉
User Research📚
Interview📋
Persona👩
User Flow🌟
Moodboards🌼
RESEARCH
Our initial research methods include surveys for quantitative insights and user interviews for qualitative depth. We use a structured questionnaire to delve into participants' experiences and concerns. We emphasized a "think out loud" approach. The questions covered water usage, awareness, technology preferences, and app features, ensuring a holistic understanding.
5
Participants
2
Researcher
30
min Interview
01
72 million

Number of people in the US who are affected by water borne diseases.

15,000

Number of students and staff at Pace University.

91 miles

Distance travelled by the water from the reservoirs to the campus.

User Profile

05+

"Access to free, high-quality water on campus is very important to me"
"Information about minerals in water would increase my trust"

What they Say

"Finding water coolers on campus has been a challenge for me"
"The university should  keep us notified about the quality of water routinely"
"I don't usually drink the water from outside or places I don't know about"
Insights From Users
01
Participants highly value water quality, mainly judging it based on taste and clarity.
02
Primary challenges include slow dispensing fountains, health concerns related to water coolers, and navigation issues accessing coolers.
03
Participants usually trust university standards and rely heavily on word-of-mouth for their water needs on campus.

SOLUTIONS

Digital Concept

An interactive web-app provides an efficient cooler location solution, catering to non-regular users seeking real-time water quality information before consumption.

Physical Concept

The concept integrates prominent features, such as physical water cooler indicators, including indicator lights and visual signals, aimed at providing immediate feedback on water quality. The incorporation of crowd-sourced feedback through NFC tags encourages user participation and allows for efficient issue reporting.

IDEATION
In the ideation stage, I will walk you through where innovative concepts take shape, encompassing screen sketches, wireframes, and MVP. This preliminary exploration precedes our transition to the design phase.
02
INITIAL CONCEPT
Water fountain will include water quality status indicator light, feedback button, and NFC tags that link to web-app.
The web-app will show the floor map, which indicate water cooler location and status as well as water quality information educational articles.

WIREFRAME

WIREFRAME

WIREFRAME

WIREFRAMEdio

WIREFRAME

WIREFRAME

WIREFRAME

WIREFRAME

Creative studio

MVP

We created the MVP of physical concept of water cooler by employ a Red/Yellow/Green light indicating the quality of water and state of the cooler, along with mock NFC Tags and repair-me button.

Unassigned tasks targeted 22 incidental participants interacting with the physical prototype on campus.

The test focused on testing the intuitiveness of the physical prototype, observing user behavior towards indicator lights, mock NFC tags, and a mock 'Repair-Me' button. This unstructured task aimed to capture natural user interactions with the physical elements, providing insights into the use of system-status indicators, attempts to access additional information via NFC tags, and attention to physical signage.
03
DESIGN
This section presents the design systems encompassing typography and color schemes, UI components, and a high-fidelity prototype for the HydroPace Web-app and water cooler.
Design
Systems
✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱
✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱
✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱ ✱

Physical Prototype -Water Cooler

The concept integrates prominent features, such as physical water cooler indicators, including indicator lights and visual signals, aimed at providing immediate feedback on water quality. The incorporation of crowd-sourced feedback through NFC tags encourages user participation and allows for efficient issue reporting. Simultaneously, digital water quality information, facilitated by NFC tags and comprehensive data display, offers users detailed insights.
04
USABILITY TESTING
Our team conducted a comprehensive field study at Pace University's 15 Beekman Street, focusing on bustling floors 1, 6, and 9. The primary objective was to evaluate user interactions with both physical and digital prototypes, aiming to assess their effectiveness and user acceptance.
15
Users
4
Tasks
86%
Successful Rate
SUS Score
Key Findings
Design Iteration

WQI

Users expressed confusion about the Water Quality Index (WQI) metric, particularly its scale. Providing an explicit reference point (out of 10) addresses this concern, ensuring users can interpret the metric accurately. This clarification is crucial for users to make informed decisions based on the water quality information.

Feedback Screen

Users identified redundancy in the "Other" field on the feedback page. Removing this repetition streamlines the feedback submission process, reducing user confusion and ensuring a more efficient and clear interaction. This adjustment aims to enhance user satisfaction with the feedback process.

Graph Trend

Users found the graph trends lacking in meaningful interpretation. Incorporating reference lines in red/yellow/green background colors adds context and helps users understand the significance of the data points. This enhancement ensures that the graph becomes a more valuable and comprehensible tool for average users.

Interactive Floor Map

Users overwhelmingly favored the map feature, considering it the highlight of the design concept. Many expressed the expectation that the map would be the initial display upon scanning the Water-fountain signage. Placing the map on the first page instead of nested within a clickable button will ensure users immediately discover the app's most valuable feature.

Final Prototype
download Research paper

NEXT Step

Building on the insights gained from the generative study, usability testing, and field testing, HydroPace's water quality awareness system can undergo targeted refinements to enhance its overall effectiveness.

Incorporate smaller indicator light to avoid glare

Avoid technical terms to convey Water Quality Information

Clearer symbols and additional guidelines for steps to provide feedback about the cooler quality

Preference ofQR codes over NFC tags

Reflection 🎉

🌼 Using Literature Review for Exploration
The literature review served as a crucial foundation for exploring and understanding the area of real-time water quality monitoring on university campuses. It provided valuable insights, best practices, and existing solutions that informed the design and implementation of HydroPace.

☁️ Not everyone has the same level of technological proficiency
The importance of simplicity in app navigation cannot be overstated. Designing user interfaces that are intuitive and easy to navigate is paramount. HydroPace's emphasis on user-centric design and usability testing helped identify areas for improvement in app navigation, ultimately enhancing user experience and accessibility.

☀️ Value of Usability Testing Despite Time Consumption
While usability testing can be time-consuming, the investment is justified by the invaluable insights gained. Conducting usability tests multiple times allowed the HydroPace team to uncover user preferences, pain points, and areas needing refinement. This iterative approach ultimately led to a more polished and user-friendly solution, showcasing the importance of thorough testing and refinement in product development.
THANK YOU
Claudia
UX Design    ✦    Product design    ✦    Graphic design    ✦    digital marketing     ✦    UX Design    ✦    Product design    ✦    Graphic design    ✦    digital marketing
UX Design    ✦    Product design    ✦    Graphic design    ✦    digital marketing     ✦    UX Design    ✦    Product design    ✦    Graphic design    ✦    digital marketing