Hero image of Fitbit mobile screens.

FITBIT

Historical data searchability made easy and intuitive.

Team

Project Mentor &
Peers

My Role

End-to-end
UX/UI Designer

Tools

Figma, FigJam &
Optimal Workshop

Timeline

80-Hour
Solo Project
Introduction
Fitbit is an educational case study designed during my time at DesignLab.
So you ran a marathon way back when...
...would you want to look those stats up today? All Fitbit's major competitors sure seem to think so.

Fitbit, a leader in the health tracking device sector, has a powerful app and what makes it so approachable is its simple design, but their historical data takes ages to find!
Discover
Objective
Do a product comparison of Fitbit's major competitor's and then conduct guerrilla testing on 5 random people to see if they can find historical data in Fitbit.
Methodology
  • Product Comparison
  • Guerrilla Testing
  • Product Comparison
  • Click Tracking & Scroll Behavior Observation
Product Comparison
First, I compared 4 of Fitbit’s major competitor’s to see how they were solvig this problem. Their competitor's definitely offered a more intuitive way of looking up historical data.

Polar Flow

Polar flow company logo
Company: Polar
How did they solve the problem:

Day, week, monthly overview
Screenshot:
Polar flow mobile screen

Apple Fitness

Apple fitness company logo
Company: Apple Fitness
How did they solve the problem:

Day, week, monthly calendar
Screenshot:
Apple fitness mobile screen

Garmin Connect

Garmin connect company logo
Company: Garmin
How did they solve the problem:

Daily, weekly, monthly & yearly calendar
Screenshot:
Garmin connect mobile screen

Samsung Health

Samsung health company logo
Company: Samsung
How did they solve the problem:

Daily, weekly, monthly & yearly calendar
Screenshot:
Samsung health mobile screen
Outcome
Product Comparison
All Fitbit's competitor's have intuitive access to historical data.
Guerrilla Testing
5/5 participant's could not find stats from the past on Fitbit.
Click Tracking & Scroll Behavior Observation
Click tracking & scroll behavior revealed 5/5 participant's searched for an icon at the bottom navigation bar first before thoroughly searching the top of the screen and working their way down.
Prototype
Objective
Produce the mock-up screens using existing design system to allow user's to access historical data.
Methodology
  • Screen Flow
  • New Components to Design System
  • Low Fidelity Wireframes
  • Mock-ups
Screen Flow
Where do user's expect to find this information? I conducted a screen flow to visually illustrate where the new screens will fit into their current app
A flow chart showing the sequence of mobile screens
Branding & Style Guide
Using Fitbit's existing design system, new components were added to created the screens.
Fitbit UI branding and style guide
Low Fidelity Wireframes
Quick lo-fi wireframes were created and shared during peer group crits session and mentor meeting. An icon was added in the navbar leading to the calendar as a result of the eye tracking data.
7 low fidelity wireframes showing how a user would navigate to find historical data
Mock-ups
Using the branding and existing components, the new screens were created. An icon was added to the navbar as well as a calendar with daily activity overview. Ability to view various stats that were embedded under several pages were brought to the forefront with the option of viewing a graphical chart.
7 high fidelity wireframes showing how a user would navigate to find historical data
Test
Objective
Usability testing was perfored to validate the design.
Methodology
  • Usability Testing
Prototype
Outcome
After some deliberation, the bottom nav icon was removed and replaced with a calendar icon at the top of the page. The result is an uncluttered navbar with an easily accessible calendar that leads to all the historical data at the top of the page.

Calendar background color was added to section off each month for easier viewing.
Iterated Design
Final mobile screens
Back to top icon
suzykong1@gmail.com
Copyright © 2024 Suzy Kong