Redesign_Header.png

Jawbone UP North Star

Navigation consistency, supporting day and trend views across all biosignals, and a UI refresh.

 

UP REDESIGN

As Jawbone explored new features that corresponded with hardware improvements, integrating these into the software experience required an overhaul of the UP app’s information architecture.

 
 
JB_Home.png

My Role

PRODUCT DESIGNER
Platforms: iOS, ANDROID

My responsibilities for this project included creating a new scalable design system, UI components, data visualizations, icon sets, illustrations, and illustration guidelines.

 
 
 

Project Goals

  1. Create a framework that scales to support new features and tracking more biosignals

  2. Navigation and interaction consistency

  3. Better hierarchy and reduced cognitive load for data visualizations

  4. Consistent approach for surfacing Smart Coach insights

  5. Updated color palette and icon set

 
 
 
 

OUT WITH THE OLD

When it was originally designed, the UP app used color to distinguish between a suite of initial features - Move, Sleep, Food, and Weight. As new features were added to the app (ex: Heart Health, Blood Pressure), the existing UI didn’t scale well — similar colors were used to represent different features, and each of the data visualizations required different interactions.

 
Jb_Old.png
 
 
 

IN WITH THE NEW

Each of the Summary screens in UP feel like part of a unified family of features. Navigation between Day and Trend views is consistent across all biosignals, and users can interact with data points in a consistent way. Metrics and Smart Coach insights follow a consistent pattern across all screens and the color palette is also more refined.

 
JB_New.png
 
 
 
 

AN OUTDATED HOME FEED

Previously, the UP home screen layout was not able to integrate entry points to all the summary screens in a consistent way. The color palette also felt loud and disjointed.

JB_Home_Refresh.jpg
 
 
 
 
JB_Home_New3.gif
 
 

HOME REFRESH

While UP is still colorful, the palette ties the features together better. Entry points to summary screens is consistent across all biosignals.

 
 
 
Styleguide3.png
Styleguide4.png
Styleguide5.png
Styleguide6.png