Fitbit Clock Faces
UI Design3 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
Objective
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
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
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.
Reflection
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.