Flow is a gamified smart bottle that helps desk professionals and students develop healthier hydration habits that last. While traditional solutions require manual logging and flood you with notifications, Flow automatically tracks your intake and uses positive reinforcement to make hydration intuitive and rewarding.
I began by researching the issues people faced due to dehydration and why many people struggled to maintain the habit.- Studies indicate that even mild dehydration can impair cognitive functions like memory, attention and mood(Armstrong et al., 2012).
- About 70% of lifestyle app users churn within the first 2 weeks, with complaints about rigid tracking, lack of personalization, and notification fatigue. This suggests that many hydration or wellness apps fail to adapt to the user’s daily routines and expectations.
- Behavioral psychology studies show that habits form more effectively when tied to existing routines or environmental triggers. This highlights the importance of embedding hydration reminders into moments that naturally occur throughout the day.
Existing hydration or wellness apps offer basic tracking and reminder features, but often lack customizability, users are unable to change the timer settings to their liking and can only choose the default options. The personalization is also limited to a few options, offering more lighting features and app covers through a subscription. The process of manually logging your intake can be tedious and is no different than keeping a journal of the water you drink.
As someone who's skipped drinking water for hours while working, I was curious if others faced similar challenges. I enquired more by conducting interviews with 15 participants, both students and desk professionals, to learn about their current hydration habits.
These were the key findings:
- 80% of participants had tried alarms or apps to track water intake but abandoned them, stating that the logging was tedious and constant notifications became fatiguing or easy to ignore. (Urkin & Bar-David, 2015)
- 46% of participants reported they only noticed thirst after symptoms like headaches or brain fog set in. (Johnson et al., 2022)
- Nearly half opted for coffee/soda for convenience and energy, despite knowing it could increase dehydration. People don't need more reminders, they need water to fit into their day without thinking about it.
Started by observing competitors with similar features - reminder, motivation, and tracking, to identify useful patterns and opportunities to improve my design.
Through my research, I identified Gen Z and Millennials who struggle with staying hydrated as the primary target audience.
I sketched my initial ideas of the app and interface screens onto different containers, experimenting with different layouts and solutions. I chose to include circular progress visuals as it reinforced hydration being a daily loop, not a one-time goal. Also made the current progress visually distinct to draw the users attention. For the reminder page, I placed a large central icon to immediately convey the purpose and provide a visual anchor that feels intuitive and friendly. Context-aware alerts like sound, vibration and notifications are grouped together to allow the user to make quick adjustments.
I also wanted users to be able to view both short-term and long-term progress, adding smart insights that act like personalized coaching rather than static data. Introduced streaks and badges to make routine progress feel meaningful and engaging, users can complete challenges and unlock more badges to visualize their achievements.
Based on the previous research, I created an information architecture that meets user expectations. This ensures that content is organized in a clear, intuitive way, making it easier for users to find what they need.
Initial lo-fi wireframes were created for the core app screens (Home, Progress, Reminders, Challenges, Profile) and the essential bottle UI screens. These grayscale sketches focused on establishing the basic layout, information hierarchy, and key interaction points for each view before adding visual design details.
The visual style guide aims for a minimal, calm, and engaging brand. While deciding the color palette I chose deep blues to provide a sense of trust, but I found this too similar to most hydration apps, experimented using a bold orange for highlights, keeping the palette minimal and high in contrast. For typography, Clash Display Bold headings offer a modern, sleek look. General Sans is used for body text and subheads for excellent legibility at smaller sizes.
Users can see their current progress and daily goal at a glance, along with their badge status placed in the main visual. The weather impact card below it shows why their goal has been adjusted and by how much, this makes their goal feel personalized and intentional. The recent log list shows their last intake amount and time, paired with the option to manually log any amount.
Tracking progress is a powerful motivator for long-term change. The progress screen lets users view their growth through weekly and monthly graphs, making it easier to spot trends over time. To make this data feel more personal, I added insight cards that break down the stats and offer simple, actionable feedback. I also introduced visual tokens and challenges that reward users with badges, anchoring their progress through tangible milestones.
The reminders screen gives users complete control over the cues in both the bottle and phone app. The master toggle is located on top along with a "pause for today" option. Users can easily set their hydration interval and customize how they receive alerts (sound, light) with clear buttons. I chose to group the cues on the bottle together and placed the phone notification toggle on the other side to distinguish their uses. Then I implemented a wake/sleep time set feature to ensure reminders are delivered intelligently, respecting the user's schedule.
The goal of this screen is to turn consistent hydration into a rewarding game you actually want to play. Challenges provide clear and achievable goals (like hitting a hattrick streak), giving you a roadmap for progress. Completing these challenges earns you unique Badges, appearing in the home page progress circle as a marker of your achievements. This system of setting goals, tracking progress, and earning tangible rewards creates a powerful loop that encourages engagement, celebrates your wins, and gives you compelling reasons to open the app and keep hydrating every single day.
As the final step in setting up Flow, you get to add your personal touch directly to the bottle's e-ink display. This screen is all about personalization, you can quickly draw a simple pixel doodle or choose from a few premade options. It's a small feature but it makes the bottle feel uniquely yours, adding flair to the device you'll see and interact with throughout the day. Draw a fire hydrant.. or a little guy. Go wild.
Designing for the bottle’s e-ink display was an interesting challenge because it meant keeping things clear and efficient on a small, black-and-white screen. The goal was to show key hydration info without needing to reach for your phone.
Screen 1 - The daily progress screen is what you see with a tap, it displays your current hydration and daily goal. The custom doodle adds a personal touch to the device, making the bottle feel more like a companion than just a tool. The battery status is also included so you know the bottle is charged.
Screen 2 - A quick swipe reveals the reminder screen, showing the time of your last logged drink. This helps you pace yourself throughout the day without having to remember the exact time. The toggle on the screen controls alerts emitted by the bottle (like light or sound cues) and also includes a temporary pause option.
Since the canvas space is limited, I ensured that the features are large but spaced out to prevent mis clicks. The previous design was laid out horizontally which immediately pointed out a few issues like display distortion due to the curve of the bottle and parts of the display being blocked due to palm placement. This pivoted my initial design to a vertical layout which solved both issues and had a cleaner look overall.
- This was my first time really designing for a physical product with its own UI, specifically the little e-ink screen on the bottle. I learned a lot about simplifying information to the absolute essentials for glanceability, dealing with the limitations of grayscale, and even thinking about how a flat design would look on a curved surface. It pushed me to be much more intentional about how I used the available space.
- Having a short timeline was intense, but it forced me to get good at prioritizing. I learned to focus ruthlessly on the most critical user flows and getting those core screens on lock first was the only way to ensure I'd have a complete, working prototype.
- Working on both the app and the bottle UI at the same time taught me about designing for a multi-interface system. I had to constantly think about where the user would be and what information they'd need in that moment. Finding a balance between a feature-rich app and a minimal on-device interface was an interesting and rewarding challenge.
Going further into this project, I would involve conducting usability testing with the high-fidelity prototype to gather user feedback, iterating on the design based on testing insights, and building out the remaining features such as the Quick Log modal, detailed Sleep/Wake time settings, and the full Badge Collection screen. I'd also be interested in exploring bottle-specific interactions and feedback mechanisms which would also be valuable.