Crafting a reusable design library

Our client Vector needed new builds for both their SaaS product and marketing site. We knew as a company that we weren't working as efficiently as we could be, and so the goal of this project was to deliver a new solution for the client while improving our own efficiencies.

We noticed many patterns emerge across our projects, especially within the design and development teams. If we were using a company-wide UI kit as a base for all our projects, we wouldn't have to start over from scratch each time. Every project is going to have buttons, cards, content blocks, etc. It was time we weren't reinventing the wheel each time.

Using the prototype for Vector's new designs, I conducted a component audit to serve as the basis of our new reusable component library in StorybookJS. We used Material UI as a starting point and built a TSX React component library following an atomic structure. This gave our client a way to easily view our progress, see how components can be put together, and the different states and styles that can be applied. Of course, some components built were complex and custom for specific user needs, but overall this also gave us a base to significantly reduce our start time for future projects. Having a reusable component library will help make new projects an estimated ~25% more efficient.