Hydration Daily
A water intake app
ROLE
Research and UX/UI
Timeline
July 2023 - August 2023
PROJECT TYPE
End-to-end mobile app
App Design
Water intake/tracking app
Hydration Daily
UX/UI Case Study
Solution
Employing the design thinking methodology's 5 stages—empathize, define, ideate, prototype, and test—I successfully crafted a fully functional app featuring a rewards system, hydration level, and accessibility mode. With a little AI assistance, users can now view their overall hydration level based on their daily logs and drink preferences.
Problem Statement
We want to make drinking water easier and simpler to remember. Remembering to drink enough water can be challenging, primarily if you're not motivated enough.
Project Overview
Hydration Daily is a simple and functional mobile application that aims to help people develop a habit of drinking water regularly. The app addresses the common issue of dehydration and its impact on an individual's overall health and well-being.
Main Features
| Daily logging and Hydration level
| Rewards system to keep drinker motivated
| Add any choice of drink
| High/ low contrast mode for accessibility
My Role
I conducted initial user research and created low-fi wireframes, followed by functional hi-fi, and also evaluated my designs through usability tests before designing them.
Design Process
The assumption - that users have difficulties with drinking the required amount of water and require a reminder app to help with dehydration - was correct 🎉🎉🎉
It’s a challenge to stay hydrated and drink the targeted amount of water when busy with work and stuff.
Most of the informants rely on thirst cues.
Usually, participants drink water for general health benefits or to prevent dehydration.
Most participants had different sources of hydration (detox water, coffee, tea).
Key Insights
Preparation
In order to stay organized and keep track of all sessions, I used Notion
Main Questions I asked
What problems do you face when trying to stay hydrated?
Why do you want to stay hydrated? (health, skin, active etc)
What are your main sources of hydration?
How do you stay motivated to drink more water?
User Interviews
To develop a rich understanding of their water drinking habits and problems, I conducted user interviews with 4 users, 45 minutes each.
Style
Moderated
Number
4 people
Duration
40 minutes
Interview type
1:1 interviews
Survey
I asked 7 people about their basic water drinking habits and observed if people really have difficulties with drinking the required amount of water every day to reach their hydration goals, and here are the results…
01 Empathize
Meet Ahmed
For each user group that I’ve discovered, I developed a persona. See the example of one representative of the group
02 Define
User Flow
Once I had a clear idea of our users and their needs, I was able to ideate on a final user flow.
The goal was to motivate the users with a rewards system and a hydration level, with gentle reminders to drink water. To keep it short and sweet 🙌🏻
Brainstorm Session
I spent hours brainstorming and researching, coming up with ideas for how to solve the motivation problem.
✨ Finally, I came up with the idea of a hydration level and a reward system ✨
Competitor Analysis
To evaluate the market and get more accurate ideas at the ideation stage of the design-thinking process, I conducted a competitor analysis
03 Ideate
I created low-fi wireframes, followed by hi-fi with Figma so that I could test out my idea.
04 Prototype
📈 Performance rate improvement
I was very interested to see whether the changes have improved an app's usability. Therefore, using the Useberry tool with 5 participants, I conducted quantitative testing before and after improvements. And the results were amazing! 🎉🎉🎉
Performance improved by 40%
🌟 Main Usability Issues 🌟
The following changes are a few of the things that we applied based on the testing feedback
USABILITY ISSUE 1
“Where do I add my drink?”
Users couldn’t find the option to add a drink of their choice manually.
USABILITY ISSUE 2
“I don’t know what current level or award I am on”
Users couldn’t determine their level from the home screen directly.
The goal was to motivate the users with a rewards system and a hydration level, with gentle reminders to drink water. To keep it short and sweet 🙌🏻
Main Tasks we asked to complete
Get started on the app
Change your reminder time
View your award-level
View your hydration level
Turn on high contrast mode
To see how people interact with wireframes and whether the product idea meets their expectations, I conducted several iterations of usability testing.
| STYLE: MODERATED
05 Usability Testing
Mood quiz
⚠️ User Problem
Users suffer from demotivation as they have different sources of hydration.
✅ Solution
A rewards system to keep users motivated, a hydration level for keeping track of overall hydration, and manually entering their drink of choice.
06 Final Results
07 Hi-fi Prototypes
(Please wait while it loads)
I’ve noticed that it’s better to avoid different UI implementations on the hi-fi wireframes stage since users were distracted and continued giving feedback more on the app's look and feel rather than usability issues.
Takeaway
I’ve successfully created an app that solves the central problem of ‘staying hydrated’. I got a lot of positive feedback about an idea and app. Moreover, I’ve improved the usability by 40%. However, I can’t tell exactly if the hydration level will resonate with the user’s overall hydration status, so it would be nice to revisit the project in the future and test that out.
Outcome
08 Reflection