Building a Design System for Legacy Technical Constraints
How do you improve UX consistency across a legacy enterprise product when a full redesign isn't possible? I led the delivery of a pragmatic design system that worked within inherited constraints while advocating for smarter long-term solutions.
Timeline
12 months
(Sept 2024 – Sept 2025)
Company
PTC
(Codebeamer ALM)
My Role
Design Manager, Strategic Advisor
Team
3 designers, 12+ developers, cross-functional PMs
The Challenge
In September 2024, I was brought onto PTC's Codebeamer team to shepherd a design system implementation that had stalled. Codebeamer, an application lifecycle management tool acquired by PTC two years prior, had vastly different architecture from PTC's other products and couldn't easily adopt the existing company-wide Convergence Design System (CDS).
The solution (decided before my arrival) was to manually recreate CDS by restyling and refactoring PrimeNG components. Effectively, we would duplicate an entire design system rather than address the technical debt that prevented us from using the original.
The Inherited Constraint
I inherited a project I wouldn't have structured this way. My preference, given the logistical constraints, would have been to determine a few critical areas of the application and refactor those to adopt the existing design system directly. But with timelines, resources, and organizational will already committed to the duplication approach, my job was to make the best of this situation.
Why this approach?
The decision to duplicate rather than refactor came down to several issues:
Technical debt: Codebeamer's legacy codebase made integration with CDS technically complex and time-consuming
Resource constraints: The development team didn't have capacity for large-scale refactoring
Business pressure: We needed consistency improvements before FY 2026 (October 2025)
Organizational alignment: PTC needed all products moving toward visual consistency
While not ideal from a systems perspective, this pragmatic approach could still deliver meaningful UX improvements if executed well.
Strategic Approach: Making Constraints Work
I joined this project while managing multiple other initiatives: AI feature development, version administration workflows, and establishing analytics infrastructure (Fullstory) across our compliance-heavy enterprise customer base. I also welcomed a new baby during this timeline, which added personal urgency to work efficiently.
Rather than just executing the plan I inherited, I focused on four strategic improvements:
1. Maximize PrimeNG Capabilities
Since we were committed to PrimeNG, I pushed the team to leverage every UX improvement the toolkit allowed. I encouraged focus on three areas where CDS was weak: micro-interactions, accessibility standards, and comprehensive usage guidelines. These became our competitive advantages.
3. Win Developer Buy-In
The biggest risk was developer resistance. I knew we needed their enthusiasm, not just compliance. My strategy: prove how modern tooling would improve their lives, not just design outcomes.
2. Think Beyond One Product
I advocated for integrating PrimeNG as an external library wherever CDS couldn't be used: not just Codebeamer, but other PTC acquisitions and legacy products. This meant our work could benefit multiple teams without duplicating effort across the organization.
4. Lead Through Service
With three direct reports (Gerard, Nandita, Paul), I focused on unblocking their work, ensuring component usability within Figma, and picking up tasks when capacity was tight. Leadership here meant getting into the details to assist, not micromanage.
The Adoption Strategy
How we turned developer skepticism into enthusiastic adoptionTechnical debt: Codebeamer's legacy codebase made integration with CDS technically complex and time-consuming
Identify Resistance
Developer management saw this as extra work with unclear value
Secure Figma Access
Advocated upward to get Dev Mode licenses for entire team
Demonstrate Value
Showed developers how Dev Mode simplified their workflow
Bottom-Up Support
Developers championed the system to their own management
The Breakthrough: Figma Dev Mode
The turning point came when I convinced leadership to invest in Figma Dev Mode access for the entire development team. This was a moment where I was able to do a bit of experience improvement for the developers on my team, which ultimately helped us build a better experience, together, for our users.
I personally showed developers how Dev Mode could:
Automatically extract spacing, colors, and typography specs
Generate code snippets for components
Provide a single source of truth for implementation details
Eliminate back-and-forth with designers on basic specs
Once developers experienced this workflow improvement firsthand, they became our biggest advocates. They filtered enthusiasm back up through their management structure, transforming organizational resistance into support.
Managing Competing Priorities
This design system work happened alongside several other major initiatives I was leading:
AI Features: Managing development of AI-powered capabilities in Codebeamer
Analytics Infrastructure: Implementing Fullstory tracking across compliance-heavy enterprise customers (pharma, manufacturing, government), particularly complex given EU privacy regulations and our European development team
Workflow Design: Leading my own project version administration workflows
Personal Life: Welcoming a new baby mid-project
Time management became critical. I focused on high-leverage activities: strategic decisions, unblocking the team, and maintaining stakeholder alignment. The servant leadership approach (empowering my team to make most decisions independently) was essential for shipping on time.
Impact & Outcomes
We delivered the design system before the October 2025 FY2026 deadline, despite competing priorities and personal constraints. More importantly, we transformed how design and development collaborate at Codebeamer.
100+
Components styled and documented
↑ 3x
Faster design-to-dev handoff
90%
Developer satisfaction with new workflow
Broader Organizational Impact
Beyond Codebeamer, our work positioned PrimeNG as a viable solution for other PTC legacy products that couldn't adopt CDS directly. By framing our component library as reusable across multiple teams, we prevented other groups from duplicating the same effort.
The Figma Dev Mode adoption we championed has now spread to other PTC design teams, modernizing how the entire organization approaches design-development handoff.
UX Improvements
The visual and functional consistency improvements were substantial. Codebeamer's UI went from a patchwork of legacy patterns to a cohesive, modern experience that aligned with PTC's other products. This was critical for customers using multiple PTC tools.
What I Learned
Constraints Can Drive Innovation
This project taught me that sometimes the most creative solutions emerge from limitations. While I would have preferred refactoring the codebase, working within PrimeNG's constraints forced us to think differently about what "better" could mean.
CDS, for all its strengths as PTC's company-wide standard, had gaps: limited micro-interaction thinking, baseline accessibility compliance, and sparse usage documentation. These weren't priorities when CDS was built, but they became our opportunities.
By focusing on three areas where we could excel despite (or because of) our constraints:
Micro-interactions: PrimeNG's component library offered rich interaction capabilities that CDS couldn't easily support. We documented hover states, loading behaviors, transition timing, and feedback mechanisms that made the UI feel more responsive and polished. This attention to detail elevated the perceived quality beyond what CDS delivered.
Accessibility: Rather than treating WCAG compliance as a checkbox, we made it a differentiator. PrimeNG's foundation gave us keyboard navigation, screen reader support, and focus management out of the box, but we extended it with comprehensive testing protocols and clear accessibility guidelines. Our system became more accessible than CDS.
Usage guidelines: Where CDS provided component specs, we provided component wisdom. When to use which variant. How to handle edge cases. What not to do. Real examples from our product. This documentation became invaluable for developers and designers alike, reducing decision fatigue and improving consistency.
These advantages wouldn't have been priorities if we'd simply adopted CDS. The constraint of duplication forced us to find ways to add value, and we discovered that polish, accessibility, and documentation were aspects we could improve on with low effort, thanks to the considerations made with PrimeNG.
The Figma Dev Mode approach (turning developer experience into our primary value proposition) emerged from this same constraint-driven thinking. We couldn't compete on "better architecture," so we competed on "better workflow." That insight might not have surfaced in a less constrained environment.
Pragmatism Has Its Place
Enterprise software development often requires balancing ideal solutions with organizational reality. Technical debt, resource constraints, and business timelines are real. As a design leader, my job isn't just to advocate for the perfect solution. It's to identify the best path forward given actual constraints, while still pushing for long-term improvements.
Bottom-Up Change Works
Winning over individual developers proved more effective than trying to convince management first. When developers experienced the benefits firsthand and championed the system upward, we achieved buy-in that top-down mandates never could have.
Leadership Means Getting Specific
Servant leadership doesn't mean staying high-level. Sometimes the most valuable thing a leader can do is dive into component-level critiques in Figma or pick up implementation tasks when the team is stretched thin. Being willing to work at any altitude builds trust and keeps projects moving.
What I'd Do Differently
If I could start over, I would have advocated more forcefully at the beginning for a hybrid approach: refactor and use CDS for high-impact areas (like primary workflows), while using PrimeNG only for lower-priority features. The all-or-nothing decision (full duplication vs. full refactor) created a false choice that likely wasn't necessary.
I'd also push harder for dedicated developer resources earlier, rather than treating this as "extra work" on top of feature development. The half-committed approach extended timelines and added stress.
The Bigger Picture
This project exemplifies a reality of enterprise software design: you rarely get to start with a blank slate. Technical debt, legacy decisions, organizational inertia...these are constraints every designer working at scale must navigate.
The question isn't whether constraints exist, but how you respond to them. Do you treat them as excuses, or as design problems to be solved?
For Codebeamer, working within inherited constraints while advocating for smarter approaches meant we could ship meaningful improvements on timeline, build better cross-functional relationships, and position the organization for better decisions in the future.
Sometimes leadership means making the best of what you've been given while planting seeds for what should come next.