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
Implementation
incorporate the new components and provide guidance in StoryBook to make management more effortless.
Presentation
I showed the R&D team how to use Figma and how handoff works, and encouraged feedback and comments in Figma.
Specification
It was decided that specifications for new features will be added in Jira, with the designer responsible for adding them.
Conclusion
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
