My Role
I was responsible for auditing the components to designing them as a library that consists of reusable and customizable components which are used by the designers in the team to create meaningful interactions and interfaces. I worked with the engineers, senior interaction designers, a visual design lead to deploy the project.
Regrettably, owing to the constraints of the NDA, I'm only able to divulge little details about the project's intricacies. However, if you have inquiries concerning my experience or the general approach to such projects, please don't hesitate to reach out via email. I'd be more than happy to provide further insights into my professional background and expertise in this domain.
Clone Linear
Accomplishments
1. Performed an audit of the components across the product to design and implement it in the library.
2. Designed and shipped the first version of the library of components for the product.
3. Componentized the major elements of the product to ship it to interaction designers as a library which improved the productivity of designers.
4. The design system helped in improving the consistency and performance of the product.
5. Conducted education and testing sessions for the designers to use the design system.
Learnings & Takeaways
Creating and managing design system at scale: Learned about a creating a design system, its elements, creating customisable components, distributing the library, assist and train people in using the design system.
Balancing pace and perfection: As it was a fast paced project, there was need to strike the balance between speeding up towards the deadline but also take care of the important details.
Receiving feedback and iterating: Constantly engaging with the team and stakeholders to receive feedback on the constraints, limitations or requirements to iterate or revise the components to build the design system.

Components

Button
For DesignBlocs, we have placed focus on three types of buttons:

1. Regular Buttons
2. Outline Buttons
3. Thick-shadow Buttons
Regular Button
Specifications
Details
Input Fields
Input fields allow users enter flexibleresponses based on the required information. For DesignBlocs, we have placed focus on the following input fields:


1. Text Field
2. Checkbox
3. Radio Button
4. Upload Button
Text Field
Specifications
Button
For DesignBlocs, we have placed focus on three types of buttons:

1. Regular Buttons
2. Outline Buttons
3. Thick-shadow Buttons
Regular Button
Specifications

Style Guide

Typography
Type scale
Typography Tokens
Colour
Hue
Hue refers to the pure pigment of a color, without lightness or darkness. In that respect, hue can be interpreted as the origin of a color. Any one of the six primary and secondary colors is a hue. For example, a base color is a hue.
Shade
Shade refers to how much black is added to a hue. As such, shade darkens a color.
Tint
The opposite of shade, tint refers to how much white is added to a color. As such, tint lightens a color.
Tone
It is a hue with only grey added to or removed from it. Basically, it deals with how light or dark a base color appears.
Color Scheme
How to develop a tonal palette
1. Draw a rectangle on the canvas
2. Select a base color (hue color with hex value) and apply same as a fill property to the rectangle
3. Duplicate the rectangle and place it beside the former.
4. Increase the tint of each new rectangle by clicking the fill color property while keeping the rectangle selected; ensure that the color value is set to Hex in the dialogue box. Then hold down the Shift button (Options for Mac user)and tap the up-arrow key three(3) times.
5. Repeat step 3 to 4 till you get to the 8th rectangle.
6. The 8th rectangle must be a white color.

More Live Projects