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".