MSPbots.ai is a Chicago-based, venture-backed SaaS platform built for IT managed service providers. It offers process automation, business intelligence dashboards, and AI-powered tools that help MSPs streamline operations and improve team visibility. The company operates under an AI-first culture and was recognized on CRN's 2024 AI 100 list for AI in software.

The existing design system wasn't really a design system; it was a personal file built by one designer, navigable by one designer. Some components in the system were mostly orchestrated by the Dev Team, and sometimes don't follow the handover files provided by the Design Team.

The deeper issue, though, is that the institutional knowledge should be shareable; hence, a more fleshed-out Design System.

The project was formally scoped as three phases:

Component Documentation

Component Enhancement

Legacy Product UI Application

Though this entire task was constantly pushed as a background task alongside higher-priority assignments throughout the year.

I reviewed the Legacy App page by page so I could check to understand what was contained. The audit surfaced:

UI inconsistencies

Undocumented component states; and

Rendered components that differed depending if the user was on admin view or tenant view.

Early in the project, the official Element Plus Figma library was discovered in the Figma community. This was a meaningful find that changed the production, as Nora and I did not have to do most components from scratch. We were able to extract the majority of the basic components, primitive, and token variables.

Each basic component was documented with its variant properties, design tokens, and applicable states, building a foundation that matched the actual Legacy Product rather than a theoretical or aspirational component set.

Discrepancies between the design system and the real product were identified through a page-by-page audit of the Legacy App.

A late-stage discovery revealed that the table component rendered completely differently depending on whether the user was an admin or a client. These were not minor style differences, but were substantially different UI patterns altogether.

The differences were surfaced, documented, and resolved as a feature enhancement.

Phase 1 delivered a complete documentation foundation.

The collaboration I had with Nora was effective throughout the whole project as we had weekly catch-up meetings. It kept us accountable, and her sharing contexts on each component made sure we both didn't hit a wall.

I’d push for a vibe-coded internal website from the start, and given what I know now, I would have taken on the front-end build myself. A website would have served the PM audience, the developer audience, and the copy-paste use case in ways a Figma file structurally cannot. I'd also follow the Atomic Design structure over Element Plus' documentation hierarchy. The project was building an internal system for a specific product, and organizing it around that product's actual component relationships would have produced something more useful long-term than mirroring an external library's structure.