FlowEQ Design System

Adapting an existing design system to move fast post-launch

When I joined FlowEQ as the first design hire, multiple MVPs were live and in use.

Limitations:

  • Product is already deployed and in use

  • Development bandwidth to implement is limited

  • The product is large, and I am the sole designer

The Approach

I advocated for adopting a design system. The team was already using MUI’s react component library, so I proposed to adapt the corresponding MUI Figma design system. 

After a low-touch brand refresh, I set about translating and applying that brand to the components. I created color scales and designated color tokens, and adjusted MUI’s rather generous padding to suit our more task and information dense tools. 

To drive adoption of the design system by our dev team, I needed to lower the barrier of entry to the system and Figma in general. I organized our Figma by visually coding our different apps, and made a consistent set of pages with specific purposes inside each file. The default page of each file was titled "Ready for dev".