CHEF iQ Smart Cooker™ Display

Creating a design system for the display allowed us to address both UX/UI consistency issues, as well as improve the code structure.

Scope: Redesign the CHEF iQ Smart Cooker™ Display to improve performance and features, enable adherence to brand guidelines, and establish consistency across UX/UI patterns and interactions.

Role: UX/UI Designer

Collaborators:

• Design Collaborators: Tamer Koseli, Rachel Kamelhar

• Software Collaborators: Murtuza Quaizar, Hian Chew

Interface

The Smart Cooker's display is combination of capacitive touch buttons (fixed), a small LCD Display, and a physical knob for navigating the display UI. The design system for the display had to be created with the physical interface in mind, making sure the digital interface was visually cohesive with the physical interface elements.

Challenges

The user can effect changes on the display through touch-cap buttons, a physical knob (using it like a mouse), and the app, simultaneously. This made it especially important to establish a consistent visual language across all our UI elements, and to develop visual rules for discerning the product’s various forms of input (panel, knob, or app).

Improvements

We created visual cues, like a form of “cursor” to know the hover location of the knob, an “indicator bar” for reinforcing calls to act on the panel interface, and the specific use of color to note app connectivity.

CHEF iQ, Continued