The design system of Faculty Platform
Faculty went through a rebrand and it was crucial to prepare a design system to make the change as smooth as possible for product and for the entire marketing materials.
The platform was at very early stages, and I was trying to create a design system slowly. With the rebrand launch date in place I had to quickly come up with a better strategy to implement the design system.
To prepare for this, the head front end and myself went to a 3 day crash workshop for design and development in design systems. I started with a study of the big 3 in design systems: Typography, Color and Icons.
For typography I gathered all the font styles that were being used and filtered out the ones that did not add any value to designs. I then set 5 styles to be used for designs.
For the colors, I spend time studying accessibility and functionality of each color to set them in tokens.
The Icons were clearly designed by different people because they were not consistent. To be pragmatic, I only changed the major icons to look from the same family and made sure to keep in the design system road map the redesign of the rest of the icons.
For the components, I combined similar ones to study their composition and group them in categories. This also allowed me to pick up and study design patterns and layouts that were existing in the product and needed some improvement.
At this stage, agreeing on terminology was crucial. We spend time between design and front end to make sure we are all using the same lingo.
I conducted a feedback session (As seen below) with the product team and the leadership team. This introduced the rebrand to the front end and backend.
Once the design system was more solid a design perspective, I paired up with the front end to start implementing tokens into our repository.
Today, I am responsible for making sure that the components in Figma reflect the tokens in the repository.
I also create new components for designers to be used in demos. If they are reusable components I communicate this to the front end for implemented.