Implementin a Design System in an Existing Project

Abstract

A large web application that had been developed over several years was modernized by introducing a design system to replace an existing Bootstrap based implementation. The aim was to determine how a design system could be adopted gradually in an ongoing project while maintaining development flow and allowing old and new parts of the application to coexist during the transition. Practical methods for replacing legacy components with PrimeNG and design system components were explored, and the refactoring of one form was carried out to gain experience, create reusable patterns, and estimate the workload for the remaining implementation work. The work was carried out through a literature review, an implementation phase in the case project, and a survey for developers and designers. New features were created with the design system and reusable form components were developed. An old form was refactored by creating a new version that followed the design system structure. A mapping between old and new components was produced, and an AI assisted approach was tested to speed up repetitive refactoring tasks. A checklist for verifying that refactored views no longer used Bootstrap or custom legacy code was also created. The results showed that the design system improved consistency, collaboration, maintainability, and development speed once the initial learning phase had passed. Usability and accessibility improved using standardized components and wrapper-based solutions. Challenges were related to documentation, missing components, migration issues, and the coexistence of the old and new implementations. The survey results supported the findings from the implementation work and the literature. It was concluded that a gradual dual strategy of building new features with the design system and refactoring existing sections one at a time was an effective way to modernize a large legacy application. The work produced practical guidelines, time estimates, AI prompt examples, and recommendations to support the full transition to the design system in the case organization.