Hydro

A water drinking app that helps you stay hydrated

OVERVIEW

In our fast-paced world, where individuals are often preoccupied with school, work, and social life, health concerns are often overlooked or underestimated. It is easy to neglect habits as simple as actually drinking enough water.

Problem

According to SWNS digital, due to busyness, forgetfulness and other factors, more than 70% of Americans do not drink enough water everyday.

Challenges

Identify the sufficient amount of daily water intake

Understand why people are not drinking enough water

My Role

UI UX Design, User Research, User Testing, Prototype, Branding

RESEARCH

Survey + Interview

To better grasp user needs and pain points, I conducted surveys, interviews and analyzed the following insights.

Key Insights

Uncertainty about daily water consumption is common among many people
Participants often consume other hydrating beverages besides water
Many individuals only drink water when feeling thirsty, during exercise, or based on health recommendations

Additional Information

Furthermore, I did some additional research to understand the appropriate daily water intake for customizing experience. The most common factors influencing one’s daily water intake are,

Common Factors Influencing Water Intakes

Average Amount to Consume

According to UM System, a rule of thumb is to at least drink the amount in ounces equivalent to half of one's body weight in pounds.

DEFINING

HMW

How might we help people stay hydrated throughout the day?

Persona

By defining a persona, I was able to focus on the user goals and pain points.

Lizzie, a social college student working part-time at a cosmetic shop, aims to improve her skin and body shape naturally by incorporating more water into her routine.

Goals

Drink more water everyday
Improve skin condition
Achieve a healthier body shape

Frustrations

Forgets when not thirsty
Skin always seems dry
Does not like the taste of water

"Drinking more water is challenging, but I'm determined to make it a habit for better skin and body figure."

Competitor Analysis

After defining the persona, I realized the need to understand how to help users stay hydrated, so I analyzed potential competitors. While there are many water reminder apps, most are either fun to use with interesting graphics but may lack specific features or vice versa.

Potential Advantages

Intuitive UI and quick beverage entering
Customization for drinks, reminders and images
Dark mode to accommodate more users

OPPORTUNITY

What if we can encourage people to drink water with reminders and records throughout the day?

IDEATE

To begin, I first generated a few task flows and low-fidelity wireframes.

Task Flows

Wireframe Testings

By testing with potential users, I was able to iterate and improve the functionalities and usabilities.

Home Page: Users Can Easily Record Drinking Amount

Reminder Page: User Engaging Empty State

New Reminder Page: Users Can Set Reminders to Help Stay Hydrated

FINAL DESIGN

The final mockups were designed with the focus of enhancing user experience and encouraging users to stay hydrated.

Home Page

Clear hydrating progress during the day
Quick Enter to record the most frequently used beverage and amount
Customize various drinks and amounts to record (Since the purpose of the app is to help stay hydrated, the options are limited to the beverages that are considered hydrating and healthy)
Easily track hydrating history of each day, week and month

Reminder Page

Toggles to quickly turn on/off reminders
Easily set reminders to be notified at a specific time or during selected hours
Customize reminders with repetition and alert to stay hydrated

Dark Mode

Provide dark mode to accommodate various user needs and preferences
Adjusted colors in dark mode to enhance overall accessibility

View Prototype

Style Guide

The visual design was developed by iterating color palettes, fonts and the UI kits, which helped create the style guide.

CONCLUSIONS

By designing the water drinking app, I not only grasped a better understanding of UX design process, but also raised my awareness on the health benefits of drinking water. Since exercising affects water intake, I may also design a smartwatch version of the app, where users can easily record or be reminded anywhere, anytime.

🧠 Learnings

User testing is crucial for better UX design. Even when some features might make sense to the designer, the functionality might not be as intuitive to users.
Looking back, I could focus more on understanding why people are not drinking enough water everyday.
Although it may take more time and resources, it is usually helpful to design different versions to compare for the best possible solution.