Google Fit

A new feature integrated with a preexisting health app.

UX research and testing. UI integration.

Google Fit is a popular fitness tracking app covering a wide variety of health targets. However, because the app is based on activity logging, it does not have a framework for tracking non-caloric health habits. This added skincare feature is pioneering Google Fit preventative care.

The Problem: How might we enable users to track their skincare habits?

Task: Design a new feature that allows users to track habit-based preventative health goals.

*Please note that this project is not for any former or present client of mine. I've chosen this project as an exploration of information architecture.

 
UXA Portfolio_magazines.png

The Challenge:
Skincare Tracking

This project explores how we can expand a popular fitness app to include daily habit tracking.

Why skincare?

This project began as a submission for the OpenIDEO Agents of Change' Atopic Dermatitis Challenge. These challenges address pressing global issues by crowdsourcing innovative solutions. In addition to the widespread relevance of this medical condition, one of my closest friends has suffered with Atopic Dermatitis since college and I have witnessed it’s effect on her health firsthand. This medical condition is both prevalent and personal because of this.

What is Atopic Dermatitis?

Otherwise know as eczema, AD is one of the most common skin conditions. It is a chronic inflammatory disease triggered by a myriad of environmental conditions. Once symptoms start they can worsen as itchy dry skin leads to cracking, bleeding and oozing. This condition makes everyday activities challenging and emotionally difficult. Because AD is chronic it requires a regiment of daily habits in order to keep it under control. It became clear after researching AD that patients will need to track symptoms and medications over time to discern patterns.

Project Hurdle:
IA Integration and UI Blending

Why use Google Fit?

For Android users, Google Fit is a convenient app for health tracking. It utilizes built-in sensors on Android devices to monitor a user’s activities and integrates with fitness apps to give the user an all-inclusive health report. Since Google Fit is a favored health app that provides data visualization, it is a good starting platform for this project.

Understanding the Google Fit information architecture was crucial to successfully embed an entirely new type of health tracking—one that does not follow the app’s quantitative measurements. The existing information architecture and UI elements must be preserved to ensure product consistency, usability and learnability for current users. Introducing new information architecture required broader sourcing of UI from other Google apps such as Google Calendar.

My Role

UX Design + Research

Stakeholders

Google Fit | UIUX Mentor

Discovery & Research


Research Goals

Planning

The first action in this project was to define the problem by hearing from patients themselves on what aspect of AD is the most debilitating for them and how they are currently managing their health.

What I needed to investigate:

  1. What is top priority for individuals with Atopic Dermatitis?

  2. How do health apps help build users habits?

  3. What is the most helpful way of tracking eczema flares?

 

Research Methodology

Strategizing, Conducting

Primary Research:

Research to answer specific questions.

  • Customer Interviews: Interviews with patients to understand what it is like to have eczema, what makes it difficult to track, and what features users would be interested in.

    I chose to conduct these interviews because hearing straight from patients was crucial to define the problem correctly and to hear from them on how they use apps.

    Participant Demographic: 3 individuals who have been diagnosed with eczema.

Secondary Research:

Research on available statistics and examples.

  • Topic Research: Existing research (articles, medical journals) on Atopic Dermatitis to understand patient challenges.

    I needed to research this condition extensively because there is a wealth of research available on treatments and triggers and it is not a part of my daily experience.

  • Competitive Analysis: Research to understand the current market for skincare apps (what competitors have done/are doing).

    I chose to look at other eczema and health tracking apps available on the market in order to learn from what they have tried successfully and unsuccessfully.

 

Research Findings

Synthesizing, Product Plan

Customer Interviews:

After conducting interviews I gathered the following insights from patients themselves.

Patient’s top priorities:

  • Help in building a habit for applying lotion

  • Finding out which triggers are setting off eczema flares

Feedback on forming habits:

  • Using a spreadsheet is way too hard to keep up with daily tracking

  • The battle is fighting a resigned and lazy attitude

  • Reminders work more effectively than manual data entry

