Design systems
From no shared standards to Microsoft Fluent
Overview
Across my years at Slideworx and mTab I built, grew and consolidated the platform's design systems: from designers working in isolation, to separate component libraries, to one unified system, and finally to Microsoft Fluent. As Head of Design I set the strategy and was involved at every stage.
Challenge
When I took over the team there were no design principles to speak of. Everything was designed against the current requirement, and Engineering was siloed too, so the same problem was often solved two or three ways, sometimes in the same module. Users got a patchwork of inconsistent patterns.
Discover and Analyze (now Reports) were treated as separate applications with different needs. Discover had to be clean and easy to browse, Analyze dense and tool-heavy for serious analysis, and a growing library of data visualisations kept adding its own one-off solutions.
My job was to bring consistency across every module while letting each one keep its own character.
My role
I built each system for its own context. Discover leaned on Google's flat design principles, for clarity with a broad, non-technical audience. Analyze was denser and interaction-heavy, for power users. The data visualisation library sat alongside both, keeping charts consistent across all mTab products.
As the platform matured, I led the merge of all three into one mTab design system, reducing duplication and giving designers and developers one source of truth. It matched Engineering's goal of unifying the platform's technology.
The move to Fluent
Then company restructuring, and the cost of maintaining a custom system, forced a rethink. Our own system gave us full control, but we had to design, build and document every component ourselves. After researching the options with Engineering, we moved to Microsoft Fluent.
We gave up a system shaped exactly around our products, and got a mature, well-documented base with a huge component library, freeing both teams to build product instead of maintaining design infrastructure.
Outcome
Moving to Fluent noticeably sped up design and development. Every new feature is built on it, with mTab-specific tweaks on top, and the older systems are retired as modules are updated.
Going from no shared principles, through three systems, to one standard finally gave the team a common language. Letting go of years of our own work, because something better existed, is still one of the best calls we made.
