A water tracking smartphone application with a personalized experience.
Completed during the fall 2019 quarter for HCI 430, a prototyping and implementation graduate course, Electra was a group project with a focus on learning prototyping tools and the iteration process sketch to high fidelity prototype. I contributed in all aspects, including research, UX, and UI design, but was solely responsible for all aspects of the watch prototype.
Many of us don't drink enough water. Everyday our bodies lose water through many of its natural functions. For our body to function properly its important that we replenish its water supply. When life gets busy, how can we track of the amount of water we've consumed daily?
We set out to create an experience that allows users to track how much water they drink in order to meet their hydration goals. The app needed to be multi-channel and use telematics to communicate with the sensor on the bottle.
The app would learn the users behavior and provide personalized recommendations based on the user's health, fitness goals, and local weather conditions. To allow users to be able to monitor their hydration regardless of their activity or location, we chose to design for both smartphone and smartwatch platforms.
We used user centered design thinking to guide our design process from beginning to end. The process and methodologies used in this project are shown below:
Due to the time constraints and the focus of the course, we only completed a competitive analysis for similar products in the market place. While looking at other products, we focused on functionality, technology, platform, and service.
We also looked at materials used, liquid capacity, and the care required. Knowing what existed allowed us to learn from competitor strengths and weaknesses as well as inform our design process.
To help us envision how users would benefit from using Electra, we focused on identifying key user tasks, developing scenarios, and storyboarding them.
This helped us identify user types that would best benefit from tracking their hydration daily and developed personas with demographics and level of need in mind.
Once we identified user types that would benefit from tracking hydration, we began the design process by holding a design charrette to sketch out ideas for the smartphone and smartwatch. With the sketches we focused on goal setting, personalization, history, water bottle UI, and consumption visualization. Below are some of the sketches I contributed.
We critiqued and refined our sketches before designing a low fidelity smartphone prototype in Axure to help us test our design decisions. The prototype focused on two tasks:
To test our smartwatch design decisions, we also created a smartwatch low fidelity prototype in Axure. The prototype focused on one task:
We recruited eight participants to test both the smartphone and complimentary smartwatch prototypes. Each participant was asked to complete the following tasks:
Each participant was able to complete the key tasks, indicating that we did not have any severe usability issues. We did, however, learn that aspects of several screens confused participants. The key insights and paint points we found were:
Based on these findings, we made note of the issues to implement in our next iteration.
With our key findings and feedback from our usability testing in mind, we made improvements and changes in the high fidelity prototype.
We clarified the language for the first screen of the onboarding process. This meant explaining that we would ask the following questions and what action would occur if the user selects the Yes button.
We changed the activity choice to type rather than specific activity and incorporated an intensity level to personalize the daily water goal. Each user, based on their athletic expertise, may exercise at a different intensity level for particular activities.
We incorporated an energy drink option to account for more types of dehydrating beverages.
We labeled the smartwatch icons to assist users in understanding the associated action.
From sketch to final product, we learned that wording can confuse users and possibly discourage them from using an application altogether. When designing for small screens like wearables, finding universally known application symbols can prove to be a challenge, but adding labels can help eliminate possible pain points.
While we would have liked to have conducted more user research at the beginning, the challenges and constraints we experienced were a great real world lesson. Budgets and time constraints don’t always allow for the ideal methods and details necessary to create a finished prototype or product.
Overcoming that information gap, while challenging, provided opportunities for practice and growth in other areas that proved useful in designing Electra.