Design System

Building the system for the DevOps product

role
UX Designer
team
Developers
period
Mar-May 2021
image of the design system

BACKGROUND

Codegiant is a DevOps web-based tool designed for software development teams, with issue tracking, hosted Git repositories, continuous integration and documentation and more all in one single platform. Focusing on how to streamline the developer experience and remove any friction in the development process. Developers should be able to code, deploy and manage their projects in one simple experience.
It has become a huge and complex software in the past year, with all the inconsistent components and design, we decided to build a design system for Codegiant to solve the problem.


WORKFLOW
  1. Bootstrap library : the product was built on bootstrap in the first place, so I dug deep in the components library and learned the structure of the bootstrap Scss.

  2. Break down components : using the Atomic Design Methodology, also did some research on the Component Driven User Interfaces in order to make a component list.

  3. Building the library in figma : referenced multiple design systems including Pajamas, Atlasssian, Carbon, Wix etc. and rebuilt the components library using Figma.

  4. Test and Document in Figma : went through all the components to test them out and made the documentation for both designers and developers.

  5. Storybook : last but not least, we used Storybook to build, document, and test UIs.

DESIGN DETAILS

The Foundation of the component library includes : Color, Typography, Grid system, Spacing, Shadow, Icon used

image of the color

Color

image of the font and icons

Typography and Icons

image of the buttons and navs

Button and Nav

image of the rows and heads

Row and Head


USAGE GUIDE

In the last step, we made a document for the component usage guide in order to make sure the components are defined and reusable in each scenario. Since we operated as a lean and small team, it’s more efficient to have the developers comment down their thoughts and discuss in the document.

Not only did this document solve the problem of the inconsistency throughout the app, it also fastened the development process, developers can follow the guide and use the right components more efficiently.