Case Study
Proprietary
Scaling Harmony Across 50+ Connected Appliances
Info
Role: Design Systems Lead
Scope: Cross-Brand Human-Machine Interface (HMI) Design System
Categories: Refrigerators, Laundry, and KitchenAid Appliances
Design systems are primarily built for digital screens. But what if you has to build one for the physical world? In a place where we see hex codes, pixel values, and vectors icons, how can that be translated into the physical world?
Creating a design system for the physical world meant having to prioritize what would be the most helpful to my team.
Among these appliances, we can see that the Start button has different UI.
UX breakdown
Whirlpool's suite of products
The UX design team is divided by appliance category.
As a designer, I spend so much of my time looking for design patterns and technical specs to inform me what the best implementations and design could be. Essentially, they need a source of truth.
HMW build a design system for...
→ physical products, such as home appliances
→ on digital platforms, such as Figma and Zeroheight?
Outcome
The Massive HMI Audit: Before building the future, I had to catalog the present. I kicked off the project by leading a massive UI/UX audit of over 50 distinct HMI boards across multiple appliance lines.
The Goal: Identify common interaction patterns, recurring UI elements, font scaling behaviors, and button states.
The Insight: We weren't just designing for a responsive web browser; we were designing for custom embedded hardware displays that required pixel-perfect clarity, high accessibility standards, and strict system performance guardrails.
System Architecture Across Brands: A great enterprise design system must be robust enough to maintain a shared DNA, yet flexible enough to express distinct brand identities. I structured the tokens and component libraries to seamlessly scale across:
Whirlpool Core Products: Prioritizing high usability, clear task completion (e.g., setting a washer cycle), and intuitive hierarchy.
KitchenAid Premium Lines: Infusing the brand’s distinct, high-end culinary aesthetic without rebuilding the underlying functional mechanics or interaction architecture.
Creating the Source of Truth: A design system only succeeds if teams actually adopt it. I took ownership of the end-to-end documentation, transforming the audit insights into an interactive component library and style guide. This gave cross-functional teams a single, unambiguous source of truth for everything from touch-target sizes to motion curves for screen transitions.
To build a true, scalable system, we had to account for Human-Machine Interface (HMI) boards—interfaces that face strict hardware constraints, varied screen resolutions, and unique environmental lighting needs (e.g., a bright kitchen vs. a dark laundry room).
Unified the Portfolio: Successfully brought visual and behavioral harmony to over 50+ appliance interfaces, ensuring a consistent user experience whether a consumer is opening a refrigerator or starting a laundry cycle.
Reduced Design & Dev Debt: By defining and documenting standard hardware-compatible UI patterns, we drastically cut down on duplicate design cycles and engineering alignment meetings.
Future-Proofed the Pipeline: Left the global product design team with a highly scalable, living design system framework that dramatically accelerates the time-to-market for future connected appliance launches.
Password protected
For recruiters’ eyes only! 👀