Philips Sonicare was adding a connected breath-measuring device as part of their oral health offering. The Artificial was brought in to design how new data would be communicated as well as how new features would be integrated.
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.
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.
We structured the experience considering current and future requirements.
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.
two designers, creative director, technologist