Case Study
Architecting a Scalable MUI Design System for Enterprise SaaS
Product Designer - Stratly
Nov, 2023
The Context & The Problem
Stratly is an enterprise B2B fundraising and financial data platform that helps nonprofits in the U.S. and Canada grow, manage operations, and track donations. Before 2023, the platform relied on an in-house UI library built entirely by developers without design input. The interface was rigid, visually outdated, and lacked a unified design system, resulting in inconsistent flows and old component patterns.
My goal was to audit the entire platform and migrate it to a structured, accessible design system to speed up development and unify the user experience. Alongside the head of engineering, I chose MUI (Material-UI) for its customization capabilities, strong mobile responsiveness, and out-of-the-box accessibility. I also proposed a complete rewrite of the platform's information architecture and navigation.
My Role & The Scope
I worked as the sole designer leading the initial 0-to-1 MUI adoption, system governance, and architectural strategy. My objective was to audit the legacy platform and migrate it to a structured, accessible design system to speed up development and unify the enterprise user experience.
This case study focuses strictly on the foundational architectural migration and component mapping.
Phase 1: The Audit & Mapping
I started the process with a deep UX audit, aligning the product with our core business goals. I interviewed users across four distinct types and mapped out their flows, deciding to prioritize the admin experience. Because the platform had no existing analytical data, I factored a Mixpanel integration into the roadmap to capture future usage metrics. I also ran a full accessibility evaluation, documenting severe existing issues to fix during the MUI migration. From there, I visually audited the legacy developer components and mapped them directly to their standard MUI equivalents.
Stratly Old Nav
Recommended Nav System
Phase 2: Configuring the MUI Grid
Stratly handles dense financial data, requiring a highly structured layout approach. I configured the MUI Grid to support complex, data-heavy workflows across the platform. I defined specific responsive breakpoints for dashboards, activity logs, and nested permission tables. This ensured that as users moved from desktop to mobile screens, the data hierarchy remained clear and readable without breaking the layout. By setting strict grid columns, margins, and padding rules, I gave the engineering team a predictable framework to build against.
MUI Grid Implementation On A Dashboard Design
Phase 3: Dev Handoff & System Governance
To ensure engineers built the UI accurately, I created a high-fidelity spec library in Figma. I documented design tokens, annotated component states, and established clear WCAG accessibility guidelines for color contrast and typography. later I also integrated AI tools like Claude and Cursor into my daily workflow to automate the generation of component documentation, UI copy, and error states. This specific AI integration cut my documentation time by 70% and reduced early design exploration cycles by over 60%, allowing me to focus heavily on system architecture and governance.
A few components from the custom mUI based design system
typography scale tokens table
Engineering Workflow & Handoff
To bridge the gap between design and development, I established a strict operational cadence with the engineering team. I utilized Figma Dev Mode to provide code-ready design tokens and exact CSS properties for the MUI components. I also initiated weekly design QA syncs to review the coded components in Storybook. This ensured that the front-end implementation mathematically matched the Figma architecture before any code was merged into the production environment.
The Impact & Outcomes
The foundational architecture I established directly drove measurable business results:
Development Speed
The clear guidelines and strict MUI mapping helped engineering teams ship new features nearly 2x faster.
Branches of New Clients
The scalable system supported the successful onboarding of multiple national nonprofits with
250+ branches in 6 months.
Less Missing Data Support Tickets
Redesigning the financial data architecture and roles management into progressive-disclosure views cut 'missing data' support tickets by over 80% and raised task-completion rates to near 100%.
Challenges & Trade-offs
The primary challenge of this project was executing the migration without disrupting the live production environment. We could not pause the platform to rebuild it. I had to design a phased rollout strategy where legacy components and new MUI components existed side by side. This required careful scoping to ensure the hybrid interface did not break core user workflows or introduce visual regressions during the transitional period.