Want to work together?
If you like what you see and want to work together, get in touch!
susirepo@gmail.com
HYDRATION, MORE THAN WATER!
an added feature to the zepp health wellness tracking app
Zepplife app - Hydration tracking feature
Role
UX/UI Designer
Timeline
2 months
Tools
Figma
Spline
Protopie
Spline
Protopie
Project Type
Concept Design
Project Summary
Project Introduction: Developed a hydration tracking feature for Zepplife, a wellness app, addressing user demand for improved water intake monitoring.
Market Gap Identification: Identified a lack of hydration tracking in existing products through user research, revealing a significant opportunity.
User Engagement Focus: Designed to enhance user interaction with a simple interface, providing personalized hydration insights.
Personalized Recommendations: Implemented adaptive hydration goals based on individual health data, activity levels, and personal circumstances.
Comprehensive Tracking: Enabled detailed input of liquid consumption to monitor and analyze hydration status effectively.
Holistic Design Approach: Ensured the solution integrated seamlessly with users’ health routines and the UX/UI of the existing product.
Market Gap Identification: Identified a lack of hydration tracking in existing products through user research, revealing a significant opportunity.
User Engagement Focus: Designed to enhance user interaction with a simple interface, providing personalized hydration insights.
Personalized Recommendations: Implemented adaptive hydration goals based on individual health data, activity levels, and personal circumstances.
Comprehensive Tracking: Enabled detailed input of liquid consumption to monitor and analyze hydration status effectively.
Holistic Design Approach: Ensured the solution integrated seamlessly with users’ health routines and the UX/UI of the existing product.
Jump to Prototype
project background
Zepplife is a wellness and activity tracking app that pairs with external devices like smartwatches to gather data on various health metrics such as sleep duration, step count, stress levels, workouts, caloric burn, and more.
The company aims to leverage its technology to assist users in enhancing their overall health.
Research
Understanding the company and their goals led me to a very important question "What do people want to track that can improve the lifestyle they're looking for?" Thus, I run a survey followed up with rounds of interviews.
Water intake
34%
out of 24 answers
Habits
29%
out of 24 answers
Meditation
12%
out of 24 answers
Mood
8%
out of 24 answers
Survey Results
Lingering questions
Why do people want to track their water intake?
What does people understand by tracking their water intake?
How do people currently track their water intake?
Interview findings
User Pain Points
They start using a water intake app, only to stop not long after.
Many times they forget what they drank or had during the day.
They don’t fill the info in the moment. It feels tedious to do.
Underlaying Problems
Misconceptions about the way hydration works.
Misinformation about the effects of hydration
Life aspects are not taken into consideration
Interview findings
User Pain Points
They start using a water intake app, only to stop not long after.
Many times they forget what they drank or had during the day.
They don’t fill the info in the moment. It feels tedious to do.
Underlaying Problems
Misconceptions about the way hydration works.
Misinformation about the effects of hydration
Life aspects are not taken into consideration
Initial Hypothesis
After siting down with all the research findings and understanding the user needs better, I found 3 principal feature that could provide great experience for Zepplife’s users.
Provide more options other than water
Include other data automation options for frequent input
Inform users of the quality of their hydration habits
Ideation
Understanding the company and their goals led me to a very important question "What do people want to track that can improve the lifestyle they're looking for?" Thus, I run a survey followed up with rounds of interviews.
Low-fidelity draft based on the existing product
I reused icons, and components from the app
Create a hydration feature which does not exist yet.
Used the UX of the other features to translate the aesthetic and experience users are used to
First Iteration
Understanding the company and their goals led me to a very important question "What do people want to track that can improve the lifestyle they're looking for?" Thus, I run a survey followed up with rounds of interviews.
Prototype
Homepage card
Hydration History
Drink selection
Drink Selection Details
-details-1.png)
Pivoting on the concept's focus
After testing other 3 iterations, I realized the big questions were all regarding the purpose of the information presented. Then, I sat back down with a black whiteboard and reconsider the approach, or better said, the focus of the concept.
Quality
Quantity
How does each drink benefiting user’s hydration?
Represent hydration using % and verbal qualification
How much are they drinking?
Represent it in OZ, ML, SML (small-medium -large), and graphic icons
Improve Communication
Hyphothesis: by providing users with an easier to understand feature that communicates the impact of their hydration habits, users will be more inclined to continued to use the feature for longer, change their behavior by know how to improve, and therefore hydrate better.
Homepage
History Page
Adding a drink flow
Prototype
After testing other 3 iterations, I realized the big questions were all regarding the purpose of the information presented. Then, I sat back down with a black whiteboard and reconsider the approach, or better said, the focus of the concept.
Future steps
Next concept & Last version
Based on additional user tests, areas for improvement include:
1. Unifying the two progress bars to clarify their relationship.
2. Designing pop-up windows for daily hydration tips.
3. Highlighting drinks that aren't contributing to proper hydration.
4. Adding a button for users to share changes in health or routine that might affect the daily goal.
Given more time, I would develop reminder settings, monitoring options, and user status modifications.
What I learned
Innovating Within Established Frameworks: How to integrate new features into existing products by closely studying user interactions and interface consistency.
Leveraging User Feedback for Iterative Design: How to implement a structured approach to collect and analyze user feedback, transforming it into actionable insights. And, to focus on engaging with the end-users throughout the design process, ensuring that the final product not only meets user needs.
Transforming Constraints into Opportunities: How to adapt a creative mindset to view project constraints not as barriers but as opportunities for design optimization. This approach led to innovative solutions that addressed user needs in an innovative, interesting, and engaging way.
"I feel proud of my design process for this project because I was diligent in incorporating user insights and feedback. This is what I take away from the project the most. If I hadn't listened to their feedback, pains, and needs, I wouldn't have found that the underlying problem was the start of the solution." -Susi.