Fitbit Ionic – GPS Smart Watch
I’m extremely proud to introduce my work on Fitbit Ionic, Fitbit's first true smartwatch. As lead designer, I worked with Product, Engineering, Marketing, Executive Leadership, and a team of visual, motion, and ux designers to take our product from concept to launch, and beyond.
Ionic was originally envisioned as a successor to Surge, Fitbit’s first GPS sport watch. However, an increased investment in the smartwatch space—including Fitbit’s acquisition of Pebble in 2016—brought a need to expand our target audience beyond athletes, and to support a 3rd party app development ecosystem.
We made the decision to bring Ionic closer to Blaze (Fitbit’s color-display ‘smart fitness watch’ I had worked on previously). We used a high-resolution version of Blaze’s landscape display and incorporated Blaze’s visual and ux language as the starting point for the design of Ionic.
Fitbit Surge (2015)
Fitbit Blaze (2016)
Fitbit Ionic (2017)
The Fitbit on-wrist experience is based around quick access to four core features: time & date, health stats, notifications, and onboard music.
In addition to core features, customers can personalize their experience by choosing the clockface and apps that most suit their lifestyle.
Ionic incorporates Blaze’s open-icons and vibrant colors. It also takes advantage of its ultra bright high-contrast display, replacing simple gradients and illustrations with full-bleed photography and progress indicators.
The watchface library for Ionic consists of reworked versions of the original Blaze faces, and new faces designed to complement the product design, show off the display, provide a burst of personality, and make health stats clear and accessible.
I managed agency, in-house, and freelance designers to create compelling designs that are appropriate for a digital wrist display, and give customers the Fitbit experience they expect.
We created apps to bring Fitbit features to the wrist, such as exercise tracking, guided training sessions, and meditation, and also high-value utilities including timers, alarms, and weather.
I worked with feature teams to develop their on-wrist experiences, to ensure a finished product that exemplified the core of their experience, while being simple enough to fit into a wristwatch.
As the design system took shape, commonly used objects were converted into generic reusable components. Attributes such as size, color and placement are pre-defined so that in-house and 3rd party designer/developers have fewer decisions to make, and fewer opportunities for mistakes.
Animation was developed to give a spatial sense of navigation and fun bursts of celebration. I had to work closely with engineering to ensure animations were high-quality while staying within extremely limited hardware constraints.
Reminder to Move
Though it’s rarely the sexiest part of a design project, the documentation of Ionic has been extremely important. Ionic specs and reference materials are designed in a generic re-usable format, for direct application to future products.
Ionic is an international product that works across multiple languages, cultures and time zones. I designed the the typographic system to be highly flexible to allow translations of different lengths to wrap, shrink, or marquee as necessary. Multiple intensive sessions were held with our team of linguists to ensure that use of language was intentional, appropriate, and fit within the constraints of a small display.
The Ionic user experience continues to be expanded and refined, as we create better tools for third party developers, and prepare for the advanced capabilities of future Fitbit products. Ionic is already evolving as the Fitbit brand grows and changes, and will be part of further iterations in the future.