High-fidelity interactive components were handed off to the front end dev team with documentation guidelines on color, states, patterns, micro-interaction details, etc.
During my time at the startup, I was responsible for updating the design system. I led the design efforts for three major components - Tag, Filter/Sort, and Form, creating over 300 variants in total. All of them now live in the company's design system library, ready to be deployed. I also documented the usage guidelines for each component, which serve as a reference for the design and development teams.
Small, interactive labels used to visually group, classify, or filter criteria.
Used to set parameters on datasets.
A set of components that help to systematically layout and build forms.
With the themes in mind, the first thing I did was to conduct competitive analysis on established design systems that share similar visual language. A few systems that I looked into included the Dell Design System, Atlassian Design System, and Goldman Sachs Design System.
While the company had already established a design system, I was tasked with addressing UI design issues in the current components, focusing on accessibility, adoptability, and consistency. I spent most of my time examining three components - Tag, Filter/Sort, and Form.
Going through the existing designs, I noticed multiple places where the same component had different styles or components were created from scratch despite that they were already created in the design system.
1. 11 out of 12 didn’t pass the WCAG AAA contrast standard.
2. There were more colors than needed for use cases.
3. Only 'rest' state was available.
%20(1).png)
1. 30 out of 30 pass the WCAG AAA contrast standard.
2. More colors than needed for use cases.
3. 5 states(rest, focus, hover, press & inactive) available.
%20(1).png)
I also designed different types of tags using Variants & Instances.
1. Horizontal layout could potentially overcrowd the UI.
2. There was no visual hierarchy.
3. Added filters couldn't be edited.
%20(1).png)
1. Vertical layout allows for more flexibility.
2. Differentiated styles for better visual hierarchy.
3. Added filters are editable.
.png)
I also created necessary components used in 'Filter' such as 'date picker'.
1. Paddings were inconsistent.
2. Top and bottom were not aligned.
3. Different spacings were present.
.png)
1. Paddings are adjusted to look visually balanced.
2. Top and bottom are aligned.
3. Spacings are consistent across the form.
%20(1).png)
I also added more layouts, label placements, and status indications to the 'Form' component.
1. Majority of the components in the design system didn't have usage guidelines.
2. The ones with documentations were too general and did not mention best practices.
.png)
1. Interactive prototypes are provided to ensure understanding.
2. Visual usage guidelines are provided.
3. Variants of the same component now are under one component.
.png)
I also designed different types of tags using Variants.
1. For some components, because there were no documents on how to use them in context, designers often disregarded or misused the design system.
.png)
1. Along with the information on dimensions, spacing, colors, etc, I also privided examples on how to use the components in context.
.png)
I also put together a detailed document for educational purposes.
Besides revamping the design of three major components in the design system, I also created a comprehensive list of variants to account for different states and use cases. Animations and interactive prototypes are also included.
As a designer who can code, in the absence of close collaboration with developers, I leveraged both my design experience and understanding of front-end concepts to create documentation that is oriented to both designers and engineers.
Overall, I enjoyed my experience at the startup. It was fast-paced, and I was surprised to see the significant impact even an intern can have on a small team. I am grateful for the introduction and exposure to design systems, though I wish I could have collaborated more with front-end developers, as those positions were outsourced overseas.