aqua

an app using gamification to encourage better hydration habits.

The Story

In the spring of 2021, my team and I brainstormed ideas for a new project to develop over the next 10 weeks. Wellness was a theme we kept coming back to, and we realized that we all have trouble with drinking a healthy amount of water. Knowing that simple reminders aren't enough to keep us hydrated, we decided to approach the problem in a fun way.

The Problem

Drinking water is a healthy habit that often gets forgotten, especially for busy college students. People aren't hydrated enough.

The Solution

Make drinking water easier to remember by creating a phone application incorporating gamification where users are able to collect cute sea creatures and build an aquarium when they meet their hydration goals. 

My Role

UI Designer
UX Researcher

The Team

Myself
Tristin Proctor
Ahtziri Sanchez
Isabel Tuason
Alexandria Wang

Tools Used

Figma

Timespan

10 Weeks

Research

Comparative Analysis

We knew going into this project that other hydration apps are already on the market. In order to set Aqua apart, we conducted a comparative analysis of similar apps to compile lists of strengths to borrow from and weaknesses to avoid while considering visuals and functionality.


After gathering our data, we found the best and most common features across hydration apps and aimed to include all of them in aqua's functionality.

Survey

To better understand our target audience, we conducted user research through a survey. With each team member reaching out to potential participants, we collected around 30 responses from college students.

We asked:
  • Do you think you drink enough water?
  • On average, how much water in cups do you drink in a day?

Our study returned these results:

Do you think you drink enough water?
38.5% said Yes
61.5% said No
On average, how much water in cups do you drink in a day?
15.4% said
1 - 2
34.6% said
3 - 4
26.9% said
5 - 6
3.8% said
7 - 8
11.5% said
8+
7.7% said
0
Without considering activity level, the recommended minimum daily water intake in ounces for a person is half of their weight; for instance, a person weighing 120 pounds would have to drink a minimum of 60oz or 7.5 cups to maintain a healthy level of hydration.

When we consider this calculation, we can see that nearly 80% of our participants aren't drinking enough water. The discrepancy between this statistic the fact that nearly 40% of our participants do believe that they're drinking enough water shows that there is certainly a need for something to teach users how much they should drink and remind them to work towards this goal.

Design

Functionality

Before getting into the visuals, we had to consider what functions Aqua should have. The biggest question we had to solve was how to implement the gamification.

We asked ourselves questions like

  • How should this reward reaching daily water intake goals?
  • What is our setting? A reef? An aquarium?
  • How can we motivate while keeping things fun and stress-free?
  • How do we approach short-term and long-term goals?
Speech bubbles saying "How does water translate to fish?", "Are users collecting fish or coral?", and "How will we track users' progress?"

Style Guide

Before going into sketching and wire-framing, we thought it best to make sure we were somewhat on the same page while coming up with potential layouts. Each member contributed a 5 color palette and 3 fonts to style heading, subheading, and body text. As a group, we decided on the general styling we should keep in mind.

Sketches, Wireframes, Early Iterations

We sketched ideas for logos, sea creatures, coral, and wireframes for the reef, water logging page, and profile. From there, we quickly moved to Figma to build our first iterations of mockups.

While these served as a good foundation to build upon, we saw many flaws in our consistency, styling, and functionality implementation. Over the weeks, we made almost 100 versions of various pages. The water intake page alone had about 20 versions.

Usability Testing

As we approached the end of our design process during the last few weeks, we presented our semifinal mockups to a user from our target audience. They pointed out concerns our team hadn't previously considered. This feedback was immensely helpful in refining our design. The main takeaways we kept in mind are as follows:

Records of water intake are too mutable.

The user felt anxious about how easy it was in this version to toggle how many cups they had logged. The simplicity of just using plus and minus buttons to change the total made misusing the app's functions and fabricating progress more tempting.

Navigation between tabs and pages within tabs is confusing.

The user felt that having two "tab" systems on the same interface was confusing. When looking at the navigation bar at the bottom and the pagination circles at the bottom of the Inventory page, it was difficult to tell if swiping left or right would take the user to the next page in the inventory or a different tab entirely.

Final Prototype

After 10 weeks, we had arrived at our final prototype. Below is a video showcasing our project and the interactive prototype in Figma.

Reflections

Aqua was the first mobile application I had worked on to this extent, and the experience has given me valuable insights into the UI/UX development process.

Empathy can only go so far.

Personas, personal experience, and efforts to empathize, while useful in designing, are not enough. There are perspectives that my team and I won't think of or will forget. User feedback from outside of the design team provides not only valuable information regarding functionality and aesthetics but also the emotions — happiness, anxiety, confusion — certain elements can evoke.

Iteration is key.

I had never made so many iterations of mockups for a single project before. The sheer amount of changes, both drastic and minuscule, was something new to me. It seems that there's always new layouts, styles, and themes to apply in search of the best design. Although the process could be frustrating at times, the polished end result is worth all of the reimagining and redoing.

Designing is a fluid process.

I had learned in informatics classes about the importance of preparation before designing. Hashing out functionality in requirements documents before diving into implementation had been straightforward and simple in my previous design projects. However, working on Aqua has shown just how easily the design implementation process can call into question the functionalities the team had already agreed on. While this has truly driven home how vital thorough deliberation of functionality at the beginning is, it has also taught me that going back and forth between design stages is okay. Nothing is truly set in stone until the product is officially released. And even then, there are always updates to think about!