FOXO Project
Water Intake Check-in
Making daily water tracking simpler, one tap at a time.
Designing a quick, intuitive way for FOXO members to log their water intake and see their daily progress.
01 / Overview
01 / Overview
Role
Role
Product Design Intern
Product Design Intern
Timeline
Timeline
2 weeks
2 weeks
Team
Team
Solo Product Designer
Solo Product Designer
Platform
Platform
Mobile
Mobile
Water intake was one of the daily health check-ins members needed to complete on FOXO.
I worked on simplifying the logging interaction so members could record their water intake quickly and understand how much they had consumed throughout the day.
Water intake was one of the daily health check-ins members needed to complete on FOXO.
I worked on simplifying the logging interaction so members could record their water intake quickly and understand how much they had consumed throughout the day.
02 / the problem
02 / the problem
How might we make logging water intake quick and effortless enough to fit into a member's daily routine?
How might we make logging water intake quick and effortless enough to fit into a member's daily routine?
Water tracking is a repeated daily task. The interaction needed to make logging straightforward while clearly communicating how much water members had consumed and how far they were from their daily target.
Water tracking is a repeated daily task. The interaction needed to make logging straightforward while clearly communicating how much water members had consumed and how far they were from their daily target.
03 / pattern exploration & Key Insights
03 / pattern exploration & Key Insights
Realised how some inputs take time, effort & recall.
Decided to use a widely known pattern
I explored existing mobile interfaces to understand how water tracking could communicate quantity, progress and interaction with minimal effort.
I explored existing mobile interfaces to understand how water tracking could communicate quantity, progress and interaction with minimal effort.
The focus was on finding a visual approach that made each logging action easy to understand while keeping the daily check-in lightweight.
The focus was on finding a visual approach that made each logging action easy to understand while keeping the daily check-in lightweight.
04 / Design Goals
04 / Design Goals
01 — Reduce effort
Make adding water a quick, simple interaction.
02 — Communicate quanity
Help members understand how much they've logged.
03 — Show progress
Make movement toward the daily target easy to recognise.
04 — Confirm each action
Provide immediate visual feedback after logging.
01 — Reduce effort
Make adding water a quick, simple interaction.
02 — Communicate quanity
Help members understand how much they've logged.
03 — Show progress
Make movement toward the daily target easy to recognise.
04 — Confirm each action
Provide immediate visual feedback after logging.
05 / Design Exploration
05 / Design Exploration
Exploring a more visual way to track water
Exploring a more visual way to track water
I explored different ways to represent water intake, looking for an interaction that felt more tangible than entering a number.
The glass-based concept offered a familiar visual representation of quantity and progress.
I explored different ways to represent water intake, looking for an interaction that felt more tangible than entering a number.
The glass-based concept offered a familiar visual representation of quantity and progress.
Turning logging into a simple interaction
Turning logging into a simple interaction
I explored a glass-based interaction where each selection represented a defined amount of water.
The goal was to reduce repeated manual input while keeping the quantity recorded by each action clear.
I explored a glass-based interaction where each selection represented a defined amount of water.
The goal was to reduce repeated manual input while keeping the quantity recorded by each action clear.
Making progress visible as members log water
Making progress visible as members log water
I explored how the tracker should respond as members add water, including the transition between filled and unfilled glasses.
The interaction needed to make each update clear without requiring members to interpret a separate numerical summary alone.
I explored how the tracker should respond as members add water, including the transition between filled and unfilled glasses.
The interaction needed to make each update clear without requiring members to interpret a separate numerical summary alone.
Allowing users to tap individual glasses could add unnecessary steps, increase logging time, and make the interaction less intuitive.
Allowing users to tap individual glasses could add unnecessary steps, increase logging time, and make the interaction less intuitive.
A linear selection pattern where selecting any glass automatically selects all preceding glasses. The same logic applies in reverse when deselecting a glass, keeping the interaction consistent and intuitive.
A linear selection pattern where selecting any glass automatically selects all preceding glasses. The same logic applies in reverse when deselecting a glass, keeping the interaction consistent and intuitive.
Selection state iterations: To provide a clear visual feedback on a dark mode app design.
Selection state iterations: To provide a clear visual feedback on a dark mode app design.
06 / Final solution
06 / Final solution
The final design uses a glass-based tracker to make water logging more visual and straightforward.
Members add water through individual glass selections, with each glass representing a defined quantity. As they log their intake, the tracker updates to show their progress toward the daily target.
The interaction also supports correcting an entry by tapping a filled glass, allowing members to adjust their logged intake when needed.
The final design uses a glass-based tracker to make water logging more visual and straightforward.
Members add water through individual glass selections, with each glass representing a defined quantity. As they log their intake, the tracker updates to show their progress toward the daily target.
The interaction also supports correcting an entry by tapping a filled glass, allowing members to adjust their logged intake when needed.
HOW IT WORKS:-
HOW IT WORKS:-
01 — View the tracker
Members see their current water-intake progress.
02 — Log water
They select a glass to add its associated quantity.
03 — See progress update
The tracker reflects the newly logged amount.
04 — Correct when needed
Members can tap a filled glass to subtract its quantity, if they need to adjust their entry.
Designed to align with other check-in cards and maintain a consistent visual hierarchy.
Designed to align with other check-in cards and maintain a consistent visual hierarchy.
These check-ins later transitioned to a full-screen experience, retaining the same visual design for consistency.
These check-ins later transitioned to a full-screen experience, retaining the same visual design for consistency.
01 — View the tracker
Members see their current water-intake progress.
02 — Log water
They select a glass to add its associated quantity.
03 — See progress update
The tracker reflects the newly logged amount.
04 — Correct when needed
Members can tap a filled glass to subtract its quantity, if they need to adjust their entry.
07 / prototype
07 / prototype
08 / Reflection
08 / Reflection
This project reinforced how much a small interaction can influence the experience of a repeated task.
The challenge was to make logging feel effortless while keeping the quantity and progress clear. Exploring different visual states helped me think beyond the default screen and consider how the interaction would behave as members logged or corrected their intake.
This project reinforced how much a small interaction can influence the experience of a repeated task.
The challenge was to make logging feel effortless while keeping the quantity and progress clear. Exploring different visual states helped me think beyond the default screen and consider how the interaction would behave as members logged or corrected their intake.