Hydrolife
Water Intake Tracking App
More than half of all adults in the United States don’t drink enough water, because they are too busy, forget, or don’t track it. Hydrolife is a mobile application that I designed for one of my UX design courses at Boston College, Innovation Through Design Thinking. This app is designed to track water intake with the use of a smart water bottle still in development, and has other various features such as streaks and socials to encourage positive competition and promote drinking more water to maintain a healthy lifestyle.
March - April 2022
Role: User Researcher, Product Designer
Tools: Figma
Understanding Users
How can we redesign the conventional water bottle to encourage drinking more water? My team conducted 1 to 1 interviews with 8 people total, and conducted various brainstorming sessions to create empathy and ecosystem maps. We tried to diversify our sample age group as much as possible, because we were only limited to 8 interviews, and we wanted to cover as many perspectives as possible. I was in charge of interviewing the college-age demographic, and I decided to interview three of my good friends. Utilizing the responses, I was able to create empathy maps and ecosystem maps to break down the users in a more detailed fashion. Below are images of the maps that we created, alongside the interview questions and responses.
People don’t drink enough water because:
They either forget to bring their bottles
They forget to drink water
Problems
After conducting our research and creating our maps, we found that some pain points as to why people don’t drink enough water include forgetting to bring their water bottle around or forgetting to drink water in the first place. This led us to create a list of ‘How Might We…’ questions to organize our users’ wants and needs to keep in mind during the design process:
How might we remind people bringing their water bottle?
How might we remind people to drink water more frequently?
How might we make people meet their daily benchmark of water?
From these questions and further brainstorming, we decided to make two different products. One would be a smart water bottle capable of tracking the volume of water lost from the bottle, as a function of height. The other product would be a mobile application capable of taking in the data from the water bottle to calculate the amount of water consumed by users. I was in charge of leading the mobile application design, and I identified the following key user stories:
Set the water goal. Users can set their own water quota, which can be changed at any time.
View daily water consumption. Users will be able to track how much water they consumed in one day, and can observe statistics of previous weeks, months, etc.
Keep a streak. By meeting their quota constantly, users are able to build up a streak.
Compete with friends. Streaks serve as rankings on the Hydrolife leaderboards, encouraging friendly competition among friends.
Time to Design!
✍🏻
Time to Design! ✍🏻
Design
Before I started my design, I mocked up different screens for Hydrolife based on my team’s brainstorm results and sketches. The mockup includes a start page, registration, set daily water goal, home screen, leaderboards, and personal page. In the registration page, users have the option to either log in or sign up for an account. Afterwards, they would try to drink the amount of liters they set for their daily goal everyday. In the home screen, a basic summary of the user’s data can be seen. The leaderboards show who among the users connections have the highest streak for meeting their water quota everyday. In the personal page, the user’s personal streak can be seen, alongside other setting features.
After creating this mockup, it was time for me to design and prototype. For the color scheme, I decided to go with soft purple and blue hues, to embody the ‘color’ of water. The images below contain the pages for my first prototype of my app.
After designing my first rough draft of the prototype, I decided to go back and touch up some of the UI of the app. I also created a water log page where users would be able to see the data from their daily logs in more detail, including the ability to view their average liters consumed in terms of days, weeks, months, and years. I created the final clickable prototype using Figma.
Results and Takeaways
I want to thank the directors of the my course Innovation Through Design Thinking for giving me this enjoyable experience to design and gain an understanding of the design process behind hydration. This was my first experience with User Experience Design, and I was extremely blessed to be able to work with such an incredible team. Through this experience, I learned that while the process of converging ideas can be difficult do navigate through, it is ultimately what brings people together at the end of the day. The combination of different ideas, experiences, and cultures is ultimately what makes our product the way it is today, and I could not be more grateful to my team for collaborating with me.
Future Improvements:
To improve this project in the future, I would definitely increase my sample size, as 8 was an extremely limited amount of people to interview. I also believe that the UI of the water bottle app could be better, as my lack in FIgma knowledge created a barricade that I had to overcome in order to make the app look presentable. In addition, I would try to field test the app, as this class limited the design process up to the designing stage. Lastly, I believe that creating an information architecture map would have helped speed up the design of the app as well.