Interaction Design for a Hydration App
- Gianna M
- Dec 10, 2021
- 3 min read
Hydro Habits is a concept for a mobile app that helps users set hydration goals, choose from various types of drinks, and track their water intake, calculating the water content in each drink along the way. The core task is simple: record a drink to make progress toward a hydration goal. The design challenge was making that task feel natural and alive through microinteractions.
Keep reading to learn about my process for creating this video.
Research
To understand what already existed, I downloaded thirteen hydration apps from the App Store and explored the various user actions, methods of execution, and common visual elements across them. This research helped me outline the steps a user would need to complete the core task and identify where microinteractions could add the most meaning.
Sketching the UI
I sketched thirty unique ideas for how each screen might look, exploring variations with water glasses, drink icons, bubbles, and curves to simulate waves. The goal was to find a visual language that not only looked like water, but felt like it.
Branding
I chose Fredoka One, a rounded font, and bright colors to complement the playful water aesthetic. I also created custom drink icons using the pen tool in Figma, each with its own distinct color associated with the drink it represented.
Sketching Microinteractions
With the screens taking shape, I sketched 20+ microinteraction ideas, mapping out what each screen looked like before and after a user action, whether that meant a movement, a color change, or a transition. Each sketch was tied to a specific step in the core task flow.
Wireframes & Wireflow
I developed the strongest sketch ideas into wireframes and mapped them into a wireflow, tracing which elements triggered transitions between screens from start to finish.
IX Flow & Interaction Guides
From high-fidelity designs, I built an IX flow outlining the triggers, feedback, rules, and modes for every possible user action within the core task. The interaction guides then detailed exactly how each animation would behave, including decisions like keeping the check button attached to the central message bubble so it stayed visible while the bubbles floated around it.
Animation
The completed designs moved from Figma into Adobe After Effects. After the first week, the core animations were blocked out, but the timing was inconsistent and too fast to follow. Since that first draft had become a long, complex file, I started fresh and used it as a reference rather than trying to fix it. In the second week, I kept a notebook tracking the frame numbers where elements appeared and disappeared and the duration of each animation, which finally gave me consistent timing throughout. The second draft also introduced a bubble popping sound effect when the message bubble shrinks, reinforcing the water-like feel.
Before finalizing, I made a few small but important adjustments: users could tap the checkmark before the water glass animation finished, numbers appeared in the glass immediately rather than waiting for the water to rise, and drink icons became selectable before the rest of the screen finished loading. Each of these changes came down to the same principle: users shouldn't have to wait on the app.
Closing Thoughts
This project taught me that motion design works best when it feels like the product, not a layer on top of it. Selecting a drink icon causes it to shake with the liquid shifting accordingly, adding ounces fills the glass to the right level, and small bubbles float while a larger one pops. These actions not only provide feedback that a user clicked on something that triggered a visual change, but they add delight to the user experience.
Comments