Design Process
Our design process followed an iterative, user-centered approach, refining our prototype through multiple stages based on research, feedback, and usability testing. We started with low-fidelity wireframes to establish core functionalities and navigation. From there, we transitioned to mid-fidelity designs, improving layout, structure, and interactions. Finally, our high-fidelity prototype focused on polishing the UI, adding detailed visuals, and ensuring a seamless user experience. Throughout the process, we incorporated user insights and usability evaluations to create an intuitive and effective hydration-tracking solution for UCI students.
Low-Fidelity Prototype
In our low-fidelity designs, we explored key concepts that formed the foundation of our high-fidelity prototype. The primary features consistently included a hydration tracker, a campus water fountain map, and a user insights section to help students monitor their water intake.
One of the most significant design decisions was linking the fountain discovery feature with the fountain review system, allowing users to not only locate water sources but also assess their quality based on reviews. This integration helped refine our task analysis, ensuring that users could easily find and evaluate refill stations on campus.
These early sketches also helped us establish the core layout and navigation structure, such as how users would log their water intake and how progress would be visually represented through an interactive hydration tracker. By testing these low-fidelity wireframes, we identified areas needing refinement, such as clarifying icon functionality and improving the visibility of key features before moving to mid-fidelity designs.
Mid-Fidelity Prototype
High-Fidelity Prototype
I'm a paragraph. Click here to add your own text and edit me.
Water Tracker
In our high-fidelity prototype, we refined the water tracker UI to enhance clarity and engagement. The hydration progress is now visually represented with a dynamic circular progress bar that fills up as users log their water intake. We also improved the water droplet animation, making it more interactive to encourage consistent tracking. The log water feature now includes a pop-up slider, allowing users to adjust their intake before confirming, streamlining the logging process. These refinements ensure a seamless and engaging user experience while keeping the interface intuitive and easy to use.
Hydration Insights
For the high-fidelity version of the Hydration Insights page, we refined the visual hierarchy to improve readability and user engagement. The updated design includes a weekly completion tracker, a dynamic bar chart for daily intake, and key hydration statistics, such as weekly goal progress and average intake comparisons. We also introduced clearer goal indicators and personalized insights, helping users understand their hydration patterns more effectively. These changes ensure that users receive actionable feedback while maintaining a visually appealing and intuitive interface.
Campus Water Fountain Map
In the high-fidelity version of the campus water fountain map, we enhanced usability by making the map interface clearer and more interactive. Users can now tap on a water fountain marker to view detailed information, including ratings and walking time. A new route feature helps users navigate to their chosen fountain efficiently. Additionally, we refined the UI layout and color contrast to improve visibility and ensure users can quickly locate and assess water fountains on campus. These updates make the feature more practical for students looking for reliable hydration sources.
Fountain Reviews
The fountain review page has been refined to provide clear and comprehensive details about each water fountain on campus. In this high-fidelity update, we improved the layout and visual hierarchy, ensuring that key metrics like temperature, pH levels, and available features (e.g., Brita filter, motion sensors) are immediately visible. High-resolution images have been added to give users a real-world preview of the fountains. The review section remains accessible, allowing users to rate and share their experiences, ensuring transparency and helping others find the best water sources on campus.
Personalized Hydration Setup
Welcome Page
Information Setup
Calculation Animation
Goal Calculation
User Onboarding Experience
The onboarding process in DRIP Hydration Tracker is designed to be intuitive and engaging, guiding users through personalized hydration goal setup. The welcome screen introduces the app’s purpose, emphasizing water intake tracking and fountain discovery. Users provide essential details such as age, weight, and activity level, which the app uses to calculate a tailored hydration goal. A short animation reinforces the benefits of staying hydrated. This seamless flow ensures that users feel informed and motivated from the very beginning.
Profile Settings & Customization
The Profile Settings section allows users to manage key aspects of their hydration journey. Users can update their personal information, hydration goals, and preferences. The settings also include reminders for water intake, adjustable based on wake-up and bedtime schedules. Additionally, integration with Apple Health ensures seamless tracking. The achievements system encourages consistency, rewarding users for meeting daily and long-term hydration goals.