Leaving the Tech Debt Behind: How to Sustainably Improve the User and Developer Experience of a Legacy Frontend by Designing, Building and Migrating to a New Web Client

Legacy web applications often suffer from declining user and developer experience, driven by technical debt, outdated technologies, and architectural complexity. This paper presents a structured approach for modernizing such systems, targeting simultaneous improvements in user experience (UX) and developer experience (DX). The process encompasses strategy selection, requirements elicitation and prioritization, technology evaluation, and construction best practices, all grounded in research and practical guidelines. Evaluation methods are defined for both UX and DX, combining established frameworks and actionable technical metrics. The approach is applied to the real-world migration of a legacy web application to a new frontend, using a gradual Strangler Fig strategy. The case study demonstrates how well-founded decisions with stakeholder involvement, modular architecture, modern tooling, and resilient testing can break free from legacy constraints. Quantitative and qualitative results show substantial gains in user satisfaction, codebase health, and developer productivity.
The findings suggest that systematic modernization not only resolves immediate issues but enables sustainable, maintainable web applications. Future work should explore advanced quality assessment, long-term effects, and the integration of AI to support decision-making and automation in the modernization process.