Web Design System Revamp
Orchestrating a Cross-Functional Sprint to Modernize o9’s Global Presence.
Orchestrating a Cross-Functional Sprint to Modernize o9’s Global Presence.
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
Breaking the Three-Year Bottleneck
Breaking the Three-Year Bottleneck
Breaking the Three-Year Bottleneck
Breaking the Three-Year Bottleneck
For over three years, o9’s website was stuck. Between constant changes in management, conflicting opinions on technology, and growing technical debt, we were left with a patchwork of inconsistent results. When I stepped into the Product Design Manager role, I looked at our real constraints alongside the senior developers and made a choice: we would stop trying to fix a broken system and instead build a completely new foundation from scratch.
For over three years, o9’s website was stuck. Between constant changes in management, conflicting opinions on technology, and growing technical debt, we were left with a patchwork of inconsistent results. When I stepped into the Product Design Manager role, I looked at our real constraints alongside the senior developers and made a choice: we would stop trying to fix a broken system and instead build a completely new foundation from scratch.
For over three years, o9’s website was stuck. Between constant changes in management, conflicting opinions on technology, and growing technical debt, we were left with a patchwork of inconsistent results. When I stepped into the Product Design Manager role, I looked at our real constraints alongside the senior developers and made a choice: we would stop trying to fix a broken system and instead build a completely new foundation from scratch.
(THE OUTCOME)
(THE OUTCOME)
(THE OUTCOME)
By bringing our senior developers and UI designers together into one team, we replaced the chaos with a single vision. We rebuilt the entire site in React—launching a global digital ecosystem in just four months that finally brought our digital presence in sync with our brand.
By bringing our senior developers and UI designers together into one team, we replaced the chaos with a single vision. We rebuilt the entire site in React—launching a global digital ecosystem in just four months that finally brought our digital presence in sync with our brand.
By bringing our senior developers and UI designers together into one team, we replaced the chaos with a single vision. We rebuilt the entire site in React—launching a global digital ecosystem in just four months that finally brought our digital presence in sync with our brand.
(02)
Strategic Alignment
& Execution
(02)
The Goal
(02)
Strategic Alignment
& Execution
(02)
Strategic Alignment
& Execution
From Discovery to Delivery: A Collaborative Approach
From Discovery to Delivery: A Collaborative Approach
From Discovery to Delivery: A Collaborative Approach
From Discovery to Delivery: A Collaborative Approach
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
Building a Scalable Identity: From Layouts to Art Direction
Building a Scalable Identity: From Layouts to Art Direction
Building a Scalable Identity: From Layouts to Art Direction
Building a Scalable Identity: From Layouts to Art Direction
I led the design execution and worked alongside the team to build a component library. While this was a group effort, I helped directly create components to accelerate delivery and 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, allowing users to find industry-specific information.
I led the design execution and worked alongside the team to build a component library. While this was a group effort, I helped directly create components to accelerate delivery and 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, allowing users to find industry-specific information.
I led the design execution and worked alongside the team to build a component library. While this was a group effort, I helped directly create components to accelerate delivery and 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, allowing users to find industry-specific information.
Beyond the layout, I guided the Art Director and UI designers to turn complex data from our software into clear, marketing-friendly illustrations. These visuals help explain our solutions without overwhelming the user, moving us toward a layout that actually guides people through our story.
Beyond the layout, I guided the Art Director and UI designers to turn complex data from our software into clear, marketing-friendly illustrations. These visuals help explain our solutions without overwhelming the user, moving us toward a layout that actually guides people through our story.
Beyond the layout, I guided the Art Director and UI designers to turn complex data from our software into clear, marketing-friendly illustrations. These visuals help explain our solutions without overwhelming the user, moving us toward a layout that actually guides people through our story.
(04)
Results
Impact: Moving from Clutter to Conversion
Previously, our approach was to clutter pages with excessive CTAs, making it harder for users to navigate. We replaced that chaos with an optimized conversion flow and an intentional structure that assigns a clear goal to every page. By integrating social proof and key metrics, we now highlight real-world client value while letting the storytelling breathe.
To prove this shift works, we move beyond subjective opinions by monitoring bounce rates, time-on-page, and pages visited per session. This allows us to finally align our design decisions with the goals of the global marketing department, turning the website into a measurable tool for growth.
(04)
Results
Impact: Moving from Clutter to Conversion
Previously, our approach was to clutter pages with excessive CTAs, making it harder for users to navigate. We replaced that chaos with an optimized conversion flow and an intentional structure that assigns a clear goal to every page. By integrating social proof and key metrics, we now highlight real-world client value while letting the storytelling breathe.
To prove this shift works, we move beyond subjective opinions by monitoring bounce rates, time-on-page, and pages visited per session. This allows us to finally align our design decisions with the goals of the global marketing department, turning the website into a measurable tool for growth.
(04)
Results
(04)
Results
Impact: Moving from Clutter to Conversion
Impact: Moving from Clutter to Conversion
Previously, our approach was to clutter pages with excessive CTAs, making it harder for users to navigate. We replaced that chaos with an optimized conversion flow and an intentional structure that assigns a clear goal to every page. By integrating social proof and key metrics, we now highlight real-world client value while letting the storytelling breathe.
To prove this shift works, we move beyond subjective opinions by monitoring bounce rates, time-on-page, and pages visited per session. This allows us to finally align our design decisions with the goals of the global marketing department, turning the website into a measurable tool for growth.
(05)
Learnings
(05)
Learnings
Leadership Through Alignment
Leadership Through Alignment
Leadership Through Alignment
Leadership Through Alignment
This project was a major lesson in setting boundaries and sticking to design principles. I led the shift away from a "more is better" approach—where pages were cluttered with CTAs—toward a clean, structured layout. By building a metric-led framework from the start, we've moved from debating opinions to a model where we can test our ideas and make decisions based on how users actually interact with the site.
This project was a major lesson in setting boundaries and sticking to design principles. I led the shift away from a "more is better" approach—where pages were cluttered with CTAs—toward a clean, structured layout. By building a metric-led framework from the start, we've moved from debating opinions to a model where we can test our ideas and make decisions based on how users actually interact with the site.
This project was a major lesson in setting boundaries and sticking to design principles. I led the shift away from a "more is better" approach—where pages were cluttered with CTAs—toward a clean, structured layout. By building a metric-led framework from the start, we've moved from debating opinions to a model where we can test our ideas and make decisions based on how users actually interact with the site.
My philosophy follows that it is better to launch, learn, and improve early than to postpone impact in search of perfection. The website isn't a static project; it’s a living system. While we are still polishing and adding sections, we now have a solid foundation in React that allows us to iterate at the speed of the business. Moving forward, our focus remains on using real user data to refine our design, ensuring our digital presence scales alongside the organization’s goals.
My philosophy follows that it is better to launch, learn, and improve early than to postpone impact in search of perfection. The website isn't a static project; it’s a living system. While we are still polishing and adding sections, we now have a solid foundation in React that allows us to iterate at the speed of the business. Moving forward, our focus remains on using real user data to refine our design, ensuring our digital presence scales alongside the organization’s goals.
My philosophy follows that it is better to launch, learn, and improve early than to postpone impact in search of perfection. The website isn't a static project; it’s a living system. While we are still polishing and adding sections, we now have a solid foundation in React that allows us to iterate at the speed of the business. Moving forward, our focus remains on using real user data to refine our design, ensuring our digital presence scales alongside the organization’s goals.