Electra

A water tracking smartphone application with a personalized experience.

Overview

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.

Project Type
Academic
Software
Axure & Figma
Date
Sep 2019
 - 
Dec 2019
Role
UX Designer

Problem

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?

Solution

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.

Design Process

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:

Empathize

Competitive Analysis

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.

Define

Personas

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.

Frank
Age: 27
User Type: Fitness Focused
Level of Computer Expertise: High
Goals: Wants to keep track of his water intake to compliment his fitness and health goals.
Pain Points: With his fitness goals and hectic work schedule, Frank often finds himself mentally adding up the water bottles he drinks daily. To help keep track he sometimes uses post it notes while working at his desk, but can’t always add to them while in meetings or on the go.

Rhonda
Age: 72
User Type: Health Focused
Level of Computer Expertise: Low
Goals: Rhonda wants to follow her doctor’s advice and stay hydrated to maintain joint health.
Pain Points: Rhonda is often forgetful and  struggles to remember how much water she has consumed throughout her day. When asked about her water consumption from family or health care providers, she sometimes says she’s not sure.

Ideate

Design Charrette

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.

Smart Phone Sketches
Smart Watch Sketches

Prototype

Low Fidelity

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:

  • User onboarding
  • Adding coffee consumption
Axure Smartphone Wireframes

To test our smartwatch design decisions, we also created a smartwatch low fidelity prototype in Axure. The prototype focused on one task:

  • Adding water to a daily goal.
Axure Smartwatch Wireframes

Test

Usability Testing

We recruited eight participants to test both the smartphone and complimentary smartwatch prototypes. Each participant was asked to complete the following tasks:  

  1. Setting a daily water goal through the onboarding process on the smartphone.
  2. Adding coffee consumption on the smartphone.
  3. Manually adding water consumption on the smartwatch.

Key Findings & Pain Points

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:

  • Participants had relative ease in navigating most screens and tasks.
  • The language and options in the onboarding screens were sometimes unclear to participants. Specifically, some were unsure of the purpose for the onboarding process and others felt the exercise choices were limited and didn’t include their activity.
  • The smartwatch icons, though matching common concept models, did not clearly indicate the associated action.
  • The selection and input types were inconsistent throughout the application. While this did not create major usability issues, participants noted that they found it a bit confusing or odd.

Based on these findings, we made note of the issues to implement in our next iteration.

Solutions to Pain Points

With our key findings and feedback from our usability testing in mind, we made improvements and changes in the high fidelity prototype.

Pain Point #1: Onboarding Call to Action

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.

Pain Point #2: Input Activity

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.

Pain Point #3: Caffeine Consumption

We incorporated an energy drink option to account for more types of dehydrating beverages.

Pain Point #4: Smartwatch Icons

We labeled the smartwatch icons to assist users in understanding the associated action.

Takeaways

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.