Quenched App
Year
Jul 2019 - Jun 2020
Overview
As a UI/UX designer, I collaborated with a client to build Quenched, a mobile app that empowers users to take control of their water intake journey. Our mission was to create a simple, engaging, and accessible experience that encourages users to stay healthy and hydrated.
The initial Quench app, originally named Siren, aimed to motivate users with various features like graphs and a bubble dial. However, user testing revealed information overload and confusion, hindering engagement. Additionally, the color palette didn't meet accessibility standards, limiting the app's reach.
To understand user needs, I utilized the following methods and tools:
Affinity Mapping
User Testing
Wireframing
Figma
Feature Prioritization
WebAIM Color Contrast Tool
MoSCow Method
Research
What I learn from the users
Through user interviews and MoSCow prioritization, I identified key pain points: feature overload, confusing visualizations, and accessibility issues. Guided by these insights, I streamlined the design, simplified visualizations, and implemented a WCAG-compliant color palette.
Key Findings: User Interviews and MoSCoW
High Priority
The original design suffered from having too many features.
The graphs and bubble dial were confusing to the users.
Color contrast didn't align with Website Content Accessibility Guidelines 2.1
Medium Priority
Dark mode was encouraged, but it wasn’t necessary.
The user did not care to see water intake in a bubble.
Low Priority
Achievement for water intakes.
MoSCow Method: (Must have, Should Have, Could Have, Won't Have)
Design and Wireframes
Out with the old.....
Learning from the initial design of the Siren app, and now, the Quench app, I have made some changes based on user interviews, prioritizing features using the MoSCow method. Below are my screens from the Siren App.
Original Siren App Design
In with the new!
The revamped Quenched app boasts a minimalist, intuitive interface. Users can easily track their water intake, adjust cup sizes, and edit past entries. Improved accessibility allows everyone to benefit from the app. (Include screenshots to showcase these changes).
The home screen has a sleek new design that was easier for users to read and use. The user can now edit the cup's measurements (liters, ounces, cups, milliliters) from the home page and the menu. The water capacity is based on user data received from onboarding (Age, Weight, Gender).
Users will also be able to track and edit the water they drink throughout the year. Change can be made by simply clicking on the date you would like to edit and add or decrease the water intake accordingly.
The client was thrilled with the user-friendly, accessible Quenched app. Future iterations will explore Fitbit integration, enhanced branding consistency, and an iOS version.
