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.

A challenging topic

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.

Philips Sonicare Breath
Philips Sonicare Breath


A clear direction

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

From here, we established a basic interaction model that allowed for an expanding feature set. We mapped out how things such as historic data and oral health advice would be presented to the user, and are now working on expanding the flow. We look forward to sharing final results soon.

Philips Sonicare Breath

project artifacts

concept generation

gestural design

interaction model

key scenarios

UI design

design guidelines

flow diagram

motion studies