Designed and prototyped a mobile app using Figma to improve user hydration habits. Conducted user interviews, created wireframes and high-fidelity UI, and implemented usability testing to iterate on key features.
HydroFit is a hydration monitoring application designed to help individuals improve their water intake through personalized goals, smart tracking, and integration with wearable devices. Through a well-structured process of research, prototyping, and usability testing, engagement was enhanced by 40%.
HydroFit is a hydration monitoring application designed to help individuals improve their water intake through personalized goals, smart tracking, and integration with wearable devices.
- Category: UX Case Study
- Timeline: 4 months
- Tools Used: Figma, Python, Adobe Suite, Zoom, Google Sheets
- Role: Researcher, Designer, Evaluator
This project involved Lo-fi and Medium-fi prototyping, usability testing, ethnography, interviews, journey mapping, task descriptions, and heuristic evaluations.
Background
- Problem: Dehydration can lead to cognitive impairment and various health issues. Current apps lack personalization, are overly complex, and do not effectively integrate with wearables.
Solution: Developing a user-friendly app that integrates personalized hydration tracking, customizable reminders, and effective data visualization.
Research & Discovery
Research Methods:
- Ethnography & Semi-Structured Interviews (Conducted on existing apps to identify pain points and desired features).
- Participants: 4 individuals aged 19–21 with active lifestyles.
- Purpose: Understand user behaviors, motivations, and pain points to inform design decisions.
Key Findings:
- Existing apps were overly complicated and lacked personalized notifications.
- Logging beverages other than water was restricted by premium paywalls.
- Users desired customizable notifications and integration with wearables.
Personas & Journey Mapping
Personas:
- Primary User: Alex Johnson
Quote: “How can I make the most out of my day?”
Description: Alex Johnson is a 20-year-old male student pursuing a full-time education at a local university while also juggling part-time responsibilities at a library. He is a dedicated individual who maintains a moderate to active lifestyle, striving for excellence in both his academic pursuits and work commitments. Residing in a tropical climate, Alex encounters varied weather conditions, experiencing hot and humid summers, and dry, cold winters.
Alex is known for his responsible and goal-oriented nature. He leverages technology effectively in his routine, showcasing an organized approach to managing his busy schedule. Health-conscious, he understands the importance of proper hydration and seeks ways to integrate it seamlessly into his routine. Respectful and conscientious, Alex values maintaining a calm and serene environment.. He demonstrates adaptability, effortlessly adjusting to changing environmental circumstances.
Goals:
- “I aim to excel in my studies while balancing my work responsibilities.”
- “Staying healthy and maintaining proper nutrition is a priority for me.”
- “I want to continue managing my time efficiently to make the most of my day
Journey Maps:
- Tasks include:
Task Descriptions
- Documented various user tasks like setting goals, logging beverages, and creating reminders.
- Tasks were inspired by insights from ethnography and interviews.
Brainstorming & Ideation
After gathering insights from user research, we moved on to a iterative brainstorming session where we started three to four sketches of interface design ideas to final integration.
Brainstorming Process
Brainstorming & Ideation
- Categories Identified:
- Health Data Setup
- Hydration Tracking Process
- Hydration Goal Display
- Notification Management
- Notification Display
- Affinity Diagramming:
- We categorized the sketches and combined the best components from each design, consolidating them into three key areas:
- Setup Process (How users input initial health data and preferences)
- Notifications & Alerts (Customizing reminders for hydration)
- We categorized the sketches and combined the best components from each design, consolidating them into three key areas:
Hydration Tracking (Logging drinks and tracking daily progress)
Brainstorming & Ideation
- Key Decisions Made During Brainstorming:
- Incorporating visual elements like containers to track hydration progress.
- Allowing users to customize their goals and notification settings.
- Ensuring compatibility with wearables and various beverage types.
- Challenges Faced:
- Lack of clarity about priority features during the initial sketching phase.
- Overlapping categories and redundant ideas were streamlined using affinity diagramming.
- Outcome:
Developed a cohesive set of design requirements and sketches that informed the creation of the Lo-fi Prototype.
Wireframing & Prototyping
- The sketches created during the brainstorming phase were translated intos storyboard and Lo-fi wireframe which were then refined into the Medium-fi prototype.
- Wireframes demonstrated key functionalities such as goal setting, beverage logging, and notification management.
- Prototype iterations were informed by findings from heuristic evaluation and user testing.
Prototyping & Design
Storyboard:
(Heuristic Evaluation Conducted)
- Basic sketches focusing on user flow, task completion, and interface layout.
- Heuristic Evaluation: Identified issues with usability, complexity, and clarity.
- Improvements Suggested: Adding feedback mechanisms, simplifying interface, enhancing accessibility.
Medium-fi Prototype: Embed video : https://youtu.be/wBpgQr8Qv80
(Interviews & Ethnographic Studies Conducted)
- Enhanced visuals, improved navigation, added feedback mechanisms.
- Built with insights from Lo-fi prototype evaluation.
Figma Link: HydroFit Prototype
Evaluation & Testing
Heuristic Evaluation (Conducted on Lo-fi Prototype):
The aggregated results of our heuristic evaluation.
- Focused on usability issues and accessibility.
- Major problems included unclear icons, complex navigation, lack of feedback.
Usability Testing (Conducted on Medium-fi Prototype):
- Methods: Remote usability testing, think-aloud protocol, semi-structured interviews.
- Participants: 4 individuals with diverse needs and routines.
- Tasks: Setup process, logging beverages, customizing reminders.
Quantitative Data:
- Satisfaction Score: 4.5/5
- Median Completion Time: 92.5 seconds
- Average Errors: 2.75
Qualitative Data (Thematic Coding):
- Simplicity: Users appreciated clear visuals and straightforward logging.
- Flexibility: Desire for more beverage options and customized notifications.
- Integration: Interest in wearable compatibility.
Results & Takeaways
- What Worked Well: Simple interface, fast setup, and effective notification system.
- Areas for Improvement: Limited beverage options, better notification customization, lack of integration with wearables.
Feedback Addressed: Improved icon clarity, streamlined notification settings, expanded beverage options.
Future Work
- Enhance compatibility with wearable devices.
- Expand beverage options for better accuracy.
- Implement high-fidelity prototype and conduct further usability testing.
Conclusion
HydroFit provides an effective, user-friendly interface for hydration tracking. The iterative design process highlighted the importance of personalization, usability, and integration. Feedback from usability testing will guide future improvements.