Using AI to modernize a legacy platform
The platform is a large institutional trading platform built over decades, spanning legacy Java screens and newer web applications. As the product evolved, inconsistent patterns, local overrides and fragmented design-system adoption made maintaining and modernizing the UI increasingly difficult. I helped establish a new design system designed to coexist with the legacy one and support a gradual migration — using AI throughout the process to accelerate auditing, mapping and planning across a complex existing platform.
Assessing the foundation
The first step was understanding what we could realistically build on. Working closely with engineering, I audited the existing design system and how it was actually being used across the platform. We found limited component coverage, inconsistent adoption and extensive local overrides that made improving shared components risky. Rather than trying to untangle years of dependencies, we decided to build a new design system that could gradually replace the old one — allowing both systems to coexist while the platform was modernized incrementally.
Legacy implementation
The same filter pattern had been patched differently across products—one allowed text to overflow its container, while another expanded with its content and broke the layout.
New shared component
I redesigned the pattern to be more compact and predictable while preserving the toggle behavior users already relied on. Active filters remain visible at a glance without allowing content to dictate the layout.
Building a stronger foundation
Starting fresh gave us the opportunity to address structural limitations rather than carry them into the new system. We focused on stronger foundations for consistency, accessibility, theming and the dense interfaces required by a trading platform.
Scalable theming
Client-specific themes exposed one of the biggest limitations of the existing system: colors were often tied directly to components or overridden locally. I introduced a layered token architecture separating primitive values from semantic intent and component usage. Themes could now evolve without redefining individual components, while shared semantic rules preserved hierarchy, states and contrast across the platform.
Layered color tokens
I introduced a lean token architecture separating raw color values from semantic roles. Light, dark and client-specific themes map their own palettes to the same semantic tokens, allowing the UI to adapt without component-level overrides.
Mapping the legacy platform with AI
With a stronger foundation in place, the next challenge was scale: how do we move a large existing platform toward the new system without manually redesigning every screen? Working with engineering, we used AI to accelerate the mapping of legacy screens and implementations against the new design system — identifying direct component matches, recurring patterns, inconsistencies, and gaps. This gave us a faster way to understand what could be migrated as-is, what needed design review, and where the new system still needed to evolve.
Evolving the system through real products
Mapping the legacy platform also exposed patterns the new design system didn't yet support. Rather than recreating every legacy component, I evaluated each gap against real product needs: could an existing component handle it, did it justify a reusable variant, or was it specific to a single workflow? This kept the system focused while allowing it to evolve from actual usage — turning each modernization effort into an opportunity to strengthen the design system rather than simply reproduce the legacy UI.
Planning the path forward
Modernizing a platform of this scale can't happen all at once. The challenge is deciding where migration creates the most value while allowing both systems to coexist without adding new design debt. I worked with engineering to shape an incremental approach: prioritizing high-impact and frequently reused patterns, modernizing screens as active product work touches them, and leaving stable legacy areas alone when the cost of migration outweighs the immediate benefit. AI helps make that planning more informed by surfacing dependencies, reuse opportunities and the potential impact of each change.