GPC Design System

Project Lead UI/UX Designer | Sketch, Invision, Abstract, Figma

One of the most fun and complex projects I’ve worked on is a corporate design system. Design systems improve consistency across platforms, build more-intuitive products, and allow designers to focus on addressing bigger problems. This design system will be used across many different external and internal applications across multiple sub brands. I lead the creation of the Genuine Parts Company Design System at GPC in order to enhance our product design process, expediate workflow, and to ensure consistency across GPC.

Overview

To create and implement a design language with reusable components to work cohesive and efficiently across GPC Enterprise. This project started back in 2019 when design systems became a popular topic among the design community. That being said, we had to work diligently on an executive proposal in order to get buy in from the business. From there we conducted customer research, UI best practices, UX best practices, and reduce the time spent reinventing the wheel on design solutions. This project has evolved so much over the years and continues to grow.

The Challenge

Getting full support from the business as it’s easy to question the “why” of design system thinking. For starters, brand identity is key especially for a Fortune 200 company recognized across the globe. Prior to the design system, multiple digital channels had their own look and feel. Essentially, we had to create a design system library from the ground up.

Business Goals

To unify our products, increased production rate, improve information architecture, usability, and reduce product complexity.

My Role

This project started in late 2018 and this required reading, researching, and taking in a bunch of information to understand how other companies approach design system thinking. In early 2019, I started to design components, create guidelines, and document best practices along the way. By 2020, we had a great foundation to the start of something big. From there we expanded on components and began implementation across multiple digital channels. In 2021, I became the Project Lead UI/UX Designer where I managed two other designers to further push the design system thinking. We also switched from building the design system in Sketch to Figma, which increased production by 4x under my guidance.

Elements of Design Language

Typography and color are the backbone to great UI design. We made high-impact choices on font and color, with keeping ADA Compliance in mind.

Design, Iterate, and Evolution

Once we had a fluent design language we designed modular UI components that worked a holistic system. This was a collaborative, laborious, and often fun part of the process. As you will see below, some of the components and early thinking have been updated and expanded upon.

Figma Implementation

Below shows how the early groundwork and foundation started in 2019 evolved into the 2021 era. Please note I can’t take credit for each Figma component and variant made. However with the early rules and documentation created in 2019, multiple designers used what we started as reference. No worries though, I still have all of the knowledge myself and know how to create components, variants, and utilize auto layout!

Figma Variants

This video shows the 2021 evolution of how the design system is being used across multiple products. These design components are responsive, developer-friendly, and increases workflow.

Results

I’m very proud to see this project evolve over time. Although Design Systems are never “finished” there are a ton of hours, research, and critical thinking that went into the future of Genuine Parts Company digital channels. We are now designing products two or three times as fast and senior management has been giving a lot of kudos lately. I can’t help but to be proud and smile.