Design System & Libraries

When I joined General Motors, I was immediately tasked with unifying the component libraries into a cohesive structure. With multiple brands under the same umbrella—Cadillac, Chevrolet, Buick, GMC, and Hummer—maintaining a consistent look and feel was essential. Whether a user was in a Cadillac or a GMC, they would interact with familiar components, such as Dialogs and Alerts, each tailored to reflect its brand’s unique identity.

Team

• 2 - Designers
• 4 - Brand Leads
• 100+ - Domain Owners

My Objectives

• Standardized component libraries for a unified, multi-brand design system.
• Refactored component linkage to ensure consistency across brands.
• Automated Design System releases, reducing deployment time by 83%.
• Developed GitHub Actions workflows for seamless bi-weekly updates.
• Led migration of codebase to GitHub Enterprise for efficiency.

At General Motors, the design workflow relied on Sketch as the primary tool, complemented by the Sympli plugin for developer handoffs. However, due to tight timelines for brand deliverables, component libraries and individual domain files were not consistently maintained. I initially led a team of two, which later expanded to four “Cleanup” Designers, tasked with restoring consistency across all brand files—including GMC, Cadillac, Buick, Chevrolet, and Hummer. As we audited the libraries, we uncovered numerous broken linkages, resulting in inconsistencies in colors, typography, and overall styling. To resolve this, we implemented a structured component library system, ensuring that each brand's assets were properly linked, visually cohesive, and seamlessly adaptable across platforms.

We streamlined this process by creating a "Component Library" for each brand (Cadillac, Chevrolet, Buick, GMC, and Hummer). These libraries housed all brand colors, typography, and shared UI elements. To prevent disruption, iconography was stored separately, allowing updates without affecting the component library's workflow. Additionally, each brand's UI was divided into domain-specific files, such as Audio, Auto Park Assist, and Navigation, to maintain modularity.

With the component library structure finalized, my technical expertise allowed me to support the Design System team in optimizing how updates were delivered. Our Design System was built using NPM, Markdown, and Hugo, but its manual bi-weekly release process was inefficient. Tech leads had to run commands, upload files, and perform testing manually, taking up 12 hours and three resources per release.

Leveraging GitHub Actions, I implemented an automated deployment system, reducing release time from 12 hours to just 2 hours, with only a single tech lead required. This streamlined workflow allowed updates to be consolidated and deployed seamlessly in the background.

Although I originally joined the Design System team to manage changes from my Framework team, my technical background led to my involvement in migrating our codebase to GitHub Enterprise. This transition eliminated tedious manual steps, allowing designers to simply code, commit, and push changes. With GitHub Actions automating deployments, the system could now split files between documentation and specs, ensuring smooth and efficient releases across the organization.

Even though a structure was in place, the combination of legacy technologies and tight deadlines made maintaining consistency a challenge. After my Cleanup Team reorganized files and rebuilt numerous components, we saw a 25% reduction in tickets related to design inconsistencies. This freed up both designers and developers to focus on building new features and enhancing designs, rather than troubleshooting misaligned components.

On the Design System side, the implementation of automation pipelines led to an 83% reduction in deployment time. What once required three resources was now streamlined to a single tech lead, who could deploy updates with one simple command, while GitHub Actions handled the entire process in the background.

This experience gave me end-to-end exposure to the entire component lifecycle—from initial design to final documentation and implementation. This deep understanding proved invaluable in my other work at General Motors, allowing me to navigate complex systems efficiently and excel in my role. 🚀