Sonicare Breath app


Philips Sonicare


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

We started by sketching in low-fidelity to find the perfect 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

We explored the metaphor through multiple executions to better understand our clients’ needs.

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.

Studying Motion
Extending the Design

We structured the experience considering current and future requirements.

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.

Project Artifacts


Concept Generation

Gestural Design

Interaction Model

Key Scenarios

Interface Design

Motion Design

Flow Diagram