designsystem-hero

Design Systems

Design systems create a bridge between designers and developers. They describe the rules, constraints, and principles of the company’s design language. 

Intro

Both Outbrain and Zoominfo have various products. Each product needs to communicate with the other ones and also with the marketing materials.

Each company had a different design tool, methodology and resources so different research and implementations were needed.

outbrain+sketch

First things first – We created a kitchen sink file and tossed all the components (platforms and marketing) and started to match similarities and duplications.

We also got CSS files from dev to match our designs with dev’s.

As a method, we decided to go with the Atomic design mechanism.

  • Built a grocery list of all the different elements.
  • Prioritized and allocated time frames for each section.
  • The framework was built closely with the FE guild, QAed and released.

We used Sketch library to maintain a system while the FE used Storybook for documentation and style guide.

The design system releases were simultaneous with the ongoing features, which made us be more accurate with the decisions we took.

Besides releasing, the system needed maintenance so nothing will be outdated. New styles were added while syncing with all other designers.

atmosphere
zoominfo+figma

With Figma collaboration was handy.

In order to save time, we used a built framework and implemented the design atoms.

While there was no dedicated Front end team to the rescue, implementation was made alongside the planned features. Every component in a new feature was broken down to all its different states while the guidelines were kept.
The UI lead was the watchman for all the different designers while I was in charge of implementing the methodology and constructing the fundamentals of the design system.

Related Projects