Fitbit Clock Faces

Fitbit Clock Faces

UI Design

3 high-fidelity clock face designs for Fitbit watches completed over a 4-week design sprint. The final designs are in production, and 1 clock face is currently available for download in the Fitbit gallery.

Project Duration

Sept. 28 2020 – Oct. 23 2020 
4 Weeks

My Role

UI Clock Face Designer

Tools Used

Adobe Illustrator, Figma


Ideate and produce 3 final high-fidelity clock face designs over a 4-week design sprint. The project began with 30 sketches of 10 clock face concepts, which were narrowed down and refined each week.

About the Project

I was selected as 1 of 5 CSUMB students to partner with Fitbit to create new clock face designs. The final designs are in production, and 1 clock face is currently available for download in the Fitbit gallery.

Over the 4-week sprint, we participated in weekly design reviews with Fitbit designers, attended weekly office hours to discuss our designs further, and presented our final designs to the Fitbit design team.

The Process

Initial Research

We were given creative freedom for our clock face concepts, and could target any users of our choosing, such as family, friends, and even ourselves for a student perspective. To begin brainstorming my 10 initial concepts, I utilized 3 primary research sources:

  • • Current UI Design trends and the Fitbit Clock Face Gallery: What might be missing in the market?
  • • Brief interviews with family and friends: What might my target users be missing in their day-to-day?
  • • Fitbit Clock Face specifications and design guidelines: Avoiding future costs by ensuring concepts are able to be executed by developers

Concept Sketches

With this research, I sketched 10 clock face concepts, with three screens per concept. These extra screens demonstrated different states of the clock face such as motion transitions, alternate color schemes or backgrounds, Always-On-Display (AOD) mode, and analog versus digital. I created concepts that targeted a specific user and concepts that focused on aesthetic visual design.

The sketches were placed in Figma for our first design review, and the green dots were marked by Fitbit designers to indicate which designs we’d be moving forward with to create initial high-fidelity concepts of.

Iterating & High-Fidelity Concepts

During our second design review I presented my initial high-fidelity concepts, revised with feedback I gained during our first review. These were created in Adobe Illustrator then placed into Figma. The green dots signal that I’d be moving forward with my concepts for a mandala/meditation, weather, and retro design clock face.

I refined these three concepts further with the review feedback by creating other accompanying screens and alternate visual designs for each clock face. This process included thinking about motion design, creating illustrations and custom character sets, and generalizing concepts to be accessible to wide audiences.

Final High-Fidelity Mockups

During the final week of the design sprint, the three final designs were further refined and prepared in an Illustrator file to hand off to the Fitbit team for refinement and development. These clock faces are in development, with 1 currently available for download in the Fitbit gallery. You can view Mod-Podge (my retro clock face) here.

Meditation Mandala – a clock face concept that allows users to tap to engage in an animated breathing exercise.

Weather Focused – a clock face concept that visually changes based on weather conditions and temperature.

Retro – a clock face concept of a fun and aesthetic visual design with various backgrounds to select.


This project was an exciting learning experience. I enjoyed immersing myself in the design process of a large company for the first time and learning about all the intricacies of clock faces. It was so interesting to think about all the ways a user would interact with this type of screen and the details that are necessary to bring these concepts to life, while maintaining the glanceability of a clock.

In the future, I would want to work more closely with the development team. While creating custom illustrations and character sets were certainly fun, I needed to simplify my concepts for developers and ensure ease of use across a wide range of users.

Let’s Connect!

Made with  &  by Nicole, 2022.