Building a System Inside a Tool Never Meant for One
Proof a system doesn't need the right tool to start working.
Building a System Inside a Tool Never Meant for One
Proof a system doesn't need the right tool to start working.
Building a System Inside a Tool Never Meant for One
Proof a system doesn't need the right tool to start working.
My role
Senior Product Designer
Tags
Design System
Timeline
2023 -> 2024 (7 months)
Senior Product Designer
Design System
2023 -> 2024 (7 months)
My role
Senior Product Designer
Tags
Design System
Timeline
2023 -> 2024 (7 months)
Psst! Hey you! Want a quicker overview of what happened instead of reading the whole use-case? I got you! Click the button ->
Psst! Hey you! Want a quicker overview of what happened instead of reading the whole use-case? I got you! Click the button.
Psst! Hey you! Want a quicker overview of what happened instead of reading the whole use-case? I got you! Click the button ->
The problem
Six teams building digital products independently, each with their own way of doing things, and no centralised reference point for any of it. My job was to build one… inside Confluence.
The problem
Six teams building digital products independently, each with their own way of doing things, and no centralised reference point for any of it. My job was to build one… inside Confluence.
The problem
Six teams building digital products independently, each with their own way of doing things, and no centralised reference point for any of it. My job was to build one… inside Confluence.
Each team designed independently
Each team designed independently
Each team designed independently
The constraint
Confluence is (obviously) not a design system tool, it's a wiki. No component support, no variant logic, no visual documentation out of the box. Everything had to be structured manually: how components were categorised, how they connected to each other, how layout rules were documented, how updates would be communicated. Every decision about the system's architecture was mine to make, and then mine to maintain. The alternative was waiting for better tooling. I didn't think that was the right call as the teams were building inconsistently every day the system didn't exist, and a tooling conversation could take months with no guarantee of landing anywhere (trust me, I gave it a little shot). Better to build now, in what was available, and start delivering value.
The constraint
Confluence is (obviously) not a design system tool, it's a wiki. No component support, no variant logic, no visual documentation out of the box. Everything had to be structured manually: how components were categorised, how they connected to each other, how layout rules were documented, how updates would be communicated. Every decision about the system's architecture was mine to make, and then mine to maintain. The alternative was waiting for better tooling. I didn't think that was the right call as the teams were building inconsistently every day the system didn't exist, and a tooling conversation could take months with no guarantee of landing anywhere (trust me, I gave it a little shot). Better to build now, in what was available, and start delivering value.
The constraint
Confluence is (obviously) not a design system tool, it's a wiki. No component support, no variant logic, no visual documentation out of the box. Everything had to be structured manually: how components were categorised, how they connected to each other, how layout rules were documented, how updates would be communicated. Every decision about the system's architecture was mine to make, and then mine to maintain. The alternative was waiting for better tooling. I didn't think that was the right call as the teams were building inconsistently every day the system didn't exist, and a tooling conversation could take months with no guarantee of landing anywhere (trust me, I gave it a little shot). Better to build now, in what was available, and start delivering value.
How I built it
I ran it on sprints. Audited what existed across all six teams first: components, patterns, where things clashed. After the first few weeks, and having all available outcomes, I then built the documentation architecture and got stakeholder buy-in on the structure before filling it. I also presented the structure to the various teams, as they were my main primary target and had a chat with them to understand their most urgent needs. With the research done, the structure defined, and everyone on board, I moved to document section by section, following the priority levels that were setup.
How I built it
I ran it on sprints. Audited what existed across all six teams first: components, patterns, where things clashed. After the first few weeks, and having all available outcomes, I then built the documentation architecture and got stakeholder buy-in on the structure before filling it. I also presented the structure to the various teams, as they were my main primary target and had a chat with them to understand their most urgent needs. With the research done, the structure defined, and everyone on board, I moved to document section by section, following the priority levels that were setup.
How I built it
I ran it on sprints. Audited what existed across all six teams first: components, patterns, where things clashed. After the first few weeks, and having all available outcomes, I then built the documentation architecture and got stakeholder buy-in on the structure before filling it. I also presented the structure to the various teams, as they were my main primary target and had a chat with them to understand their most urgent needs. With the research done, the structure defined, and everyone on board, I moved to document section by section, following the priority levels that were setup.
Low-quality image to prevent leaking of sensitive information
Low-quality image to prevent leaking of sensitive information
Low-quality image to prevent leaking of sensitive information
Where it ended up
Cross-team inconsistencies dropped 16% while the project was running. Then budget cuts came. Company-wide, nothing to do with the work, and the project closed with around 30% of components and 60% of layouts documented. Not finished. But working, and already making a difference.
Where it ended up
Cross-team inconsistencies dropped 16% while the project was running. Then budget cuts came. Company-wide, nothing to do with the work, and the project closed with around 30% of components and 60% of layouts documented. Not finished. But working, and already making a difference.
Where it ended up
Cross-team inconsistencies dropped 16% while the project was running. Then budget cuts came. Company-wide, nothing to do with the work, and the project closed with around 30% of components and 60% of layouts documented. Not finished. But working, and already making a difference.
Single source of truth = uniform outputs
Single source of truth = uniform outputs
Single source of truth = uniform outputs
Step-by-step summary
Context
Audit
FULL INVOLVEMENT
Various teams, all working slightly differently, none of them with a full picture of what everyone else was doing. I mapped the whole thing before touching any documentation – components, patterns, layouts, where things clashed, etc.
Audit
FULL INVOLVEMENT
Various teams, all working slightly differently, none of them with a full picture of what everyone else was doing. I mapped the whole thing before touching any documentation – components, patterns, layouts, where things clashed, etc.
System Architecture
FULL INVOLVEMENT
Designed the system's structure and figured out how to make Confluence function as a usable documentation environment.
System Architecture
FULL INVOLVEMENT
Designed the system's structure and figured out how to make Confluence function as a usable documentation environment.
Component Documentation
FULL INVOLVEMENT
Documented existing components manually, from categorisation, to cross-references, to versioning. All built by hand inside a tool with no native support for any of it.
Component Documentation
FULL INVOLVEMENT
Documented existing components manually, from categorisation, to cross-references, to versioning. All built by hand inside a tool with no native support for any of it.
Layout Documentation
FULL INVOLVEMENT
Mapped layout rules and page templates across teams, creating a shared reference for how things should be structured across the product teams.
Layout Documentation
FULL INVOLVEMENT
Mapped layout rules and page templates across teams, creating a shared reference for how things should be structured across the product teams.
Stakeholder Alignment
PARTIAL INVOLVEMENT
Communication with stakeholders was difficult and slowed progress. I kept things moving and presented a structure that held up to scrutiny.
Stakeholder Alignment
PARTIAL INVOLVEMENT
Communication with stakeholders was difficult and slowed progress. I kept things moving and presented a structure that held up to scrutiny.
Delivery
PARTIAL INVOLVEMENT
Budget cuts ended the project after 6–7 months. What existed worked. It just didn't get the chance to finish.
Delivery
PARTIAL INVOLVEMENT
Budget cuts ended the project after 6–7 months. What existed worked. It just didn't get the chance to finish.
More projects
Context
More projects
Done wtih my hands using Figma and Framer.
oto
Last updated: Jun 2026
Done wtih my hands using Figma and Framer.
Last updated: Jun 2026
oto
Done wtih my hands using Figma and Framer.
Last updated: Jun 2026
oto