Tips for eczema flare tracking:

  • Timestamp information is helpful for communicating with doctors

  • Tracking any time that medications switch can help depict if it is working

 
It’s hard to focus, sleep, or even sit. I have to actively think ‘Stop scratching!’ I get so irritated I wake myself up every 2 hours needing to put on lotions and medications all the time. I want help finding the triggers and a sustainable solution that is easy to manage without massive side effects.
— Harriet
I need to find a nourishing lotion and use it consistently, but my personality makes it hard to get into tracking. I’m just not that disciplined.
— Tina
Once it cracks it takes forever to heal. I want to track behavioral things like soaps, lotions and food, but manual entry is high barrier. I need help forming the habit.
— Mary
 
 

Topic Research:

After delving into available research, I found the following triggers and treatments for AD.

Triggers for Atopic Dermatitis are difficult to track including allergens such as:

  • pollen

  • pet dander

  • peanuts

  • stress

  • dry skin

  • infection

  • household cleaners

Treatments for Eczema include:

  • corticosteroid cream or ointment

  • oral and topical antibiotics

  • oral corticosteroids

 

Competitive Analysis:

I explored and compared several health tracking apps and eczema specific apps on the market. One commonality I noticed is how fitness apps rely on habit formation.

Similar apps use the following patterns to motivate users:

  • clear and beautiful data visibility

  • engaging interface

  • sensory reward system for logging data consecutively

Wearable Technology:

Manual entry is the most common barrier for users to keep up with a habit-based app. To solve for this, some apps such as FitBit utilize physical sensors for collecting health data.

  • PfiRe Labs created a wristband sensor that detects scratching movements for tracking purposes. Though this is only currently available for research, it is likely this will become available to the public. This may be helpful for tracking nighttime itching for eczema patients.

 Research Summary

Through the use of customer interviews, topic research, and competitor analysis I gained the following insights in response to the original research goals:

  1. Users primarily need help with forming habits and tracking triggers.

  2. Reminders help users stay on track with their daily habits.

  3. Visually representing data makes is motivating and useful for users.

Persona

Creating a representative Google Fit Skincare customer profile

This profile was based off customer interviews for the purpose of guiding design decisions and keeping real user needs in mind.

Participants in these interviews voiced how disruptive eczema can be in their lives once they have a flare. They also noted how confusing it can be to find out what is causing their flare. Since treatment for eczema is often a medication taken or applied daily, it is challenging to remember these small daily habits.

Persona - Portfolio.png
 

Age—26

Location—San Francisco, CA

Occupation—Web Developer

Bio

May was diagnosed with atopic dermatitis 6 years back. She has flares about every 2 weeks and it gets worse in the winter. She started to feel more urgent about finding a treatment plan lately because she feels anxious in the mornings about going in to work. She tried switching treatment, but can’t figure out what causes her flares.

Goals

  • To understand what triggers her flares

  • To find a treatment plan that works and to keep to it

Frustrations

  • Her flares seem to come randomly

  • She has difficulty tracking the many triggers that affect her

  • It is easy to forget to take her medication

 Structural Design & Layout


Feature List

Defining the Product

A list of features necessary for a minimum viable product

 

Original Sketches

Designing screens for an app and Google Fit integration

 

 Project Redirection


Preliminary Site Map

Originally I approached adding habit tracking as a separate app that would integrate and display its data within Google Fit, sharing Google design guidelines. Many apps operate in this way including Calm, Nike+ Run Club, and Runkeeper.

The site map below illustrates the layout for an independent app linking to the Google Fit home page. Users can view data through skincare card, but they will need to input skincare habits through the independent app. As I was designing, it became clear that it would be a confusing experience to track data in a separate app.

Iterated Site Map

