I optimized the Boll & Branch Design System and developed processes to document changes and improve usability.
Due to a recent site-wide redesign, Boll & Branch's design library had updates to make in order to match Production and its phased rollouts. We not only wanted to encourage use of the design system amongst 6 designers (Marketing, Email, Web) but to also use it to close the design and engineering gap. Working directly with the Digital Design Director, I suggested the following:
Documentation
Previously, there was no clear process for tracking which aspects of the Design Library required updates or documentation. To address this, I systematically organized hundreds of Figma comments into a structured spreadsheet, allowing me to categorize and identify unresolved tasks. I also compiled a comprehensive inventory of components and modules to compare the latest design iterations with the current engineering codebase. To ensure ongoing alignment, I established a bi-weekly review process to prioritize updates.
Naming & build structure
A new naming convention was needed to provide designers with clear and consistent references. To understand this better, I ran interviews with designers to understand how they navigated the library—how they searched for components, whether naming conventions were intuitive, and how updates were communicated. I then proposed a standardized build and naming structure to streamline property types, distinguishing between width-variant rules and specific mobile and desktop components. Additionally, I incorporated descriptive copy for each component to clarify its full capabilities and enhance usability.
Inputs & Forms
This is an example of refining the Design Library to align with UI/UX standards while documenting discrepancies between the library and the live website. We took the opportunity to enhance the UI/UX, incorporating elements from the site-wide redesign. During this process, I also identified the need for new components, such as a file upload feature and a date picker.
