an app using gamification to encourage better hydration habits.
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.
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.
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.
Our study returned these results:
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.
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
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.
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.
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:
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.
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.
After 10 weeks, we had arrived at our final prototype. Below is a video showcasing our project and the interactive prototype in Figma.
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.
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.
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.
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!