Wellbeing

Designing a Fitness Tracking Application

Problem

“Globally, 1 in 4 adults do not meet the global recommended levels of physical activity. People who are insufficiently active have a 20% to 30% increased risk of death compared to people who are sufficiently active.” (WHO)

My Role

Sole UX/UI Designer. I have conducted user research through semi-structured user interviews, ideated by creating user stories, designed wireframes and high fidelity iterations, and conducted usability testing.

Goal

Use the design thinking process to create an interface that enables users to improve the quality and consistency of their physical activity.

Exploratory Research

Initially, research was aimed at examining nutritional habits, but after grasping the interconnectedness of nutrition and exercise in overall wellbeing, the scope shifted to include physical activity.

Secondary Research

Secondary research was conducted to better understand the impact and pervasiveness of nutrient deficiencies and insufficient physical activity. According to the National Library of Medicine, “Approximately 25% of people worldwide have anemia” which can be caused by low dietary intake of iron. Symptoms of anemia include: fatigue, dizziness, shortness of breath, and more. 

According to the World Health Organization, “Globally, 1 in 4 adults do not meet the global recommended levels of physical activity. People who are insufficiently active have a 20% to 30% increased risk of death compared to people who are sufficiently active.”

Heuristic Analysis of Competitor Apps

Nutrition/exercise tracking apps analyzed include MyNetDiary, myfitnesspal, and Google Fit. These apps are consistent with one another in that they’re dashboards have visualizations of progress towards completing daily goals like calories burned and steps taken. The dashboards for Google Fit and MyNetDiary have floating action buttons that allow users to log information about exercise and nutrition.

User Research

With the insights we gathered from secondary research, we set out to explore people’s experiences with wellness tracking apps and gather data regarding exercise and dietary habits through 5 semi-structured user interviews.

When asked what they do to maintain their wellbeing, 4 of 5 participants expressed that they did some form of exercise. Furthermore, these 4 participants expressed that their exercise and dietary choices affected one another. 

“I try to get protein and eat enough calories” in order to support their exercise regimen.

Regarding their feelings and experiences with wellness tracking apps, 3 of 5 participants expressed that they were hesitant to use tracking apps. 

“Maybe what’s stopping me is like every time I’m eating, am I gonna be pulling my phone out and inputting info?” 

“If you're not using the app as much, maybe like a reminder…or like a motivational quote.”

Research Synthesis

Initially, research was aimed at examining nutritional habits, but after grasping the interconnectedness of nutrition and exercise in overall wellbeing, the scope shifted to include physical activity.

Thematic Analysis

Thematic Analysis is a method of synthesizing research where user data is grouped to understand which concepts are the most pervasive. Through thematic analysis, 2 major insights were distilled regarding what users wanted from a wellness tracking application. Users want to:

  1. Minimize time spent entering data

  2. Stay motivated 

How Might We (HMW)

HMWs were created to clarify the concepts that will be addressed in design:

  1. How might we streamline the process of inputting nutritional and exercise information in an app?

  2. How might we motivate users to do physical activity?

Personas

Personas are fictitious users that represent the target audience of the interface.

Greta is in her mid-twenties and leads an active lifestyle. She is socially and professionally minded and sometimes has trouble allocating as much time as she’d like to cook and exercise. 

Greta

Jim is in his early 30s and leads a relatively sedentary lifestyle. He works from home, likes to read, and likes to play video games. He has tried to exercise in the past but ends up losing his motivation and doesn’t maintain consistency. Jim wants to be motivated to be active and adhere to a workout regimen.

Jim

Ideation

HMW Solutions

By answering the HMWs, we begin to ideate solutions that will address user needs and pain points distilled through research synthesis. 

  1. We might save previous entries and offer them as options when logging meals and workouts. 

  2. We might enable the user to set goals and provide visualizations of progress towards completion of these goals.

User Stories

Action

Archetype

I want to set exercise goals and view my progress towards completing them

As a person who wants to improve my exercise habits

I want to be able to log exercises and view exercises I’ve done

As a person who wants to improve my exercise habits

As a person who wants to improve my exercise habits

I want to be motivated to exercise

I want to be able to log nutritional info of diet quickly so I can keep track of it 

As a person who wants to improve their eating habits

Information Architecture

Sitemap

A sitemap was created to help envision the overall structure of the application and determine which pages would need to be designed in order to facilitate user needs determined through ideation.

