Sonicare Breath app

When Philips Sonicare decided to include a connected breath measuring device as part of their oral health offering, they approached The Artificial to help create an inspiring digital experience.

Finding a Metaphor

Finding the Right Metaphor

Bad breath tends to yield unsightly visuals, especially in medical paraphernalia. The challenge was to find a metaphor that was both visually interesting while also hinting at the mechanics of what the product was doing.

At sketch fidelity, we quickly worked through dozens of options to narrow to the most motivating and on-brand visualizations.

Exploring Visual Design Directions

Establishing an Aesthetic for the Interface

Studying Motion

After establishing the metaphor, we explored a handful of design directions, ranging from literal to representative, and flat to dimensional – ensuring that the client had a comprehensive view of possibilities. After many iterations working closely with the internal team, we selected an approach that visualized the particles of breath being sucked into the measuring device.

The result is a design direction that features a gentle animation of particles to mimic the activity occurring in the device. The results screen shows the same particles in a way that signals to the user the quality of their breath, while being sensitive to their privacy.

Structuring the Experience

After establishing the hero experience, we established an interaction model that allowed for an expanding feature set.

We began with the basics – mapping out how the user would move between current results, historic data, and oral health advice. From here, we had a strong structure for future features and iterations.

Extending the Design

Project Artifacts

concept generation

gestural design

interaction model

key scenarios

UI design

design guidelines

flow diagram

motion studies