Fitbit
Clock Face Design
TIMELINE
Sept. 28 2020 – Oct. 23 2020
4 Weeks
MY ROLE
UI Clock Face Designer
DELIVERABLES
3 High Fidelity Clock Face Concepts
TOOLS
Adobe Ai & Figma
OVERVIEW
Brief & Problem Statement
Design and mockup 3 high fidelity clock face concepts in 4 weeks going from 30 sketches of 10 different watch face concepts the first week to 3 high fidelity concepts with screens for the clock, the stats, and the always on display mode the last week.
About the Project
For this project 5 students from CSU Monterey Bay were chosen to partner with Fitbit for one month to generate clock face designs. The UI designs displayed here are not final concepts and are not in production. Once the students finished the project Fitbit designers and developers took over refining the designs and adding effects like motion.
PROCESS
Brainstorming/Ideation
We were given complete freedom with our designs and were told to design with ourselves or our family as a target audience, something that is a rare opportunity for a designer. To gather inspiration I looked at current UI trends and thought about how they could be transferred onto a watch face. I also tried to appeal to a wide variety of people without sacrificing the specifics of my concepts (for example various color palette choices that could be personalized by the user).
Concept Sketching
I created 30 low-fidelity sketches representing the following concepts: Mood Ring, Pinball Machine, Hiking Enthusiast, Solar Clock, Goal Rings, Step Journey, Blocky Info Clock, Whimsical, and Hoops.
*Note a green dot indicates a design was approved by the Fitbit design team to move forward in iteration
Iterating Part 1
We each took our 6 best designs and created an initial high-fidelity draft of them to see what they would look like in a digital space.
*Note a green dot indicates a design was approved by the Fitbit design team to move forward in iteration
Iterating Part 2
Next we narrowed down the 6 concepts to 3 and iterated on those.
THE SOLUTION
At the end of the four weeks I had 3 concepts to present to the Fitbit UX design team.
Moon Clock
The first concept was a “Moon Clock” with neon purple gradients and moon phases around the outside. Users can choose between an analog or digital version.
Hula Hoops
The second concept was “Hula Hoops” a playful design that incorporates data visualization by generating brighter rings as the user progresses toward their goal and adding additional rings at various milestones. This watch was designed to incorporate motion as well.
All the Info
The third concept was “All the Info”. This clock has a variety of color choices and allows the user to set and view their alarm on the home screen.
REFLECTION
I really enjoyed seeing how a larger company works and how they use iterative design. My favorite part of the process was receiving feedback from a Fitbit designer at weekly office hours, which I felt was the most valuable part of the whole process. I loved the collaboration between us the students and the designers at Fitbit to make usable and interesting designs.
If I were to do it over again I think I would think about how my sketches would translate into the digital space sooner. What looks good on paper does not always translate to a small watch face. I learned that simpler designs, especially for smaller products, display better. The most important aspect the Fitbit designers stressed was glanceability because first and foremost these are watches not art.