I had first planned to utilize Google Fit UI to provide a more cohesive experience across both apps, but this also would be confusing if the app was a separate entity from Google Fit. Therefore, instead of designing an app to simply send data to Google Fit, I decided to pivot my approach and designed a feature nested within Google Fit itself. This circumvents the unnecessary complications of needing 2 apps to accomplish the similar tasks.

The site map below reflects this shift to show alerts routing straight to the Google Fit home page and a new card named “Skincare”. New functionality has been assigned to the FAB for logging habits in addition to logging activities.

 
Capstone 3_ Sitemap@2x_prelim.png
Capstone 3_ Sitemap@2x_iterate.png

User Flow

Exploring the task completion process.

Since interview participants all voiced how reminders would be helpful in keeping up with habits, I chose to focus specifically on a users experience starting from receiving a reminder notification on their phone. I chose to explore how Google Fit reflects changes after the user completes that reminder task.

 
Capstone 3_ User Flow.png
 

UI Design Guide

Analyzing current UI

By utilizing Chrome Developer Tools and Material.io I cataloged a UI Kit for Google Fit including colors, button shapes and states, typography, logos, icons, and components. A thorough understanding of Google Fit’s current UI was crucial to insert a new feature seamlessly.

Since this type of tracking is entirely new for Google Fit, there is currently no framework for task reminders or calendar integration. In order to source those necessary elements I borrowed patterns and components from Google Calendar. Once the basis of design was established, I could then adapt pieces for the new feature.

Currently, Google Fit uses color to separate goals from sleep tracking. I chose vibrant orange and yellow colors for habit tracking within Google Fit based on the saturated purple, blue, and turquoise colors already in use.

 
Google Fit Patterns:cards, circular progress bars, navigation and FAB

Google Fit Patterns:

cards, circular progress bars, navigation and FAB

Google Calendar Patterns:cards, illustrations, form fields

Google Calendar Patterns:

cards, illustrations, form fields

 

UI Design Guide Components

Frame 5.png
Frame 6.png
Frame 7.png

 High Fidelity Screens

Realizing the product

Once the information architecture was established and a UI Kit was developed, these two came together to flesh out original high-fidelity mockups.

Logging Activity

 

Adding a Habit

 

Home Dashboard

 Usability


User Testing

Analyzing site patterns

Participants: 20 individuals who are current Google Fit users.

To test if the product was successful in achieving the intended goal, I divided the user flow into 3 testable tasks. Each task was tested separately to understand where users may encounter issues. The affinity map below describes their feedback as they completed these tasks.

Objectives:

  1. Are there any confusing moments that cause the user to make an error and how did they recover?

  2. Is there anything misleading when setting up a new skincare habit?

  3. Where do users expect to make manual data entries?

1. Manual Entry

Can users make a manual entry that they used Cetafil Soap at 7am?

 

2. New Habit

Can users set up a new skincare habit for their eczema and link it to Google Calendar?

 

3. Updated Tracker

Can users mark the reminder as complete and check if the dashboard updated?

 
 

User Testing Summary

Testing revealed user confusion with current Google Fit UI such as the FAB and Journal tab. Users also had difficulty with making manual entries and discerning when to log into the skincare card versus using the action button.

 Success Rate

60%

Complete Reminder

62.5%

Add a New Habit

87.5%

Manual Entry

 Iteration


Next Steps

Most of the higher severity observations made during testing raise issues that require a change to Google Fit structure as a whole. A new round of user testing will be necessary to evaluate the effect of these changes. If users are still finding the same issues further iteration will be necessary.

 

Immediate Fixes:

  1. New habit checkmark does appear as a button.

  2. Making multiple manual entries is tedious.

  3. Users are looking to create new habit within the skincare card.

Potential Solutions:

  1. Change checkmark to “Done” text button.

  2. Include the option of selecting multiple days at a time for manual entry.

  3. Rename card to Skincare “Record” or “History” for clarity that this only depicts results.