top of page
Animated core task flow for a new water hydration mobile app
Overview
The goal of this interaction design project was to pitch an idea for a new mobile application and demonstrate through animation how users could complete the core task intended for the app. The proposed app was called Hydro Habits and helped users set hydration goals, choose from various types of drinks, and track their water intake. Hydro Habits would also calculate the water content in each drink users consumed, helping them on their way to achieving their hydration goals. The core task was to record drinks to fulfill their set hydration goals.
Tools
-
Figma
-
Adobe AfterEffects
Timeline
-
Discovery: 2 weeks
-
UI + IxD Design: 5 weeks
-
Animation: 3 weeks
-
Overall: 10 weeks
Features
-
Recent drink selections
-
Preset drink values
-
Goal tracking
-
Water content calculation
The Problem
This project was created as part of an Interaction Design class, with the goal of creating an app that helps users stay hydrated and track their daily water intake. The focus was on keeping the core task simple, while adding exciting and meaningful microinteractions. Finding a way to motivate users to track the different drinks they consume in a given day made for an interesting problem to tackle in a project focused on small but meaningful features.
Goals and Objectives
-
Create a quick, simple, and intuitive process for users recording drinks to track their water intake
-
Ensure animation appears smooth and accurately demonstrate how users would complete the core task of the app​
The Process
To better understand what was typical of a water hydration app, I downloaded thirteen different hydration apps from the App Store. Through this analysis, I explored the various user actions, methods of execution, and common visual elements like water glasses, droplets, and bottles. This research helped me outline the necessary steps for users to complete the core task. Once I identified these steps, I transitioned into the design phase.
Steps to complete the core task in a hydration app:
-
Open app
-
Select a drink
-
Input number of ounces consumed
-
View progress towards goal
-
Complete hydration goal​
User persona capturing key needs and existing pain points
UI Design
Through ideation and iteration, I sketched thirty unique ideas to imagine how each screen in the app would appear. The sketches focused on the idea of a water-like aesthetic for the app, introducing variations with water glasses, water droplets, drink icons, bubbles, and curves to simulate waves. I also considered what information was necessary to display on each screen in addition to the placement of this information. Ultimately, I incorporated water glasses, drink, icons, bubbles, and curves into the final design.
1/3
Initial sketches for various screens
Branding
Next, I considered the branding for my mobile app. I chose Fredoka One, which is a rounded font, and bright colors to complement the playful elements in the app. I also included simple icons that would be displayed at the bottom of each screen.
Initial app branding with fonts, colors, and icons
After creating the initial style tile, I realized that my app required additional icons to represent different drinks that users could select. I created the drink icons using the pen tool in Figma, and I implemented additional colors to accompany each drink icon. The colors for each drink differ from the other drink icons, allowing each drink icon to stand out with the color commonly associated with it.
Expanded style tile with drink icons and accompanying additional colors
Sketching Microinteractions
I also sketched 20+ ideas of possible interactions, including the appearance of the screen before a user performs an action and what would happen next, whether it is a certain movement, color change on the screen, or transition to a new screen. Each of these sketches was organized by which part of the users’ process that they fit:
-
Add drink
-
Select a drink
-
Add preset amount
-
Add/subtract ounces (+ or - buttons)
-
Check button (add drink)
-
Check button (goal met)
Sketches of potential microinteractions
Wireframes and Wireflows
Next, I chose the best sketch ideas to develop into wireframes, which were then used to create a wireflow, indicating which elements triggered a transition to a new screen. Starting from the home screen, users could tap the plus button to select a drink on a new page. On the Select Drink screen, users could add a recently selected drink, returning them to the updated home screen, or choose from featured drinks. Selecting a featured drink led to the Add Drink screen, where tapping the check button completed the process. Users would either receive a notification that they met their hydration goal, or they would be returned to the home screen with the updated hydration total and their newly added drink displayed in the 'Today’s Drinks' section.
Wireflow showing which elements trigger transitions to a new screen
IX Flow
I then created high-fidelity designs, which were used to create an IX flow, outlining the triggers, feedback, rules, and possible modes for each possible action that a user could perform that would align with their core task to record drinks to fulfill their hydration goal. The IX flow also determined which actions would be necessary to demonstrate in the animation process. Adding a recent drink and swiping horizontally to select additional drinks were not included in the final animation, but they were included in the IX flow since these actions could be performed and still align with users’ core task.
IX Flow showing rules, triggers, feedback, and modes for each microinteraction
Interaction Guides
The interaction guides provided detailed descriptions of the animations on each screen. I made key decisions during this phase, such as choosing to emphasize the selected preset amount bubble in black text while setting others at 75% opacity with blue text. Additionally, to address distractions caused by floating bubbles, I attached the check button to the central message bubble, ensuring its visibility amid the animation.
Interaction guides for each screen
Animation
The completed designs were then transferred from Figma to Adobe After Effects where the interaction process could be animated. After one week, the core animations were blocked out, but the timing was inconsistent throughout and too fast to see everything that was on a screen. Since the first draft of animations was a long, complex file, it was easier to start with a new file and use the first draft as a reference for which items needed to be animated. I established consistent timing after the second week by keeping a notebook including the frame numbers where elements appeared and disappeared from view and the length of these animations. The second draft also introduced a bubble popping sound effect when the message bubble shrinks to simulate the bubble popping.
The Solution
Minor changes were made before the final animation, focusing on when certain elements animate in relation to others. All of these decisions were made to ensure that users would not have to wait to perform certain actions.
Updates to the final solution:
-
Users could tap on the check mark button before the water glass animation finished
-
Numbers appeared immediately in the glass before the water moved up in the glass on the Add Drink screen
-
Users could select a drink icon without having to wait for the rest of the text on the page to appear
-
When selecting a preset amount, the number in the glass changed before the opacity and color changes of the preset amount bubbles
-
When the text and the drinks appeared on the Select Drink screen, the timing was altered to ensure that the text landed in place when the drink icons had already finished their transition
The Results
​The completed Hydro Habits project demonstrated how users could go about completing a simple task through a simple design. I greatly considered how the water-like aesthetic could aid in users’ interaction with the application. Selecting a drink icon would cause the drink to shake with the liquid shifting accordingly, adding ounces of water would cause the water to fill the glass to a certain amount, and small bubbles floated in a seemingly random formation while a larger bubble popped. This proposed application stood out from other applications due to its intentional use of water-like imagery with natural, accompanying water-like actions. The complex animations ultimately enhanced the users’ experience without complicating how the users would go about performing the actions that aligned with their task to record drinks to fulfill their hydration goals.
Final animation
Explore my other case studies!
bottom of page