Someone recently asked me how I make impact on an established design system. Here's a before and after of how I updated one of the most common atoms in the Trellis Design System at Lacework.

💔 BEFORE

1️⃣ Didn’t account for all use cases.

• Lack of focus state and destructive button variant

• The opacity of button fills for disabled state pushed it out of compliance with WCAG standards when used on different backgrounds

• Missing documentation for block button

• Designers had to detach the button to include right icon variant

• Need for a smaller button size

2️⃣ Included unnecessary or unrelated use cases.

• Large button size (40px) was never used

• Other components were buried inside button (link, icon button) making it difficult for designers to easily locate them in the library

3️⃣ The existing version made more work for teams to identify variant and type.

• While looking at the component set, it’s not immediately apparent what each interactive state is or variant type at a glance.

• Designers have to either select each button and review the menu or go back and forth between the guideline and the component set sheet.

💜 AFTER

1️⃣ Updated component to cover more use cases.

• I added the destructive variant and ability to set left or right icon placement.

• Introduction of focus state in the button component (and across the rest of the library) served as specs for implementing keyboard navigation across ~70% of prod.

• New color tokens were based on solid color values which improved accessibility of disabled button states.

2️⃣ Removed or relocated unrelated components.

• I relocated link and icon button to separate pages and created specs and docs specifically for those use cases.

• The old large size was deprecated and an additional small size was introduced.

3️⃣ Optimized component documentation.

• I established a new component documentation template that standardized guideline docs across the library.
• Included labels for the component set sheet to ease identification of variant/type, link to react component library, status label, etc.

4️⃣ Incorporated rebrand styles along the way.

• New pill shaped buttons per rebrand.
• Adopted color and text Figma variables (tokens) to replace styles for more consistency and future scalability.

This is just one example of the many ways I made our system a more accessible, reliable and efficient resource for our team.