Design System

Project Overview

Innovative OT security (operational technology) risk management platform, provides organizations with a centralized and comprehensive

view of cyber risk in alignment with business priorities and industry regulations to ensure safe, productive, and reliable operations.

I worked on transferring the Sketch Design System to Figma.

Problem Statement

The old design system was cluttered and no one knew what the original component was, so there were a lot of duplications,

making R&D and Product teams frustrated since it took longer to build and develop new designs.

At the beginning of the project, we set the following objectives:

  • Enhance Product and R&D teams' efficiency
  • Organize the components
  • Establish a new framework for designing new features
  • Creating one source of truth

Research Process

It was my first project in this role, so I had to learn about our design system and what needed to be fixed. Furthermore, we had limited
resources and needed to work smart and implement the new design system one step at a time, so this process needed to be defined.

1 | Plan, and Research

Researching best practices

Studying the design systems of well-known companies in the market and how Atomic Design suggests building components.
Additionally, I have read a book on 'Laying the Foundations' which presents guidelines for advocating design systems in businesses,
which helps management understand the importance of investing in design system.

    Create a plan document

    That outlines all the steps that need to be taken and align it with the Head of Design, VP of Product, and VP of R&D to ensure everyone
    is on the same page and prioritizing the components to determine the order in which the DEV team will develop them.

    Pain Points

    Understanding QA, engineers, and product managers' pain points and their suggestions for improvement. Some pain points that came up:

    • Excessive duplication of fonts and components, no one knows what is the right one
    • Sketch files that the PM couldn't access made it difficult to provide continuous feedback, requiring frequent meetings with the designer
    • The frequent updates to Zeplin caused discrepancies with the story, requiring additional QA
    • Delivering prototypes took longer because the designer had to work on three different programs simultaneously

    2 | Establishing the Design System

    Creating the components

    I had to create new components as I could not use the existing ones. During this process, I identified and eliminated the redundant components and fonts.
    I also fixed some issues with the old components. To speed up the development process, I used MUI.

    Defining the workflow in Figma

    setting that each page represents one use case and relevant flows, making it easier to provide feedback and identify errors.

    Documenting guidelines of components

    I collaborated with an engineer to create a concise explanation document for the components and plan their addition to StoryBook.

    3 | Presenting to the team the new workflow


    incorporate the new components and provide guidance in StoryBook to make management more effortless.


    I showed the R&D team how to use Figma and how handoff works, and encouraged feedback and comments in Figma.


    It was decided that specifications for new features will be added in Jira, with the designer responsible for adding them.


    We created the Design System after a long 4-month process, which was challenging to advocate for initially. Nonetheless, defining the system,
    utilizing Figma, and creating a single source of truth saved time for the product team and developers. We aligned the process with creating the
    design system to engage everyone and educate them on its importance and worked together to refine the process and ensure its success.

    One day, a developer told me, "I understand what to do from Figma, so I don't need to ask you any questions. I guess it means the change was good",
    I consider this the greatest compliment I've ever received from an engineer :)

    Next Project

    Risk Management