Legacy modernization
Presentation-layer modernization
A modern, on-brand interface for a mission-critical legacy application, delivered without a backend rewrite or business disruption.
Illustrative representation of the transformation — not an actual client screenshot
| Client | Large enterprise, name withheld |
|---|---|
| Platform | Mission-critical legacy application |
| Discipline | UX strategy, design system, frontend architecture |
| Scope | Presentation layer only — HTML/CSS with SCSS |
| Stakeholders | CEO, CFO, CTO |
THE CHALLENGE
Functionally Stable. Falling Behind Visually.
The application was functionally stable — it did what it needed to do. But its interface was outdated and increasingly out of step with where the brand was headed:
- The interface relied on older design trends and leaned heavily on dark colors.
- UI components were fragmented, with no shared source of visual truth.
- Styling was inconsistent from screen to screen.
- The system had little flexibility to support future growth.
Together, these issues were affecting usability, maintainability, and how the brand was perceived. Leadership wanted the product to feel modern and competitive — but a full redevelopment was off the table, because of:
- The high risk and complexity of rewriting a deeply integrated enterprise system.
- The time and cost of rebuilding from scratch.
- Disruption to established workflows, dependencies, and business operations.
The common assumption was that real modernization would require a complete rebuild. Leadership did not want to take that path.
Modernization didn't need a rebuild. It needed the right layer.
The presentation layer — the part of the application users actually see and interact with — was the right boundary for modernization. It could be rebuilt independently, while backend logic, workflows, and legacy HTML stayed exactly as they were.
KEY CONTRIBUTIONS
Three Moves That Made Modernization Possible
01 — Created a New Design System
A new design system replaced fragmented, inconsistent UI styling.
- Built from the ground up to replace fragmented, inconsistent UI styling.
- Defined core design tokens — color, typography, spacing — alongside reusable component standards.
- Established a single source of truth that keeps every screen, and every future enhancement, consistent.
02 — Designed a New Visual Experience in Figma
The modernized visual direction was fully designed and validated in Figma before a single line of production code was written — the same UX & product design discipline applied to every engagement.
- Delivered the complete modernized visual design in Figma, including a softer color palette and improved visual hierarchy.
- Redesigned key screens while keeping layouts and workflows familiar, so users wouldn't need retraining.
- Used the Figma designs to demonstrate the transformation to leadership and win executive buy-in before any development began.
03 — Set Up the Frontend Architecture
The modernized UI needed a frontend architecture that could run alongside the legacy system rather than replace it outright.
- Designed a scalable SCSS architecture separating global styles, shared utilities, component styles, and page-level layouts.
- Introduced an mx- prefix system and a parallel styling layer so modern and legacy UI could run side by side.
- Established a component-by-component migration process, with isolated testing and controlled deployment.
THE TRANSFORMATION
From Scattered Styling to a Governed System
TECHNICAL ARCHITECTURE
A Styling Architecture Built to Run Alongside Legacy Code
The SCSS structure keeps every layer of styling — tokens, utilities, components, pages, and the untouched legacy styles — isolated and easy to reason about.
Representative SCSS structure
- styles/
- global/Design tokens, typography, and the base reset
- shared/Utilities, mixins, and helpers used across components
- components/Buttons, forms, tables, cards
- pages/Page-level layouts
- legacy/Existing CSS — untouched
- main.scssSingle entry point
PARALLEL STYLING
Old and New, Running Side by Side
The existing styling remains intact while the new presentation layer is introduced alongside it.
SCSS
/* Legacy: left exactly as it was */
.btn-primary { ... }
/* Modernized: isolated by prefix */
.mx-btn { ... }
.mx-btn--primary { ... }HTML
<!-- Same markup, new layer --> <button class="btn-primary mx-btn mx-btn--primary">
MIGRATION STRATEGY
A Controlled, Component-by-Component Loop
Rather than a single cutover, each component moved through the same five-step loop — isolated, tested, and deployed on its own schedule.
Identify
Select one legacy component.
Build
Create its prefixed, modernized version.
Test in Isolation
Verify the new component without affecting legacy screens.
Deploy
Release it in a controlled way, with zero downtime.
Repeat
Move to the next component, starting the loop again from Identify.
THE SOLUTION
Modernize the Presentation Layer. Leave the Backend Alone.
The modernization strategy changed only the presentation layer, leaving backend logic, workflows, and legacy HTML fully intact — delivering visual and usability improvements without putting operational stability at risk.
01 — Presentation-Layer Modernization Without Functional Changes
The interface could be fully transformed without touching business logic or backend systems — modernization at a fraction of the cost, time, and risk of a full redevelopment.
02 — Parallel UI Implementation With Zero Downtime
A parallel styling system let the old and new UI run side by side, with full backward compatibility and no breaking changes to the existing HTML or CSS.
03 — Complete Rebranding Through a Modern Design System
A clean, minimal interface with a softer color palette and clearer visual hierarchy established one consistent design language across every screen, while keeping workflows familiar.
04 — Structured, Maintainable Frontend Architecture
A scalable architecture separating global styles, shared utilities, component styles, and page-level layouts reduced technical debt and made long-term maintenance easier.
05 — Controlled, Incremental Migration Strategy
A clear mx- class prefix separated modernized components from legacy code, enabling safe, component-by-component upgrades, each tested in isolation and deployed in a controlled way.
BUSINESS & UX IMPACT
What the New Presentation Layer Changed
Avoided High-Risk Redevelopment: The client received a modernized UI without rewriting the application, avoiding significant operational and financial risk.
Improved User Productivity and Experience: Cleaner layouts, clearer hierarchy, and simpler navigation reduced cognitive load and helped users complete tasks more efficiently.
Leadership Buy-In Through Demonstration: A working demonstration showed the UI could be modernized independently of functionality, which helped build executive confidence.
A Brand-New Look for a Legacy System: Users experienced what felt like a completely new application, even though the underlying system stayed the same.
Future-Ready, Scalable UI Foundation: The new presentation layer can now evolve on its own, supporting faster enhancements, easier maintenance, and long-term scalability.
Design-to-Code Consistency: Because the Figma designs, the design system, and the frontend architecture were built together, the delivered UI stayed faithful to the approved design — a foundation now in place for future work.
TOOLS & TECHNOLOGIES USED
What Powered the Rebuild
Figma — visual design and design system
Design tokens and a reusable component library
Presentation-layer styling architecture — SCSS-based structure
Modular design system with global, shared, and component-scoped styles
Legacy-compatible HTML/CSS enhancement strategy
No backend or framework changes were required. The entire engagement stayed scoped to the presentation layer — explore the full Legacy Application Modernization service, or see how reusable components factor into faster delivery in the Design Toolkit .
SUMMARY
Modernization Didn't Need a Rebuild. It Needed the Right Layer.
Related service
READY WHEN YOU ARE
Working on something similar?
Tell us where the work is stuck and what better looks like.
Book a Consultation