Fitbit Ionic

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.

The Concept

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 Experience

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.

Music

Notifications

The Design

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.

System Icons

App Icons

Watchfaces

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.

Apps

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.

Exercise Selection

Stat Customization

Component Library

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.

Motion

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.

New SMS

Reminder to Move

Documentation

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.

Localization

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 Future

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.


Thanks for visiting!