User Flow

This User Flow chart represents the possible steps a user could take when accessing the application and entering workout information. Creating this flow chart helped envision the necessary screens that needed to be designed in order to meet user needs.

Low Fidelity

Initial sketches aimed to represent screens denoted in the User Flow, while addressing primary insights gained from research synthesis, namely minimizing time users have to spend entering data and motivating users to exercise.

Sketches

Guerilla Usability Testing

Sketches were converted into a clickable prototype with POP by Marvel and 5 moderated guerilla usability tests were conducted. This was done in order to quickly determine the efficacy of sketched solutions before committing too many resources to designing them in higher fidelity.

The 2 most important findings from guerilla usability tests, related to issues regarding efficient data entry and user motivation, are listed below with their solutions. These findings informed design decisions when converting sketches to wireframes. Wireframes are simplified versions of designs that can be created quickly in order to gauge the efficacy of proposed solutions. 

Sketches to Wireframes

Cognitive Overload on Homepage Impacting Motivation

Problem: The amount and organization of content on the Homepage is causing cognitive overload and confusion.

“The home page is kind of crowded”

“This page is a little overwhelming”

Goal: Reduce cognitive load on the Homepage.

Solution: Reduce the amount of content on the Homepage, which will motivate users to utilize the interface, view their progress toward exercise goals, and improve their exercise habits.

Streamline Data Entry

Problem : Users are frustrated with the number of steps it takes to log an exercise.

“I might want to be able to add an exercise more quickly.”

Goal: Further streamline data entry flow.

Solution: Place Add Exercise button on Homepage, which will reduce the number of steps (4 to 3) users need to enter exercise data, increasing their likelihood to use the interface and improve their exercise habits.

Design System

Design system was created in order to maintain consistency across screens. By documenting font size/weight, color palette, and UI elements, screens can be created more quickly and cohesively. Roboto was chosen as the font to contribute to legibility and align with industry standards. Color palette choices contribute to legibility and are meant to be energetic and motivational.

High Fidelity

The design system was applied to wireframes to convert them into high fidelity iterations in preparation for the next round of usability testing.

High Fidelity Usability Testing & Redesign (1st Round)

This round of usability testing consisted of 5 moderated tests where participants completed tasks related to the exercise portion of the design in a high fidelity prototype in Figma. The most important issues identified are listed below with their solutions.  

Locating Exercise Log

Problem: When asked to access their previously entered exercise information, all 5 participants selected the This Week tab and were confused when the information they were seeking was not present.

Goal: Reorganize Exercise Log content to better match users' mental model. 

Solution: Place Exercise Log information in This Week tab.

Scrollability

Problem: Users expect scroll functionality on the Progress Bar Page.

Goal: Implement vertical scroll function by placing additional content below progress bars.

Solution: Place log information under progress bars.

Multiple Exercises in Single Session

Problem: Options for exercise entry don't match with how users workout. Specifically, users often do multiple exercises in a single workout and currently there is no way to reflect this in entry.

Goal: Enable users to record multiple exercises in a single session, improving the efficiency of data entry.

Solution: Add Exercise to Session button prior to submitting the entry.

High Fidelity Usability Testing & Redesign (2nd Round)

Add Exercise to Session button confusion

This round of usability testing consisted of 5 moderated tests where participants completed tasks in a high fidelity prototype in Figma. The most important issues identified during this round of testing are listed below with their solutions.

Problem: Confusion regarding how to submit an exercise caused by “Add Exercise to Session Button”

Goal: Reduce confusion regarding the feature. 

Solution: Remove Add Exercise to Session button. Function of the button needs to be incorporated but due to time constraints no replacement feature is present yet.

Accessing Log Page

Problem: Confusion regarding accessing log page stemming from lack of clarity. 

Goal: Improve clarity of scroll functionality.

Solution: Text instruction to scroll down to access log.

Prototype

Reflection

The project was successful in that users were able to efficiently log exercises and view their progress toward completion of exercise goals. Due to this being my first time using the Design Thinking process, the scope of my MVP may have been made too broad by including the nutrition and exercise portions of the solution. If I had focused exclusively on exercise earlier in the process, I would have had more time to spend on usability testing and iterating. In the future, I would like to return to this project and apply my learnings to reincorporating the nutrition portion of the design.