ODHR_Hero.png

Visualizing Heart Health

Measuring heart rate on demand

 

VISUALIZING HEART HEALTH

In the Spring of 2015, Jawbone released its UP3 and UP4 wearables with bioimpedance sensors that, in addition to tracking sleep and steps, also monitor resting heart rate. These sensors are electrical contacts that measure conductivity when pressed against the skin. Bioimpedance excels at monitoring resting heart rate, which is considered the best metric by which to establish a baseline understanding of an individual's heart health over time, since resting heart rate is unaffected by factors such as caffeine, exercise, and stress.

 
 
UP3s.jpg

My Role

PRODUCT DESIGNER
Platforms: iOS, ANDROID

My responsibilities for this project included user research, concept ideation, designing user flows, user testing, visual design, illustration, interaction design, and quality assurance.

 
 
 

Defining the Problem

The bioimpedance sensors embedded within the UP3 and UP4 bands provide more accurate heart rate data than the optical laser technology used in competing products (Apple Watch, Fitbit Charge HR, etc). However unlike optical lasers which offer constant monitoring, these sensors return values with high confidence only when making direct contact with the user's skin. This presents certain challenges for wearables, which often break skin contact as the user moves throughout the day - especially during vigorous activity.

Bioimpedance was initially introduced into the UP ecosystem to monitor a variety of biosignals for general health maintenance; however as the market for wearables shifted largely to fitness and exercise tracking, Jawbone needed to find a way to meet consumer expectations for heart rate monitoring in order to stay competitive in the marketplace.

Project goals

1. Give users the ability to trigger a heart rate reading at will
2. Make the UP app feel more alive and responsive
3. Create a framework that allows users to investigate context for a particular heart rate reading (time, activity, etc.)
4. Explore ways for this feature to provide additional health insights for users

 
 
 
Jawbone_RHR.jpg
 
 
 

On Demand Heart Rate

On Demand Heart Rate was Jawbone's way of leveraging the existing technology in products already on the market to address consumer demands for more control over monitoring their heart rate. This was a low-cost interim solution that added value to existing product inventory while the company focused on developing its next generation of (never-released) wearables.

 
 
 

Initial Explorations

 
ODHR_Home.gif
 
 
 

AUTOMATIC PULSE DETECTION

When users first open the app, their heart rate is measured automatically and the in-progress reading is displayed at the top of the Home screen. 

 
 
 
 
 
 
 

ON DEMAND - PULL TO REFRESH

Users can also trigger a heart rate reading themselves with the Pull to Refresh interaction in the context of their Heart Health screen, where they see their final results plotted in real time.

ODHR_graph.gif
 
 
 
 
ODHR_Read.gif
 
 
 

ON DEMAND - FULL SCREEN MODAL

User testing revealed poor discoverability of Pull to Refresh in the context of the Heart Health Screen, so instead we provided a CTA which the user could tap to trigger a heart rate reading in a full screen modal.

 
 
 
ODHR.png
 
 
 

Evolving Heart Health

We launched On Demand Heart Rate in beta and ultimately decided not to release the feature to 100% of users, because it was not a success with consumers. The constraints of the bioimpedance technology could not compete with other products on the market. An On Demand Heart Rate reading could take up to 30 seconds to return a confident signal, and required users to remain motionless in order to ensure contact with their skin. Yet consumers could just buy a competing product with an optical laser that returned a confident signal in 5-8 seconds and continuously measured their heart rate from that point on. It was hard to explain the value of On Demand Heart Rate to users.

 
 
 
 

So... How Might We Create Value?

Not all was lost... we had laid the foundation for additional ways to visualize Heart Health. In the absence of an "On Demand" feature, I began to explore how users might interact with their heart health graph. How might they be able to see the impact of diet, sleep and exercise on their cardiovascular health? How might we allow users to understand context without inferring correlation or causation (for liability reasons)?

 
 
 
 
Interactive_HH_Charting.gif
 
 
 

Interactive Charting

Now users can scroll through a timeline of their heart rate data and see it in the context of activities detected by the band or logged manually by the user. Different line weights distinguish vigorous motion from more sedentary periods in the user's day.

 
 
 
 
 
 
 

Tap to Explore

Users can tap on a highlighted pill in the heart health chart and pull up a detailed summary of that activity. This enables them to view the correlation between sleep, exercise, and cardiovascular fitness without Jawbone being too prescriptive.

HR_Open_Detail.gif
 
 
 
 
Day_Trend_Toggle.gif
 
 
 

CARDIOVASCULAR HEALTH OVER TIME

The UP app presented the user with only a day view of their Resting Heart Rate for the initial feature release. With the release of the updated Heart Health screen, they can now toggle between Day View and Trend.

 
 
 
 

SETTING A PRECEDENT

The navigation between Day View and Trend can be carried forward to all of the different health summary screens in the UP app.

HH_Tabs.gif