Design System Evolution


Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.

Alex Schlieifer, Airbnb

This project is an ongoing project. I have been working on refining ONYX design system. Made a few mistakes and had many learnings on the way.
My Key learnings

  • Make the design system flexible
  • Make it a team project
  • Use existing design systems

To date, we have gone through three design style changes over four years. We were on Adobe XD and transitioned to Figma last year.

Below is a summary of the different approaches and key learnings.

Style Guide version 1:

Initially we had a tight deadline of delivering a product to get the funding for our project. We started with a very basic style guide.

  1. Colors – Based on the brand guide I selected Primary, Secondary, Alert colors. Plus selected a link blue, 3 shades of gray.
  2. Font – Defined 6 Header styles, Body styles and link and warning text.

I defined and used the style of angular material to have consistent styles across the pages. I build a basic page in adobe and referred to the styles.

What worked

Having a small basic style guide helped me and the front end dev communicate the basic styles that we were using and use common components and we were able to complete the project before time.

Challenge

As we started growing in the project the team was growing and this basic document was not efficient anymore. I did not have basic assets for desiging mockups and we were loosing consistency across the ERP. As we started designing different portals for different personas we needed better system.

Style Guide version 2

Year two and having received the funding to expand, we worked on redesigning the product. We were even given the task of extending ONYX for a subsidiary company Gainbridge too. We were still using Adobe and team had expanded. I took up the task of first laying down the new style guidelines. We referred Google Material and Angular material to prepare the ONYX guideline

Started with new color scheme

And then built a Style Guide for ONYX for all UI elements

Made a similar guide for Gainbridge. Started with the color selection

Worked on the styles for each UI elements.

What worked

We had a centralized reference documents on Adobe. We had this on confluence for the developers to reference. We used the same elements and names as style guide and added them in the adobe files. We shared files in dev mode to get the consistency going.

Challenges

The styles were in a central file but it was hard to copy the style sheets every time we developed a feature and styles would change feature to feature. Style guides and style sheets in angular sync was not happening as there was not a dedicated resource to enable this. Designers were having challenges with adobe. Two designers could not work on one file together.