Willow UI Design System

As Broadlume began acquiring more companies and their products, maintaining common styles, content, and interactions across its products became a major struggle for the engineering and product teams. This led to inefficient and redundant code, oversized Jira tickets, and backed-up workloads. In congruency with created an overarching application to house all of its products, Willow UI, the Broadlume Design System, was born.

Technology Used:

Figma, Storybook, HTML, Sass, Typescript, React, Chromatic

My Role:

As the Senior UI/UX Designer, I cataloged all repeating elements throughout Broadlume's products to start building out the company's first design system. As the key force behind the creation of the project, I knew the impact it would have on the efficiency and consistency of our product – from both a design and development standpoint. After creating the list of components and their details, I began creating them as reusable components in our team's Figma library to give our team the ability to create rapid prototypes for new projects in minutes. From there, I collaborated with a full-stack engineer to create the developer team's new best friend, Willow UI, a Storybook-based design system for all Broadlume products.

The Designs:

All designs were built in Figma and translated into stories for Storybook using Sass, React, TypeScript, and HTML. These are examples of components that were ultimately built out for the design system application. Additional images are provided here to show the attributing styles for certain components.

Figma Design System Components

Components with Styling Details

Willow-UI Design System in Storybook

Note: This project was in progress at the time and does not show the intended final result.

↑Back to Top