Stay Hydrated: A Heuristic Evaluation on the Hidrate Spark 3

Kim Tran
Digital Shroud
Published in
7 min readApr 16, 2021

--

It makes up an average of roughly 60% of our body. We’re advised to drink up to 101 ounces of it, for men, or 74 ounces, for women, recommended by the Institute of Medicine (IOM).

Water. H2O. Aqua.

Photo by Anderson Rian on Unsplash

As simple as it may sound to pick up a tall glass of water and drink it, let’s be honest, we tend to forget to drink the recommended amount of water on a daily. Whether it be due to laziness, not paying attention, or being too busy with life, whatever the reason, let’s have a change of habit and keep ourselves accountable.

Using Jakob Nielsen’s 10 principles of interaction design, I will be performing a heuristic evaluation on the Hidrate Spark 3, which is the latest in “smart” water bottles that reminds you to drink enough water throughout the day, each day.

Photo by HidrateSpark

#1 Visibility of System Status

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

The power of the Hidrate Spark 3 tracking your water intake comes from the sensor stick. The sensor stick is put in the bottom ring of the bottle, which is how the bottle knows the amount of water it has. However, before you start using the Hidrate Spark 3, you have to calibrate the senor stick by pairing it with the mobile application via Bluetooth. Figure 1 shows you the status of when your bottle has successfully paired with the app.

Figure 1

Because the sensor stick knows how much water it’s holding, it’s able to detect how much water you’ve consumed. So, when the Hidrate Spark bottle senses that you’re not drinking enough, the sensor stick constantly lights up from within to alert you that it’s time to take a sip. Also, it’ll glow when you finish the bottle to inform you that it’s time to refill!

Figure 2

The users can see and keep track of the amount of water they drink throughout the day from the app’s dashboard. The dashboard presents a hydration ring that fills as users drink more the entire day. In addition, users can check and analyze their daily, weekly, and monthly progress by a percentage, number of bottles, and current streak. In the History view (Figure 2), there is a chart of the users’ daily and monthly progress. In the day view, it even breaks down the users’ intake by the ounce each time.

#2 Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

The water bottle and application are fairly easy to pair and use. Hidrate uses familiar language and terminology for users to operate the app effortlessly. Its notifications to remind to drink water are also encouraging to read because the kinds of reminders they offer are funny ones, quotations, or motivational (Figure 3).

Figure 3

#3 User control and freedom

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

When connecting the water bottle to the application, users can cancel out that task to quit it. Also, there’s this detail where you can cancel out of snoozing the bottle glows when you want your bottle to not glow for a while. There are backlinks for users to click on to return to the previous screen (Figure 4).

Figure 4

#4 Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.

All of the UI components, like color palette, icons, fonts, experience flows are compatible and up to par.

#5 Error prevention

Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Users are prone to information overload and can be easily distracted. As a result, the odds of making an error are increased.

To prevent users from accidentally making an error, like deleting their water intake that they added manually or logging out, a pop-up occurs that asks the users to confirm their actions (Figure 5).

Figure 5

As seen in Figure 6, on the login screen, there’s an eye that opens and closes when the user clicks on it. When the eye is open, the user can see their passwords, which will prevent them from entering the wrong password to redo the process.

Figure 6

#6 Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Figure 7

Having a label next to the icons at the bottom would help at least the first few times when the user is first using the app (Figure 7).

#7 Flexibility and efficiency of use

Shortcuts — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

The bottle and app do not have shortcuts. They are both straight to the point and easy to use for both novice and experienced users.

#8 Aesthetic and minimalist design

Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.

The bottle has a soft-grip body, which reduces condensation and improves gripping, and is easy to clean. It comes in six different colors to choose from as well as a mobile application to download from the App Store or Google Play.

The Hidrate app is easy to use, sleek, and appealing to the users’ eyes with a modern blue color pallet to put you in the mindset to drink water. The icons used on the navbar and all around the app are minimalistic and have labels to indicate what they’re for. There is consistency in the font styles which complements the overall blue sky and ocean design.

Photo by HidrateSpark

#9 Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.

As seen in Figure 8, Hidrate tells users exactly what errors they have made when entering a wrong username or password.

Figure 8

#10 Help and documentation

It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.

The help page lies in the application settings where users can go find answers to questions about the Hidrate Spark water bottles, sensor sticks, lids, and so forth. For instance, the number of servings each bottle holds, how to wash the sensor stick, what to do to recalibrate the bottle. With every purchase of any Hidrate Spark water bottle, the user is also given a physical Quick Start Guide to set up the pairing and calibration of the bottle with the app.

Remember to stay hydrated because water is life. Water can flush out wastes in your body, make your skin healthier, improve brain function, and keeps things flowing. So, pick up a glass and cheers.

--

--