Sirius Design System

Sirius Design System Example
My Role
Results

Created fundamental guidelines and design components
Collaborated with engineers with quality assurance and functionality
Audited existing design components

7 foundation guidelines
15 components

Background

We created Sirius Design System to guide and standardize our designs. Our design team worked on individual Glints products, striving for a consistent experience across all products. Additionally, we collaborated with engineering to publish components on Storybook for efficient implementation and testing.

Sirius Design System Example

Process

The design team discussed current features and conducted an audit of existing components to identify areas for improvement. We also created a roadmap outlining component assignments and deadlines to drive the project forward.

Number oneNumber two

After planning the contents of our initial design system, we began designing the guidelines and components.

Number three

After finalizing design and foundation guidelines, we collaborated with engineering to test and implement component functionalities. Often, new components are immediately implemented in real features, allowing for faster testing.

Number four

For the final step of our process, we publish our components on Zeplin for documentation and our engineers push them to Storybook immediately. We conduct further quality assurance tests before deploying new features. Once they have passed, we deploy the new feature on our website.

Sirius Design System Example

As a result, our process ensures that new components are implemented in real features, allowing for faster testing, and ultimately deploying new features on our website.

Search suggestions appear slow and are not intuitive to user’s needs

We discovered that when a user types a keyword, the suggestions were rather slow in appearing. This is because we show suggestions under a job title, company and location. We also saw that the list of suggestions that appear are unrelated to the keyword that the user typed. For example if the user types "J”, other words without the letter ‘J’ also appear in the suggestion list.

Work Image