THE CHALLENGE

Create a design system that would help the design team with version control, as well as transition the team from using photoshop, into a more versatile design tool like Adobe XD.

MY ROLE

As my first project at CNH Industrial, I was tasked with creating and presenting the first design system to be used by CNH Industrial. I was given no design files and no guidelines so I had to figure out quick how to start a design system for a large company.

WHERE TO START?

The first thing I did was ask my product managers and fellow designers if there is a company styleguide I can use, this sketch file is all I received:

I felt relieved at the fact that there is a styleguide with all the colors and gradients already pre-built, now came the hard part, finding all the assets.

CNHi has a huge repository of their working files, but the team is in the middle of a transition from designing in photoshop to Adobe XD. While I was able to get the assets, they were all screenshots and very hard to edit.

AUDITING

Going through the audit of a lot of files (this took a very long time) I was able to see that there are a lot of misused font weights and padding, wrong hover states and warped button radiuses, and there was a lot of assets that were used for one instance. This revealed to me the need for a clean and robust design system that will hopefully eliminate these design inconsistencies.

RESEARCH

I kept asking myself, where do I start and how do I start?  After reading countless articles, I studied the various guidelines and pointers laid out by AirBnb, Apple and Google.

In addition to doing research with major brands, I also sat down and chatted with my peers and developers, to see what they need and what they would benefit from. These are the results:

• Keeping the design systems organized and easy to see
• Keep track of the new implementations and changes to each version
• Faster wireframing and concept testing with premade templates
• Unify all assets to have the same functionalities
• Easier asset access for developers

ATOMIC DESIGN

The foundation of my project is based on the atomic design philosophy. I mainly followed this methodology in creating the design system. I feel that it lends itself well in the creation and organization of a company’s design files.

REMAKING THE ASSETS

The main challenge of converting the screenshots into editable design files is that there are so many states for each different atom. After I catalogued all of the screenshots, I categorized each button and asset into four different states:

Each asset can be categorized into these four different categories. Instead of making a button for each state, I decided to go in the route of components:

THE POWER OF 
COMPONENTS

Instead of creating each state for each button, I instead created components that allow the designer to select which state the button is depending on the use case of the button. This also helps with the version control since this is a cloud file, and pushing any changes to the original cloud file also reflects all components found within all of the company’s XD files.

One component, four different states.

Watch your margins

As evidenced by my audit, I wanted to make sure that the components are given enough padding so that they are consistent when put into designs and prototypes. I added an extra state to each component that I thought would help my fellow designers in placement of the assets.

I wanted to highlight where the margins of the assets should exist and how they can be used in relation to each other.

atoms to cells to tissues

Working from the ground up, the progression of the project was to create entire templates from the atomic design foundation that I built.