Aqua

Drink water, grow your virtual reef, and meet adorable sea creatures!

Role: UI/UX Designer & Researcher

Tools: Figma, Google Forms

Timespan: 10 weeks

Challenge: What are some frustrations and hardships people are dealing with because of COVID-19 and/or stay at home orders that we could help alleviate?
‍

Finding motivation to do "simple" tasks has become more difficult, especially ones pertaining to keeping up with your health like as drinking enough water.

Introducing Aqua

Aqua is a wellness centered mobile phone application incorporating gamification, where users are able to collect coral to build out a personal virtual reef and attract sea creatures when they meet their hydration goals.

Competitive Analysis

We started by completing a comparative analysis of popular water drinking apps. Each row represents a feature that was present in the apps we evaluated, which was super insightful because it showed us what features were a high priority of water drinking apps.

User Research

During the research process of the development of Aqua, my team created a survey to understand our target users’ current hydration practices. After recruiting around 30 college students to participate, I gathered the data and analyzed the topic of hydration in relation to our target user profiles.
‍

87% drink <7 cups of water a day

*The recommended daily water intake is half your weight in ounces (ex: 140 lb person should drink 70 oz of water)
‍

‍TAKEAWAY: A clear majority of our target audience does not meet the recommended daily water intake, so hydration is definitely an issue worth targeting.
‍

65% think that they don't drink enough water

‍
‍TAKEAWAY: Our target users are aware that their current hydration practices could be improved but have trouble incorporating healthy water drinking habits.

Personas

After conducting user research, we consolidated the data and created 2 user personas for Aqua: Jordan and Lily. Jordan and Lily are two different types of users of Aqua based off of the research data.

We initially created the persona Lily, the user who knows drinking water is a priority but needs help implementing it, since our target was general college students. However, after the results of our survey, I created the persona Jordan to represent the "immature" user or the subset of our audience that does not know much about hydration or its importance.

Sketches

Crazy 8 sketches to start generating ideas for the interface of logging/tracking water intake

Mockups

We developed tons of mockups for the different screens for Aqua and analyzed each iteration to see which was the most functional and intuitive. Each iteration had unique features and others had combined features.

Above was the progress and evolution of the logging water intake page. It was difficult to find the best design that was intuitive, easy to use, effective, and visually pleasing. We struggled deciding between a dialog box option, text input, and button pushes. In the end, we relied on responses from usability testing to finalize our design.

Usability Testing

Because of our tight deadline, we were only able to conduct a series of usability tests with one participant, who was a responder to our survey. This user had previously responded to our survey that they did not think they drank enough water, and brought up a lot of valuable information we had overlooked.
‍

Conflicting forms of navigation

"Wait, does swiping right take you to the next element in the navigation bar, or the next page in the inventory?" -User
‍

Solution: Create a vertical scroll group to display the inventory content

Unintuitive data representations

"I'm confused about the progress bar since it's similar to the water wheel. I thought they were measured with the same units, but I guess not." -User
‍

Solution: Remove item progress bar so users can focus on drinking/logging water

Overwhelming user control & freedom

"I feel like it's too easy and changeable to log my water intake. People could misuse the ease of it." -User
‍

Solution: Add a dialog box for users to log custom amounts of water they drink

Prototype

Here is the interactive prototype we put together:
https://www.figma.com/file/mknIrpulweOGWcGeCUA40n/Mockups?node-id=0%3A1
‍

Takeaways

You can't develop a product for everyone

The amazing thing about team projects is that everyone has different values and mindsets. But when taking this into account during the design process, it makes it difficult since different functionalities will cater towards a specific user in mind. I learned that it’s ok to narrow down a target user for an app like Aqua because it’s better for make a useful and engaging app for a smaller number of specific users, than a wider variety of users who may not find the app useful. When it comes to a topic like hydration, I initially wanted to develop something that would help the general population since hydration is something everyone should care about. However, when designing the functionality of Aqua, I realized that unique elements of our app, such as the fish/coral collecting gamification, is more effective with helped a younger student-aged audience drink water.
‍

Refining the design is an infinite process

My team spent a lot of time during the brainstorm and design process for Aqua. We all wanted to find the right balance between having an engaging app along with successfully motivating users to drink enough water. Up until the last design studio sessions we had, we were having conversations about the functionality and graphical interface of Aqua. This team could have easily spent an hour having a conversation about each detail of the UI, perfecting features even like the icons in our navigation bar. Though this was somewhat stressful at the time, since we had a deadline, I’m glad that we continuously had these conversations since the more ideas said aloud allowed us to accumulate and synthesize to our final product. This also allowed us to archive new features and ideas for future iterations of Aqua!