Creating a Design System to Improve Accessibility and Customization
MY ROLE
Created UI elements & styling
Developed an organization system
Conducted accessibility audits
Identified color templates
Completed system documentation
‍
RESULTS
Figma UI Kit Formbricks Clay
Documentation on ZeroheightClay Design System
TEAM
3 UX Designers (including Me)
COMPANY
FormbricksAn Experience Management Suite built on the largest open source survey stack worldwide. The system has been designed to help businesses create and customize forms. It aims to simplify this process and improve the efficiency of data collection for organizations.
TOOLS
Figma, ZeroHeight, Google Suite
DURATION
4 months, September - December 2023

PROCESS

Building a design system

First, we deconstructed the website's elements to identify existing issues and created a UI inventory to organize these elements. Next, we defined design principles to develop UI patterns adhering to accessibility guidelines and conducted an accessibility audit to ensure full compliance. Finally, we documented everything in a clear and understandable manner for users to provide feedback and facilitate ongoing improvements.
2 weeks
Consolidated UI Inventory
3 weeks
Research existing design systems
6 weeks
Filter components and build a design system
5 weeks
Document the design system

PROBLEM

Why does Formbricks needs a design system?

As a startup, Formbricks is experiencing both rapid organizational growth and a continuously growing UI component library. To align with their mission of simplifying processes for users, as well as for their own designers and developers, we envision driving success for Formbricks with a comprehensive design system - the Clay Design System.

As a representative Formbricks product, the Clay Design System is characterized by the 3 tenets of the company's brand: clarity, simplicity, and inclusivity. This ensures that diverse users can work with it easily and consistently.

BRAND

Why did we name Formbricks' design system Clay?

Formbricks provides open-source services enabling users to build their own platforms, akin to the bricks used to build houses. Which material can bind bricks strongly together?

Yes, clay! Clay maintains consistency between Formbricks' digital products while maintaining flexibility and providing robust product support. These properties realizes a simple and inclusive design system which brings clarity to Formbricks' designers and engineers.

PROPOSED ROI

What are the benefits of using Clay design system?

APPROACH

Identifying inconsistent components and styles

We used the Atomic Design approach to deconstruct the website into the following elements: atoms, molecules, organisms, templates, and pages. We screenshot from the website and collected them together, which includes fonts, colors, buttons, tables, navigations, cards, and more.
Atoms
Molecules
Organisms
Templates
Pages

1.
Creating an element inventory through website deconstruction

Deconstruct the design system of Formbricks's pre-existing website, then identity inconsistencies in how the resulting elements being used

How many styles have we found?

31 for typography, 27 for color, 13 for icons, 20 for buttons, 17 for cards, and more.

2.
Conduct Accessibility Auditing

Remove elements deemed inaccessible by the WCAG 2.1 accessibility guidelines

COLOR PALETTE

27 colors reduced to 3 main colors, 10 secondary colors and 4 grey tones

We left the colors that are more accessible and fit with the main colors. Sorted out all the colors used on the Formbricks website, then categorized the similar color tones together. Then evaluated their accessibility to find out which colors are more accessible and fit with the other main colors. By doing this, colors reduced from 27 to 17 and were organized into three color groups.
Before
After

Which colors should be removed?

In the original color palette, there were two similar dark grey colors, #455965 and #64748B. To decide which one should be removed, we compared them with other colors in the palette. #455965 is more accessible when paired with Light Grey #F1F5F9. Therefore, #455965 is our final choice.

Balancing aesthetics and accessibility

Formbricks uses a light color theme with one darker accents on select components, such as the "tags". However, we tested these color combinations and discovered that a subset of them didn't pass accessibility rules. Therefore, we adjusted them to enhance accessibility and ensure compliance.

TYPOGRAPHY

Consolidated 31 text styles into 1 title, 3 subheaders, 3 body texts and 1 label

We collected a total of 31 text styles from the website. To establish effective information hierarchy, we consolidated the website's typography into 8 text styles, each with specific yet flexible use cases. This approach enables users to experiment with combinations while maintaining overall consistency.
Before
After

3.
Create a UI Kit

Design a UI kit by utilizing tokens and variants for components and styles

DESIGN TOKENS

Simplify communication between designers and developers

The Clay design system includes design tokens for color and spacing, organized into three levels. This allows designers and developers to work more efficiently when changing the appearance of elements and improve communication.

VARIANTS

Design high-customizable components that offer flexibility to meet various user needs

To meet the diverse needs of Formbricks' users, we designed components with flexibility in mind. We provided several variants and properties for each component so users can find the one that fits their needs best.
Tables
The table component offers column and row options, allowing users to customize their tables with 2 to 4 columns and 1 to 4 rows. Additionally, elements within the table, such as toggle buttons, enable switching between "on" and "off" statuses.
Text Input
Formbricks clients create survey forms with input boxes that vary based on their questions, we designed three different sizes of input boxes: small, medium and large with four properties: default, focused, disabled and filled.

4.
Document the Clay design system

Utilize ZeroHeight and Figma UI Kit to provide organized, intuitive and interactive documentation

USAGE & EXAMPLES

Provide clear guidance on how to implement Clay design system

On ZeroHeight, we provided usage sections to show dos and don'ts for each component and foundational style. This helps users understand the rules efficiently.
Additionally, we showcased some frequently-used examples to help users get started faster.

CONTRIBUTION

The Clay system doesn’t stop here!

To embed Formbricks's open-source spirit into this design system, we created a portal to collect user feedback and enable community contributions. By incorporating these insights into the design process, Clay will continue to grow and improve!

REFLECT

Takeaway
Accessibility as a Rational Tool for Decision Making
‍During the process of building a design system, deciding what to remove and what to combine can be challenging. Using accessibility rules to evaluate each candidate is not only easier but also the correct approach.

Showing and educating users on how to use the system can also be challenging. The key is finding an understandable way to guide, teach, and assist users, which should always be a priority.
Next Steps
Conduct User Testing for Our System
Every product should undergo user testing to identify potential problems. In this project, we conducted just one round of user testing, and through these participant feedback, we made adjustments to our system. User testing is genuinely helpful in enhancing the product. Given more time, we will conduct additional user testing to make Clay design system even better!
© 2024 Liang-Yu Su. All Rights Reserved