UI/UX Design | Digital Design System
Whirlpool Portfolio Design System
I helped build a design system with reusable components and clear standards, enabling our client's team to efficiently create high-quality, scalable digital experiences.
DATE 2022-2023
Agency Aisle Rocket Studios
Client Whirlpool, Maytag, KitchenAid
Project Overview
Challenge
Create a single design source to help fix inconsistencies across all sites, as well as making it more scalable and efficient.
Solution
Centralized, organized and governed reusable design patterns that satisfied use cases across the client’s portfolio.
Site Links
Role
Senior Digital Designer
Deliverables
Design System
Component Library
Tools
Figma
Adobe Experience Manager (AEM)
Jira, Confluence
Atomic Design Principles
We kicked things off by using atomic design as our guiding methodology for creating these design systems, starting with each brand's core elements like iconography, colors, and typography.
Once we nailed down the brand’s atoms, we had fun assembling their molecules—things like buttons, content cards, tabs, and more.
Design for Consistency
Before integrating the new standards into our client's CMS, Adobe Experience Manager (AEM), we meticulously identified and addressed inconsistencies across their portfolio sites.
With all the details in hand, we collaborated with our Development Team to implement these updates across all AEM components. This led to the second phase of the project: updating all components to ensure AEM authors could easily use them, regardless of their experience level with AEM.
Our goal was to enhance authoring capabilities to deliver brand-consistent experiences. Updating the components to Adobe’s new Coral UI kit was an exciting process. We improved component taxonomy and added a dozen new features, bug fixes, and inputs, resulting in a significantly better user experience from an author's perspective.
Some examples are the following:
Consistent 3-tabbed menu
Theming system
Light, Dark, Offset and more—Authors can tranform an entire component’s design with a single-click dropdown.
