DESIGN SYSTEM
DESIGN SYSTEM
Design System, customised for SaaS, native, and plugin-sized screens
Design System, customised for SaaS, native, and plugin-sized screens
The new design system was built to general best practices, but the Word and Outlook plugins had far less screen real estate than the SaaS app or native app. I audited every component against every screen it appeared on, and reworked the ones that needed size, text, or spacing changes to fit the plugins.
The new design system was built to general best practices, but the Word and Outlook plugins had far less screen real estate than the SaaS app or native app. I audited every component against every screen it appeared on, and reworked the ones that needed size, text, or spacing changes to fit the plugins.
1.
When I joined Lucio, there was an existing component set, but it wasn't built on atomic principles — no consistent variants, no documented properties, no scalability across screen sizes. It looked like a design system but didn't function like one.
A "design system" that wasn't one
A "design system" that wasn't one
A "design system" that wasn't one
1.
1.
When I joined Lucio, there was an existing component set, but it wasn't built on atomic principles — no consistent variants, no documented properties, no scalability across screen sizes. It looked like a design system but didn't function like one.
2.
I was tasked with shipping the Word and Outlook plugins on a tight timeline, so I couldn't stop to build a perfect system first — I built a working component set with the size variations the plugins actually needed, atomically structured from the ground up, so it could scale later even though it was built fast.
Built under real constraints,
not ideal ones
Built under real constraints,
not ideal ones
Built under real constraints,
not ideal ones
2.
2.
I was tasked with shipping the Word and Outlook plugins on a tight timeline, so I couldn't stop to build a perfect system first — I built a working component set with the size variations the plugins actually needed, atomically structured from the ground up, so it could scale later even though it was built fast.
3.
Once we had four products — SaaS, native app, Word plugin, Outlook plugin — inconsistency across them became a real cost. I led the initiative to unify them under one system. We started by benchmarking against Carbon, Fluent, Untitled UI, Radix, and Atlassian's ADS to decide what properties each component actually needed, rather than guessing.
From one plugin to a company-wide system
3.
3.
Once we had four products — SaaS, native app, Word plugin, Outlook plugin — inconsistency across them became a real cost. I led the initiative to unify them under one system. We started by benchmarking against Carbon, Fluent, Untitled UI, Radix, and Atlassian's ADS to decide what properties each component actually needed, rather than guessing.
From one plugin to a company-wide system
From one plugin to a company-wide system
4.
I designed the documentation format itself — how each component's properties, types, and values were presented — because a system nobody can read is a system nobody adopts.
Documentation as a first-class deliverable
4.
I designed the documentation format itself — how each component's properties, types, and values were presented — because a system nobody can read is a system nobody adopts.
Documentation as a first-class deliverable
Documentation as a first-class deliverable
5.
I taught my junior designer, how to build out components — assigning properties, structuring variants, understanding what made a component atomic rather than a one-off. She didn't just learn it, she ran with it and pushed it further than I expected. Together, we figured out how to get variables working properly across styles and text, so the system stayed consistent instead of breaking down component by component. How meticulous the final system turned out to be is really a testament to her execution.
Mentorship and delegation
Mentorship and delegation
Mentorship and delegation
5.
I taught another my junior designer, how to actually build out the components, since I was heads-down on the Outlook plugin. I stayed closely involved — reviewing her variants, catching structural issues — so quality held even though I'd delegated execution.
I taught my junior designer, how to build out components — assigning properties, structuring variants, understanding what made a component atomic rather than a one-off. She didn't just learn it, she ran with it and pushed it further than I expected. Together, we figured out how to get variables working properly across styles and text, so the system stayed consistent instead of breaking down component by component. How meticulous the final system turned out to be is really a testament to her execution.
6.
When it came time to apply the new system to our actual screens, we hit a real problem — the components were designed to general best practices, but our plugins had very limited screen real estate. A component that worked fine in the SaaS app didn't fit in a 300px-wide Word sidebar.
Generic system met real constraints
6.
When it came time to apply the new system to our actual screens, we hit a real problem — the components were designed to general best practices, but our plugins had very limited screen real estate. A component that worked fine in the SaaS app didn't fit in a 300px-wide Word sidebar.
Generic system met real constraints
Generic system met real constraints
7.
I audited every screen against every component it used, identified where sizing, spacing, or text needed a plugin-specific variant, and reworked those systematically rather than one-off overriding styles per screen — so the system stayed a system, not a set of exceptions.
Systematic audit, not ad hoc patches
Systematic audit, not ad hoc patches
Systematic audit, not ad hoc patches
7.
I audited every screen against every component it used, identified where sizing, spacing, or text needed a plugin-specific variant, and reworked those systematically rather than one-off overriding styles per screen — so the system stayed a system, not a set of exceptions.
8.
Once the reworked system was in place, I revamped the entire Word plugin end-to-end using it — proving the system could actually support a full production surface, not just isolated components.
A full rollout
A full rollout
A full rollout
8.
I audited every screen against every component it used, identified where sizing, spacing, or text needed a plugin-specific variant, and reworked those systematically rather than one-off overriding styles per screen — so the system stayed a system, not a set of exceptions.
Once the reworked system was in place, I revamped the entire Word plugin end-to-end using it — proving the system could actually support a full production surface, not just isolated components.