Clay Design System

Clay Design System

Quick Summary

My Role:
Design Manager, Product Designer and UX Researcher

The Team:
Sneh Ganjoo, Marc Molta, Becky Su

Building a Design System for Formbricks with a UI Kit and detailed documentation

Users constantly face usability and accessibility issues with components having multiple definitions.

Users are constantly faced with changing UI components and multiple components that act as signifiers for different functions. Accessibility is a thought in hindsight hence making it challenging for users to use the product.

Users find pricing to be the only reason to stick around, thus having an impact on adoption and retention

User adoption becomes more challenging and retention numbers are difficult to retain. Users see pricing as an Open-source product as the only moat. Formbricks needs to evolve from just being an open-source alternative to
feature-forward product with great usability.

image of roles in Design system

Roles :

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. A Design Strategist and manager is required to manage the entire project and guide key decisions. A product designer helps build the UI kit and support documentation and content needs. A UX Researcher is required to ensure Design System’s usability is maintained and accessibility remains a prime focus. A front-end engineer is required to complete the code by mapping design components to code components. This system did not have a Front – End Developer.

image of process flow

Performing a UI Inventory:

Image of UI inventory
Formbricks UI Inventory

Performing a UI inventory meant taking note of every component and its variants that exist on every page of the product. This helped assess the breadth of the UI we were dealing with and categorise repeatable components across pages. 

Researching an existing Design System:

Formbricks pages made using Twilio’s Paste

Researching an existing design system helped set a precedent with mature design systems like Google’s Material Design and Twilio’s Paste. Additionally, a quick design exercise recreating a few pages with an existing design system like Paste helped assess the need for a design system better. It also helped ensure that we weren’t creating a new design system just purely because of a difference in Branding styles from existing systems.

Building and testing the design system:

Clay Figma UI Kit

Fuelled by an in-depth inventory and research we got down to creating the UI kit with a style guide and component library. Decisions were made prior as to which components that saw repeatability needed to be a part of the library and which could be omitted. The number of variants to have was another critical decision in designing the library. Post v.01 draft of the UI kit it was tested with designers who used the kit to recreate few pages from Formbricks and helped us test for usability and make requisite changes before publishing.

A Quick Introduction to Clay:

Clay is made up of 3 parts the principles, the foundation and the components. The Principles that Clay espouses are Clarity, simplicity and Inclusivity. Clarity helps Clay focus on usability and user needs. Simplicity ensures that we stick to minimalism and keep the interface clean and Inclusivity ensures we build a product which is for every kind of user.The Foundations cover Clay’s Branding and styling guidelines which make for the design tokens and the UI Component library makes the building blocks of every feature/Page within Clay.

Documenting the Design System:

Clay Documentation on Zeroheight

Documenting a design system encourages the dissipation of knowledge and easy adoption. The documentation covered all aspects from a quick getting started to usage and best design practices for every component.

Efficiency through component reduction :

The design system helped reduce components on average by 37% thus saving designers 63% of time. This means a design that earlier took 2 hrs can now be completed in 45 mins.

Improved accessibility:

The Design system helped remove UI issues and improve accessibility of the UI. The buttons with confusing states and bad contrast ratios in the old UI is a prime example of this improvement.

Better collaboration :

The Design system will help improve design-dev handoffs and communication. It will help increase team efficiency by 50% thus creating time for product improvement and business growth.

A design system is incomplete if it isn’t adopted. We ensured awareness and adoption through a pitch by the team that built the system. We ensured that stakeholders were introduced and educated about the system and the documentation.

Clay Pitch