Starting a Design System in a Start-up

Ruiwen Tay writes about her practical experience of building a design system in 8 steps. Starting a design system in a start-up can be quite challenging and Ruiwen has articulated well in her article to provide some good insights with references for further readings.


Highlights of the article: She and her team clearly defines design system - a repository of reusable components with clear usage guidelines, shared among designers and developers.


Ruiwen describes her journey through 8 steps as follows:

1. Audit existing components 2. Research on other design systems 3. List out components 4. Plan a timeline 5. Research and discuss components 6. Create design symbols 7. “Design” design system 8. Implement design system


She rightfully comments that "Building a design system is a never-ending challenge as they continue to update and adapt it in order to better suit their organisational needs.


Interested? Read the full article below.


Photo by Ruiwen Tay
Photo by Ruiwen Tay

Design systems are all the rage now and you’ve probably seen this term being thrown around ever so frequently. I was first introduced to the world of *design systems* when we started on our web design system back in January 2019. Working in 99.co with only one other product designer, we had limited resources to dedicate to starting a new project. Still, we deemed a design system important to eliminate existing design inconsistencies and improve future workflows for both designers and developers as the company scales up. That being said, there was a lot we had to work around and get our hands dirty in order to push it forward. Just so you know what you’re getting yourself into, I’ll define what we mean by a design system — a repository of reusable components with clear usage guidelines, shared among designers and developers. It should showcase all existing components with guidelines as to when and how to use each component including ready-to-use code.

Our design system is still a work-in-progress but by documenting this journey, I hope to share our process as well as some useful tips and tools. :-)

Steps
  1. Audit existing components

  2. Research on other design systems

  3. List out components

  4. Plan a timeline

  5. Research and discuss components

  6. Create design symbols

  7. “Design” design system

  8. Implement design system

 

Step 1: Audit existing components

In order to get a bird’s eye view of all the use cases we need to cater to, it is important to audit existing components in our product. Yes, every single component on every page. This is a crucial step albeit a tedious one. For this, we took screenshots and used Trello to organise them.


Trello board with cards in lists, tagged with labels
Trello board with cards in lists, tagged with labels

Each list (top to bottom) represents a page on our website, e.g. Home page. Within each list, different sections of a page are captured as screenshots and organised into cards. Each card is tagged with labels (panel on the right) that represent each component present within the section of the page. The labels are colour coded based on the type of com