Web Design System Revamp
Orchestrating a Cross-Functional Collaboration to Scale Consistency
Orchestrating a Cross-Functional Collaboration to Scale Consistency
Type
Type
Type
Web Design System
Web Design System
Web Design System
Role
Role
Role
Role
Product Design Manager
Product Design Manager
Product Design Manager
Year
Year
Year
2025
2025
2025
Collaborators
Collaborator
Collaborator
Collaborator
UI Designers & Dev team
UI Designers & Dev team
UI Designers & Dev team
(01)
Project overview
(01)
Project overview
Unifying Design Leadership & Direction
Unifying Design Leadership & Direction
Unifying Design Leadership & Direction
Unifying Design Leadership & Direction
For three years, o9's digital presence was fragmented—caught between two managers with conflicting visions for the web. Designers got pulled in different directions, decisions constantly shifted, and every page ended up as a compromise. When I stepped into the Product Design Manager role, it was clear the real problem wasn't technology or resources—it was conflicting direction killing momentum.
For three years, o9's digital presence was fragmented—caught between two managers with conflicting visions for the web. Designers got pulled in different directions, decisions constantly shifted, and every page ended up as a compromise. When I stepped into the Product Design Manager role, it was clear the real problem wasn't technology or resources—it was conflicting direction killing momentum.
For three years, o9's digital presence was fragmented—caught between two managers with conflicting visions for the web. Designers got pulled in different directions, decisions constantly shifted, and every page ended up as a compromise. When I stepped into the Product Design Manager role, it was clear the real problem wasn't technology or resources—it was conflicting direction killing momentum.
(THE OUTCOME)
(THE OUTCOME)
(THE OUTCOME)
The tension was visual design vs. content volume—marketing wanted everything on the page to drive conversions, but that approach was cluttering the experience. I found the middle ground: a site that was visually clean, content-smart, and actually helped users understand what we solve. We rebuilt the entire site in React in four months. The speed came from clarity—everyone knew we weren't chasing vanity or volume, but building something users would actually engage with.
The tension was visual design vs. content volume—marketing wanted everything on the page to drive conversions, but that approach was cluttering the experience. I found the middle ground: a site that was visually clean, content-smart, and actually helped users understand what we solve. We rebuilt the entire site in React in four months. The speed came from clarity—everyone knew we weren't chasing vanity or volume, but building something users would actually engage with.
The tension was visual design vs. content volume—marketing wanted everything on the page to drive conversions, but that approach was cluttering the experience. I found the middle ground: a site that was visually clean, content-smart, and actually helped users understand what we solve. We rebuilt the entire site in React in four months. The speed came from clarity—everyone knew we weren't chasing vanity or volume, but building something users would actually engage with.
(02)
Strategic Alignment
& Execution
(02)
The Goal
(02)
Strategic Alignment
& Execution
(02)
Strategic Alignment
& Execution
From Silos to Alignment: Establishing Design Direction
From Silos to Alignment: Establishing Design Direction
From Silos to Alignment: Establishing Design Direction
From Silos to Alignment: Establishing Design Direction
Rather than working in silos, I brought our developers and designers together to benchmark how top-tier SaaS companies structure high-conversion experiences. Partnering with the Digital Marketing team, we replaced an "everything everywhere" approach with a Two-Tier Architecture designed to respect user intent. This strategy allowed us to build high-impact, visual landing pages for marketing campaigns alongside a streamlined "Docs" framework for technical deep-dives. This new layout enables our solution experts to update complex information rapidly while keeping the UI clean with cards, KPIs, and rich media.
Rather than working in silos, I brought our developers and designers together to benchmark how top-tier SaaS companies structure high-conversion experiences. Partnering with the Digital Marketing team, we replaced an "everything everywhere" approach with a Two-Tier Architecture designed to respect user intent. This strategy allowed us to build high-impact, visual landing pages for marketing campaigns alongside a streamlined "Docs" framework for technical deep-dives. This new layout enables our solution experts to update complex information rapidly while keeping the UI clean with cards, KPIs, and rich media.
Rather than working in silos, I brought our developers and designers together to benchmark how top-tier SaaS companies structure high-conversion experiences. Partnering with the Digital Marketing team, we replaced an "everything everywhere" approach with a Two-Tier Architecture designed to respect user intent. This strategy allowed us to build high-impact, visual landing pages for marketing campaigns alongside a streamlined "Docs" framework for technical deep-dives. This new layout enables our solution experts to update complex information rapidly while keeping the UI clean with cards, KPIs, and rich media.
The transition to this new foundation was defined by a close partnership. When the developers proposed a modern stack, we collaborated to select Shadcn/ui and Tailwind CSS because they provided a shared technical language. This allowed me to work directly with the UI designers to translate our brand guidelines into a robust, scalable system that balances technical performance with design flexibility.
The transition to this new foundation was defined by a close partnership. When the developers proposed a modern stack, we collaborated to select Shadcn/ui and Tailwind CSS because they provided a shared technical language. This allowed me to work directly with the UI designers to translate our brand guidelines into a robust, scalable system that balances technical performance with design flexibility.
The transition to this new foundation was defined by a close partnership. When the developers proposed a modern stack, we collaborated to select Shadcn/ui and Tailwind CSS because they provided a shared technical language. This allowed me to work directly with the UI designers to translate our brand guidelines into a robust, scalable system that balances technical performance with design flexibility.
(03)
The Brand Experience
(03)
The Brand Experience
The Component System & Documentation
The Component System & Documentation
The Component System & Documentation
The Component System & Documentation
I led the design execution and worked alongside the team to build a component library. I was responsible for the final UI review to ensure everything stayed consistent. We moved to a modular system so that every part of the site is interchangeable, high-quality, and easy for the developers to scale. This included a new navigation structure where we replaced a cluttered mega-menu with a simpler layout.
I led the design execution and worked alongside the team to build a component library. I was responsible for the final UI review to ensure everything stayed consistent. We moved to a modular system so that every part of the site is interchangeable, high-quality, and easy for the developers to scale. This included a new navigation structure where we replaced a cluttered mega-menu with a simpler layout.
I led the design execution and worked alongside the team to build a component library. I was responsible for the final UI review to ensure everything stayed consistent. We moved to a modular system so that every part of the site is interchangeable, high-quality, and easy for the developers to scale. This included a new navigation structure where we replaced a cluttered mega-menu with a simpler layout.
To scale this beyond my review, I first established the components in Figma with clear structure and hierarchy. Now, we're building the documentation layer in parallel: creating brand.md and constraints.md to codify our decisions, while structuring the documentation as MCP files to make the design system queryable by LLMs, Figma plugins, and development tools. This means designers and developers can interact with the system programmatically, not just visually.
To scale this beyond my review, I first established the components in Figma with clear structure and hierarchy. Now, we're building the documentation layer in parallel: creating brand.md and constraints.md to codify our decisions, while structuring the documentation as MCP files to make the design system queryable by LLMs, Figma plugins, and development tools. This means designers and developers can interact with the system programmatically, not just visually.
To scale this beyond my review, I first established the components in Figma with clear structure and hierarchy. Now, we're building the documentation layer in parallel: creating brand.md and constraints.md to codify our decisions, while structuring the documentation as MCP files to make the design system queryable by LLMs, Figma plugins, and development tools. This means designers and developers can interact with the system programmatically, not just visually.
(04)
Results
Infrastructure for Scale
The real value of the design system is showing up now—in initiatives beyond the marketing website. We have a scalable brand infrastructure that can be applied to the Academy platform, Communities portal, Documentation site, and more. Because we documented the system— components, tokens, design decisions—other teams can now build with consistency, allowing departments to focus on solving their specific problem instead of building design infrastructure from scratch.
The web is structured with different repos for microsites, letting teams work independently while maintaining a unified brand. The documentation as MCP files means this infrastructure can interact with AI tools and design plugins, making it easier to maintain consistency—and unlock new possibilities—across all initiatives.
(04)
Results
Infrastructure for Scale
The real value of the design system is showing up now—in initiatives beyond the marketing website. We have a scalable brand infrastructure that can be applied to the Academy platform, Communities portal, Documentation site, and more. Because we documented the system— components, tokens, design decisions—other teams can now build with consistency, allowing departments to focus on solving their specific problem instead of building design infrastructure from scratch.
The web is structured with different repos for microsites, letting teams work independently while maintaining a unified brand. The documentation as MCP files means this infrastructure can interact with AI tools and design plugins, making it easier to maintain consistency—and unlock new possibilities—across all initiatives.
(04)
Results
(04)
Results
Infrastructure for Scale
Infrastructure for Scale
The real value of the design system is showing up now—in initiatives beyond the marketing website. We have a scalable brand infrastructure that can be applied to the Academy platform, Communities portal, Documentation site, and more. Because we documented the system— components, tokens, design decisions—other teams can now build with consistency, allowing departments to focus on solving their specific problem instead of building design infrastructure from scratch.
The web is structured with different repos for microsites, letting teams work independently while maintaining a unified brand. The documentation as MCP files means this infrastructure can interact with AI tools and design plugins, making it easier to maintain consistency—and unlock new possibilities—across all initiatives.
(05)
Learnings
(05)
Learnings
Systems Enable Speed
Systems Enable Speed
Systems Enable Speed
Systems Enable Speed
This project taught me that design systems aren't just about components — they're about enabling speed across the entire organization. By documenting the system (components, tokens, decisions), we unlocked teams to build independently without bottlenecks. The real value isn't the library; it's the independence it gives others.
This project taught me that design systems aren't just about components — they're about enabling speed across the entire organization. By documenting the system (components, tokens, decisions), we unlocked teams to build independently without bottlenecks. The real value isn't the library; it's the independence it gives others.
This project taught me that design systems aren't just about components — they're about enabling speed across the entire organization. By documenting the system (components, tokens, decisions), we unlocked teams to build independently without bottlenecks. The real value isn't the library; it's the independence it gives others.
We're now testing our LLM tool against the new MCP documentation to see how AI can interact with the design system—translating content, generating variations, maintaining consistency at scale. The next phase of design systems work isn't building components. It's building infrastructure that both humans and AI can work with.
We're now testing our LLM tool against the new MCP documentation to see how AI can interact with the design system—translating content, generating variations, maintaining consistency at scale. The next phase of design systems work isn't building components. It's building infrastructure that both humans and AI can work with.
We're now testing our LLM tool against the new MCP documentation to see how AI can interact with the design system—translating content, generating variations, maintaining consistency at scale. The next phase of design systems work isn't building components. It's building infrastructure that both humans and AI can work with.
Let’s connect!
lucilacastroman@gmail.com
©2026
Let’s connect!
lucilacastroman@gmail.com
©2026
Let’s connect!
lucilacastroman@gmail.com
©2026