• My H2O


    A hydration app that helps users plan and keep track of their water intake.

  • Process


    1 - Empathize
    2 - Ideation
    3 - Testing
    4 - Design
    5 - Reflection

  • Role / Duration


    UX/UI Design
    Prototype

    8 weeks

  • Overview


    Study shows that roughly 75% of Americans are chronically dehydrated. This project is creating a hydration app for mobile phones. The app's main goal is to assist and encourage people in drinking more water to avoid dehydration. It calculates the right amount of water for each individual by considering factors like their weight, activity level, and the local weather. It then sends them reminders at different times to drink water during the day. This helps people monitor their daily water intake and maintain good health. My H2O prioritizes the user's needs, ensuring they become healthier and feel well.

  • Problem


    People have the tendency to forget to drink water regularly    . The busy pace of daily tasks, coupled with various distractions, often leads people to overlook their hydration needs. This forgetfulness can result in a significant gap between adequate fluid intake and the water individuals actually consume, increasing dehydration-related health issues.

  • Solution


    Personalized Hydration Plan: The app collects user data such as weight, physical activity levels, and climate to create custom water intake goals.

    Smart Notification System: The app offers a customizable notification system which strategically prompts users to drink water at optimal intervals by frequency and time of day.

    Hydration Tracking and Goal Setting: Users can easily monitor their daily water intake and create flexible hydration goals based on their preferences.

EMPATHIZE

How Might We

I want to really understand how people drink water and what they need. The "how might we" process is about figuring out how to make the best app for everyone. By putting myself in their shoes, I aim to make an app that fits their lives, making it easy and personalized to stay hydrated. I came up with several questions to help guide the direction of the design.

Motivate users to drink more water throughout the day through the app?
Use personalized data to set achievable hydration goals for each user?
Make it easier for users to track their daily water intake on the hydration app?
Personalize our app to meet each user's specific hydration requirements?
Keep it simple to remind users to drink water regularly through the app?
Remind users to drink water at optimal times to stay hydrated?
Provide users with helpful tips and info about hydration for better health?
Consider climate and location for more accurate hydration recommendations?
Create a user-friendly interface that encourages engagement?
Consider different amounts of water such as cups, mugs, and bottles?
Design a rewards system to incentivize users to meet their hydration goals?
Gamify hydration challenges to encourage users to drink water?

User Stories

These stories show that a lot of different people are interested in a hydration app. Some want reminders to drink water, some want to track how much they drink during exercise, others have specific health goals, and some are new to keeping track of their water intake. These requests highlight that the app needs to be versatile and meet the needs of various users.

User Story 1 - The Busy Professional

As a busy professional, I want to have timely reminders to drink water during my workday, so I can stay focused and energized, without needing to constantly think about it.

User Story 3 - The Health Tracker

As someone managing a health condition, I want to be able to input specific hydration goals to help me maintain optimal health.

User Story 2 - The Fitness Enthusiast

As a fitness enthusiast, I want to track my water intake so I can ensure I'm properly hydrating during workouts and recovery periods.

User Story 4 - The Water Intake Novice

As someone new to tracking water intake, I want the hydration app to be easy to follow and have tips on staying hydrated to help me develop better habits.

IDEATION

User Flow

There are 4 major sections to guide users: Home, Reminders, History, and Settings.

The goal is to make it easier for users to move between different sections and have a smooth and friendly experience.

The majority of the information can be found directly on the home screen for all-around access.

Crazy Eights

I started the design process with crazy eights to quickly generate ideas that involved key features such as reminders, water intake tracking, and goals.

Low-Fidelity Prototype

I used some frames from the crazy eights and created a draft. This allowed quick iteration and feedback. These basic designs let me see which features were working and which ones didn’t. I created the home/main, reminder, goal calculator, quick-add, history, and settings page.

TESTING

Moderated Usability Test

In order to improve the user experience of My H2O, I conducted a moderated usability test with a group of five testers. This approach allowed me to gather valuable feedback and insights on the app's functionality and user interface, helping identify potential pain points and areas for improvement. The test results helped make the app more intuitive and user-friendly, ensuring that staying hydrated becomes a consistent and enjoyable experience for users.

DESIGN

UI Iterations

Creating multiple iterations was important during the development process. These iterations involved refining and enhancing the app's features, user interface, and functionality based on user feedback. Throughout the entirety of this project I created 3 iterations.

Iteration #1
Iteration #2

Hi-Fidelity Screens

After finalizing the design choices, which encompassed layout, color schemes, typography, functionality, and various iterations, I solidified the vision for the product with these attractive and detailed designs. The process of crafting high-fidelity screens provided me with valuable insights and the opportunity to refine aspects of the design that weren't readily apparent during the wireframing phase. I also made continuous adjustments within the screens to enhance the overall user experience and ensure a clear representation of the final product.

Here are the key features.

Iteration #3

Quick-Add

The home screen features a “+” button to quickly add water where each option is customizable located in the settings.

Reminders

Users can easily create reminders in seconds with drop-down options.

History

A personal water log that keeps track of every sip taken for any reason.

Calculator

An integrated hydration calculator personalized for users to set goals.

Key Insights

Customization is key.

Users have specific requirements that need to be met for their individual needs. It was crucial to offer customization options that can cater to a wide range of users.

Less is more.

Taking a minimalistic approach reduces clutter, improves usability, and results in a visually appealing and user-friendly experience.

Consistency matters.

Consistency makes the app easy to use and enjoyable for users by using the same look-and-feel, simple navigation systems, and having smooth interactions.

Component and Style Guide

REFLECTION

Designing for social good has been a fulfilling and challenging experience. I realize the immense impact that design can have in creating positive change and addressing real-world issues.

I’ve learned to approach my projects with a “people first” mentality. By empathizing with users’ challenges and needs, I have been able to design solutions that resonate with their lives. This project has taught me to be adaptable and flexible. It has encouraged me to iterate and polish my designs as things continually change.

Lastly, I feel as though I feel a stronger sense of responsibility as a designer. With my growing skills and knowledge, I have the potential to contribute positively and make a difference. I’m motivated to seek out opportunities with a social impact. I look forward to continue this path, using my skills to make meaningful changes in the world.

End.