General Motors

Unified Component Libraries

My first task at General Motors was to unify the component libraries into a single cohesive structure. With brands like Cadillac, Chevrolet, Buick, and GMC managed by the same design teams, we ensured a consistent look and feel across all brands. Whether you’re in a Cadillac or a GMC, the components are designed to be nearly identical, with only the styling tailored to match each brand’s identity. We used Sketch as our primary design tool, which made switching between design libraries seamless. By structuring brand libraries consistently, elements like buttons, backgrounds, colors, iconography, and text automatically adapt to the correct styling when switching between brands.

Images from GMC & Chevrolet websites

Auxiliary Display

The auxiliary display is exclusive to the Cadillac product line, designed to give the driver a personalized set of controls. We introduced this screen in the 2021 Cadillac Escalade, featuring a curated set of options to enhance the driving experience. From Trip Information to Head-Up Display and Cluster controls, every feature was developed with the customer in mind, offering a tailored interface that prioritizes driver convenience and customization.

I was tasked with reimagining a new framework to enhance the Auxiliary Displays. To begin, I benchmarked other vehicles on the market with similar displays. The Lucid Air had the most comparable auxiliary display, while the Porsche Taycan offered controls primarily around the screen. I then expanded my research to everyday devices like the Apple Watch, Galaxy Flip, and GoPro—all featuring small screens packed with powerful features. These products became my inspiration, driving the vision for a more versatile and feature-rich Auxiliary Display experience.

The framework quickly evolved from a simple control center in our Cadillac vehicles to a widget-packed, information-rich display that could be expanded across all GM brands. We introduced performance widgets for our high-performance vehicles, off-road tools like tilt angle for our SUVs and trucks, and personalized features like weather, clock, and greetings. The framework also aligned with other frameworks my team was developing, allowing the software to be coded once and deployed across various parts of the vehicle. This flexibility empowered users to customize their experience based on their needs and preferences.

Due to my NDA, I am unfortunately not able to provide my next-gen concepts or work revolving this framework.

Image from Cadillac

Multi-Function Controller (MFC)

The Multi-Function Controller (MFC) was a unique challenge, serving as an alternative interaction method for the all-touch display on Lyriqs and the primary interface for the new Escalade IQ. Every interaction had to be thoughtfully mapped to one of the MFC's functions—Rotate, Tilt, or Select—and integrated into each design component. Through close collaboration with the Google Automotive team, we established key guidelines (now featured in their Rotary Controller documentation) to ensure the MFC offered a seamless and intuitive user experience.

We encountered challenges like different software platforms interpreting a single interaction in various ways, third-party apps not supporting the MFC, and specific screen areas requiring unique interactions. To address this, we built a dedicated section in our Design System outlining the general golden rules for the MFC. For components with specific interactions, we defined those within each component’s section of the system. This approach provided both designers and developers with a clear source of truth, helping them navigate MFC limitations and ensure consistency in our designs.

Images from NetCarShow

Design System Workflow

Our design system was built from the ground up using technologies like NPM, Markdown, and Hugo. Bi-weekly releases were handled manually by the tech leads, requiring them to run commands on their local environments, upload files, and perform testing to ensure the site remained functional. This tedious process was largely due to how our codebase was structured, making each release more time-consuming than necessary.

I initially joined the Design System team to manage the changes from my Framework team. However, the team quickly recognized my technical background, and when an initiative to move our code to GitHub Enterprise arose, I was asked to assist. With GitHub, we streamlined our workflow—now we could simply code and commit, and when ready for bi-weekly releases, GitHub Actions would compile and deploy the pages seamlessly. I played a key role in creating the GitHub Action that automated this process, using workers to split files between documentation and specs, ensuring smooth and automatic releases.