CS:Adler

I. Overview

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.

The goal:

Unifying components in a repository
Creating tokens to represent the new brand assets.
Re-skin all components and pages of the platform with new assets.
Making sure the re-skin on all pages fits the intended layout.

II. Process

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.

Nadine Daouk

Adler.

I. Overview

II. Process

III. Handover and next steps