We needed to modernize a legacy AngularJS DSP UI without pausing feature delivery or disrupting active advertisers. A full rewrite wasn't feasible and the business required uninterrupted customer experience throughout.
Context
The platform's front end was built on AngularJS. As the product scaled, maintainability and delivery velocity suffered, yet the business required uninterrupted customer experience. Every architectural decision had to be weighed against the cost of user disruption.
Strategy: parallel architectures without user disruption
Rather than a big-bang rewrite, we introduced React incrementally while keeping AngularJS fully stable. Three mechanisms working in concert:
New pages in React, in a separate domain
We built new pages in React under a separate domain while the AngularJS platform continued shipping feature work uninterrupted. The product experience remained visually consistent so the transition was effectively invisible to users.
Shared authentication across domains
To preserve a seamless experience, we maintained shared authentication cookies across domains and a single session spanning both AngularJS and React environments. This ensured no re-authentication or context loss during navigation.
Architecturally separate. Experientially unified.
Transitional embedding for select read-only cases
In a small number of read-only scenarios, we embedded components from one environment into the other via iframe to avoid duplicating logic prematurely while the migration progressed. We prioritized stability and product continuity over architectural purity.
Design system as the unifying layer
I created and maintained a centralized design system in Figma to keep UX patterns consistent across both stacks. Both AngularJS and React implementations leveraged Material Design component libraries, enabling:
- Shared visual language and interaction patterns across architectures
- Reduced drift during migration
- Clear implementation expectations for engineers working in both codebases
The design system functioned as the bridge between two architectures.
My role
As Director of UI/UX, I was the connective tissue between design decisions and engineering execution:
- Led UX strategy across the platform during modernization
- Owned design system governance to ensure cross-stack consistency
- Drove delivery sequencing, risk, and implementation standards across engineering.
- Mentored front-end engineers on reusable patterns and quality practices
Outcome
- Continued shipping product capabilities while modernizing architecture incrementally
- Enabled new development in React with lower friction and cleaner patterns
- Preserved user trust through a cohesive, uninterrupted experience
- Created a practical path to reduce AngularJS dependency over time