HydrateMe — Tejus Krishnan

My experience redesigning an app that helps its users meet their daily hydration goals.

Project Overview

Project deliverables

User interface

My role

UI/UX Design
Wireframing + prototyping
Visual design

Project context

Personal project
Redesign of a 2016 internship project
Timeframe: 1 month
Team: Tejus Krishnan
Tools used: Figma

Background

During my junior year of high school, I interned at a startup manufacturing a “smart water bottle” designed to keep track of its users’ hydration levels. My team was tasked with designing a mobile app to accompany the water bottle by recording data and aiding users in meeting their optimal hydration goals.

My roles included ideating, wireframing and prototyping the app, as well as designing the user interface. This project was my very first experience with product design, and I credit it with inspiring my decision to pursue the field in college. Nonetheless, there was a lot I could improve on, as you can see:

Believe it or not, I threw this bad boy together on Microsoft PowerPoint. Back in the day I wasn’t aware that actual design software existed for projects like this. We all start somewhere.

—

Of course, there isn’t much use in tearing apart a 3-year-old project I worked on before I knew the first thing about the field of UX design. As I said, it was my first time getting my hands dirty with this field, and at the time I was quite proud of being able to deliver a full prototype without any prior experience.

However, I still saw a new opportunity in my old work: to redesign this project with the experience I now have. I already had a feasible problem statement, some detailed wireframes, and a deliverable for reference. With these blueprints on hand, all it would take was my updated design savvy to create something beautiful.

(RE)Design Process

Rebrand

Since the first draft of this project was dealing with the startup’s intellectual property, I took steps to reimagine the product’s entire design and brand identity, removing all references to proprietary information while keeping the generic idea and purpose intact. The startup has since abandoned plans of releasing a mobile app alongside the bottle, which gave me the freedom to incorporate many of my own ideas into my version. My first steps towards rebranding the product were to rename it “HydrateMe” and create my own logo for it.

Wireframing and prototyping

I decided not to tamper with the core features of the app, since they adequately answered our user needs and were decided upon after weeks of research and discussion with my old high school team. Instead, I focused my redesign efforts on navigation and visuals, as well as refining the user experience for certain features.

The app’s central functions are to…

Recommend users a daily hydration goal based on their demographic and health information
Track users’ water intake via any Bluetooth-linked smart water bottle

My design process for this updated version was somewhat non-linear and improvisational. The first thing I did was create a new visual identity for the app and experiment with various UI layouts that I found cleaner and more attractive than the original version (not that it was a very high bar to clear). After I settled on a look for the home screen that I was satisfied with, I grew the rest of the wireframe out from this main page as a guideline for the rest of my work.

Information architecture

Based on my wireframes, I came up with a simple, intuitive navigation scheme for the HydrateMe app. The app is split into three central components, as reflected in the navigation bar at the bottom of the screen: the home page (showing today’s hydration progress), the stats page (showing weekly and monthly reports of the user’s hydration) and the user’s account settings, where they can modify their personal data and daily goals, as well as calibrate the Bluetooth settings for their smart water bottle.

The settings page is where I added the most detail to the app, with an emphasis on transparency. From the settings page, the user can not only modify the app’s system settings, but also learn about how the app is handling their data. I added some “tip boxes” explaining how users’ personal data is used to drive the app’s functionality, as well as an FAQ section to answer any additional questions the user may have.

Visual design

The app’s visual identity was the most immediate problem I sought to fix in my old version. I started with a deeper, richer shade of blue as the app’s central color. To convey a sense of space and simplicity, I emphasized rounded shapes, for both the UI elements and my choice of typeface.

Additionally, since this is an app focused on hydration, I integrated the wave-and-bubble motif (inspired by my earlier project, HuskyHealth) into the onboarding and branding for HydrateMe. This was part of a larger effort to make most of the UI graphical as opposed to textual, as it eliminates a language barrier and thereby makes the product much more accessible to users worldwide.