Status Rings
Fitbit Watch Face
November 20th, 2021
The Problem
When I recently bought a Fitbit, I was really impressed with the watch itself but rather disappointed by the styles and features of the watch faces that were available. I wanted a face that showed progress towards my daily goals at a glance and do so while looking good. I also wanted to be able to change what stats were shown and have an analog or digital watch option.
The Solution
I took things into my own hands and familiarized myself with Fitbit's programming pipeline, then designed and built my own watch face which implemented the features I wanted. Initially I made it for myself, but after some people around me expressed interest in it, I released it for free on the Fitbit Gallery for anyone to use. Since launch it has received over 200 ratings and 4.7/5 stars.
The Skills Honed
- Fitbit OS Simulator
- Javascript & JSX
- HTML/CSS
- Optimizing SVGs
The Lessons Learned
Interacting with end users is rewarding: It is a really good feeling to help someone with an issue and to know that they enjoy using your product enough to ask for help. A few users have even taken the time to email me and express their appreciation for my work which has been a reward in and of itself.
Even seemingly inconsequential changes need testing: One of the updates I released changed the order in which stats were listed on the face. Because I forgot that I had the data for the stats assigned by order, this change caused the wrong data to be associated with each stat. A simple fix, but not something you want to discover after the update is shipped.
Screenshots
The final design
Intermediate analog design
Intermediate digital design
An early wireframe before I simplified the shape