Building a design system for an Open-Source software
Formbricks is an open-source survey suite that helps companies understand their customers through survey data. It has heavily relied on Tailwind CSS for it’s components and styling. However, the distributed library usage and quick launch strategy aren’t conducive to linear product growth. All of these are indicative of the need for a design system.
Role: Design Manager, Product Designer and UX Researcher
Project Duration: 15 weeks
Tools and Methodology: Atomic design principles, Figma, CSS
Name of the Design System: Clay
The need for a Design System
Assessing the Formbricks Website, Github repository and Discord channels the following signals and observations contributed to the primary reason for building a design. Formbricks being an open-source company additionally set-up a github task asking for contributions to help them build a design system.
The perspectives required to build a design system.
A design system is built on the backs of multiple team members each with a specific role that is instrumental through the entire process. The team that worked on Clay followed a lean model. The project was managed and key decisions were guided by a Design Strategist . The entire team used product design skills to build the UI kit and support documentation and content needs. UX Research was quintessential to ensure that the system’s usability is maintained and accessibility remains a prime focus. A front-end engineers perspective was considered for the documentation hand-off and codifying the components.
A quick introduction to the Design System -Clay
The Clay design system has 3 primary principles it is based on namely Clarity, Simplicity and Inclusivity. These principles incorporated the values of Formbricks as an open-source product and at the same time prioritise accessibility above all.
The Clay design system was built after conducting an existing UI Inventory, studying existing design systems to assess reuse and then built basis the guiding principles formulated. The Design system is divided into 3 major parts. The first is Principles that consists of Design principles that have been the foundation of Clay. The second is Foundations, which drives the brand identity and styling of Clay. Finally we have the Components that makes up Clay into a full-fledged and usable system.
What the Design System achieved
The design system reduced redundant and repetitive components, ensured designing new features was faster and easier and most-importantly reduced the hand-off time between developers and designers.