Quantum Design System

Due to the level of confidentiality, I have omitted specific details regarding my process and designs. Any information in this case study is my own and does not necessarily reflect the views of General Motors or MRM. Please reach out directly to learn more.

About Quantum

The Quantum design system is a unified set of reusable components, patterns, and applications. The system allows GM’s family of brands to speak a common language to a broad audience. It provides a strong foundation for GM to efficiently build and scale web experiences across its vast global product landscape. Some brands using the platform for their web products include Chevrolet, GMC, Buick, Cadillac, and others.

Team and my role

I am currently one of two UX leads. At its core, my role is to be a faciliator and drive design outcomes through alignment-seeking conversations in a cross-functional team of 70+ people. I am involved in the end-to-end design process and beyond: ideation and conception, requirements gathering, interaction design, development, testing, launch, and post production. I wear different hats depending on the stage of the design process.

System Architecture

Quantum consists of a robust component library that covers a variety of interface needs.

Responsive and fluid

reponsive image

Quantum focuses on three key viewport widths - small, medium, and large. This simplifies code and design, while optimizing the UI on all screen sizes and devices.

Custom brand styling and storytelling

reponsive image
reponsive image

Product teams can layer custom brand styling on top of the system’s component library and applications - base font sizes, typography, color, grid layout spacing. Brands can also create custom content patterns to build out experiences that tell unique brand stories to their customers.

Extending across platforms

reponsive image

The system supports reuse of foundational components in integrated applications not native to the design system.

Scaling globally

reponsive image

Quantum’s base system was originally built for the US markets. It has now become the base from which all global teams reference to construct new or redesign experiences. The system supports internationalization requirements and localization to meet the needs of GM’s global audience.

User benefits

An experience is easier to navigate when it feels familiar. Quantum’s consistent controls and patterns allow brands to speak a common language to their users. This consistency helps users navigate and bounce between the different GM web properties with more intuition and less friction.

Team benefits

The design system gives product teams a common language to work with. This allows for clearer communication and work efficiency in multi-disciplinary teams of designers, IT, business stakeholders, and PMs. As more product teams come onto the platform, Quantum continues on a path of growth and innovation to meet unique business and customer needs.

Business impact

The design system allows GM to launch new products and experiences with time and cost saving efficiences. At a glance, Quantum currently spans 8 brands and 20+ global markets. Being some of the biggest players in the automotive industry, the Chevrolet, GMC, Buick,Cadillac, ACDelco, and GM Fleet brand sites - all powered by Quantum - is used by millions of customers around the world.

I wear different hats in the end-to-end design process

I am heads up 🙋

• Designing better together by facilitating biweekly workshops with cross-functional partners in a collaborative fashion

• Thinking in systems to get ahead of any potential downstream effects of large and small changes to see how it fits into the larger GM ecosystem, across channels, touchpoints, and platforms

• Working with engineers to properly spec and QA new and existing components, features, and frameworks to meet the needs of customers and business

• Refining accessibility requirements for Quantum’s components and styles to steer developers and visual designers to accessible solutions

• Educating and spreading awareness of the Quantum design system to new product teams, assisting with adoption and usage.

• User testing and validating hypothesized concepts to learn and empower the spirit of iteration

I am heads down 👩‍💻

• Ideating and prototyping to make abstract ideas tangible for the cross-functional team to react to, sparking new and better solutions

• Creating and maintaining system documentation - detailed dev specs and a version-controlled multi-brand, multi-language and market frontend style guide with developers and UI designers

alt desc

Here's a glimpse into some things I've been working on in the Quantum space

• A global navigation that streamlines a SSO experience across GM’s major brands and e-commerce properties touchpoints

• An interactive map component that helps EV owners find charging stations along their route

• A vehicle reservation web app that allows customers to place a deposit on an upcoming vehicle, along with a dealer-facing version to manage/launch reservation programs

• A robust scalable content hub for vehicle support and help material

In closing...

Working in a such a large-scale design system has taught me that design is never done. I've learned that while good, holistic design embraces failing fast, it's remiss to assume building relationships and trust with cross-functional teams happens just as fast. The combination of a fail-fast mindset and continuous commitment to creating a collaborative environment is what I'd like to think allows Quantum keep doing what it does: empower product teams to build meaningful relationships with their customers.

Working in a highly collaborative setting also taught me that good, meaningful design can not and does not exist in a vacuum. There will always be constraints. Being a part of the Quantum design system team has taught me what it means to embrace the good challenge of designing what's best for the end user while balancing the constraints of tech and business.

Working in this setting has taught me the importance of knowing when and how to adapt the standard design process to work for the benefit of the team, and ultimately the user. I've learned that the design process is most successful when it can be molded to the context of the problem at hand so that it brings clarity and sparks dialogue.

Quantum is a good reminder to me that nothing worthwhile happens overnight, but with time and good collaborative effort, you can create something pretty impactful.