Creating a Design System for Scalable SaaS Product Development

My contributions to the design system include new components, functional extensions to existing components, and new processes to aid in the design system's maintenance and growth.

A code snippet displays a block of code for developers to copy and paste into their projects. It supports syntax highlighting and copying the code via a button.

Besides creating the component from scratch, I also worked on building a custom color scheme which would best suit the requirements for every product, and would be WCAG compliant. This was one of the places where I could leverage my knowledge of frontend development.

The Rich Text Editor was another custom component I built. It is a flexible and intuitive interface for creating and editing text-based content. It allows users to format text, add links, insert images, and perform various other editing tasks.

This component is ideal for applications such as BrowserStack Test Management where a lot of text content with attachment is authored.

I worked on the foundations of the component, which includes the basic component layout and functionality.

The media player component was first built as a part of App Performance, a product that I worked on from it's very inception to as an enterprise offering

The media player component was first built as a part of App Performance, a product that I worked on from it's very inception to as an enterprise offering

The basic table component was provided by TailwindUI. However, with our clientelle that demands extensive and advanced functionality, we needed to add more features, such as resizing columns & reordering rows.

I conceptualized the interaction design for these components, making sure they are WCAG compliant for keyboard navigation, as required across the organization.

Many products built on the design system are based in analytics, which makes data visualisation is key in conveying value proposition. I researched & documented for data visualisation guidelines to be used throughout the design system, ensuring optimal visuals and WCAG compliance. The documentation also included examples of best practices for data visualisation.

Using seekoss/playroom, I set up an environment to allow internal teams & stakeholders to test the design system and its components directly in the browser, enabling faster prototyping.

In many scenarios, I was able to leverage my knowledge of Typescript to use Figma's API to automate repetitive and extensive tasks.Thanks to a Figma plugins I built specifically for repetitive tasks, we were able to seamlessly deliver these in record time, without sacrificing on the outcome.

Thanks to the new design system, we were able to ship multiple products within a very short period of time. Respond quicker to market demands and customer needs by reducing the time-to-market for new functionality."