well+wonders' Hydration Reminder & Tracker App

well+wonders' Hydration Reminder Tracker App, designed to help users maintain optimal hydration levels by sending personalized reminders and tracking water intake. The app aims to promote healthier hydration habits by making it convenient for users to stay aware of their fluid intake, ultimately contributing to improved overall health and well-being.

Year

2019

Service

Product Design

Category

Responsive Web App

Tool

Figma

Problem

well+wonders just launched their specially designed bottle that easily reminds people to drink by its built in time indicator. However, this method might not be effectively implemented if the bottle is not in user's direct sight.

I was tasked to build a hydration reminder app to work alongside their specially designed bottle. The app's goal is to track user's daily water intake.

Problem

well+wonders just launched their specially designed bottle that easily reminds people to drink by its built in time indicator. However, this method might not be effectively implemented if the bottle is not in user's direct sight.

I was tasked to build a hydration reminder app to work alongside their specially designed bottle. The app's goal is to track user's daily water intake.

Problem

well+wonders just launched their specially designed bottle that easily reminds people to drink by its built in time indicator. However, this method might not be effectively implemented if the bottle is not in user's direct sight.

I was tasked to build a hydration reminder app to work alongside their specially designed bottle. The app's goal is to track user's daily water intake.

well+wonders Physical Bottle

well+wonders Physical Bottle

well+wonders Physical Bottle

Solution

I designed the app featuring the virtual bottle as a visualization of how much water left in the actual bottle. I also added a daily goal gauge to visualize how much water to drink in order to reach the daily goal. For reminders, the app will send a push notification every hour to remind the user to drink.

Solution

I designed the app featuring the virtual bottle as a visualization of how much water left in the actual bottle. I also added a daily goal gauge to visualize how much water to drink in order to reach the daily goal. For reminders, the app will send a push notification every hour to remind the user to drink.

Solution

I designed the app featuring the virtual bottle as a visualization of how much water left in the actual bottle. I also added a daily goal gauge to visualize how much water to drink in order to reach the daily goal. For reminders, the app will send a push notification every hour to remind the user to drink.

Bottle Refill Process

Bottle Refill Process

Bottle Refill Process

To refill the virtual bottle, you can select what type of beverage you want to refill. There are eight main beverages such as water (default), tea, coffee, juice, soda, coconut water, beer and bubble tea. After selecting the beverage you can select how much you refill the bottle. You can refill it by indicator (from the bottle) or using volume (ounces or liters).

Weekly & Monthly Chart

Weekly & Monthly Chart

Weekly & Monthly Chart

To track how much the user drink every single day, I provided some charts that help visualize daily, weekly, and monthly hydration intake. There's also an average intake for every range of time.

Shop Tab to buy the physical bottle

Shop Tab to buy the physical bottle

Shop Tab to buy the physical bottle

To promote the physical bottle, I also added an external link to buy the bottle in the website.

✦ THANK YOU ✦ FOR VISITING

JD

© Copyright 2025

✦ THANK YOU ✦ FOR VISITING

JD

© Copyright 2025

✦ THANK YOU ✦ FOR VISITING

JD

© Copyright 2025