Imagine running a payment platform built over a decade ago — reliable but rigid, expensive to maintain, and unable to scale. Every update is a struggle, risking unexpected failures. The monolithic architecture makes adding new features slow and costly. Meanwhile, the outdated interface frustrates users, falling short of modern expectations.
Many companies face this challenge: an aging system that no longer fits their needs but is too critical to replace overnight. Our client needed a solution that balanced immediate improvements with a long-term modernization strategy.
The big question was, how do you get there without tearing everything apart? They couldn’t afford the downtime or delays that come with a full backend rewrite.
They needed a solution that could work within the constraints of their current system while laying the groundwork for a scalable, future-ready platform.
Their vision was clear:
- Scalability — A platform that could handle increasing transaction volumes and integrate new features seamlessly.
- Flexibility — A modular system that allowed independent teams to innovate without stepping on each other’s toes.
- User satisfaction — A sleek, modern interface that improved the merchant experience and supported new business opportunities.
- Cloud readiness — A platform architecture designed to enable a seamless transition to the cloud.
That’s where our phased approach came in. By tackling the most pressing pain points first — the frontend and user experience — we created a plan that balanced quick wins, like generating immediate additional revenue from improved merchant-facing solutions, with strategic long-term investments. This wasn’t about ripping and replacing; it was about modernizing step by step, ensuring every move brought immediate value while building toward a sustainable future.
Step-by-step approach to application modernization
The application modernization process was strategically divided into three key phases, each designed to address specific challenges of the legacy platform while building towards a scalable, future-ready architecture:
- Phase 1: Re-platforming the frontend for immediate business value
Recognizing the urgency of delivering quick wins, we began by re-platforming the user interface using React. This modernization transformed key merchant-facing tools, introducing a sleek and responsive design while adding new features to enhance usability. By focusing on the frontend, we enabled the client to generate additional revenue quickly without altering the legacy backend. To ensure seamless integration, we also developed a Proxy API, which bridged the modern React-based frontend with the existing backend architecture. - Phase 2: Implementing DevOps practices with Kubernetes for deployment efficiency
Understanding that the next phase involved transitioning to a micro-frontend and microservice architecture, we prioritized establishing a robust infrastructural foundation to support this shift. During this phase, we introduced DevOps practices, including a containerized CI/CD pipeline with Kubernetes integration, to orchestrate environments and ensure scalable, reliable deployments. - Phase 3: Transitioning to a micro-frontend architecture for flexibility and scalability
This phase focused on breaking the monolithic frontend into modular, independently deployable components, enabling the micro-frontend modernization. This approach allowed internal teams to innovate faster, seamlessly integrate new tools, and scale the system to meet growing demands while enhancing operational flexibility and adaptability.
Currently, we are working on Phase 4, which focuses on transitioning the backend to a fully microservices-based architecture. This change will eliminate the need for the Proxy API, as the new backend will integrate directly with the micro-frontend structure. Once this phase is completed, we’ll provide a detailed blog post covering the challenges and solutions.
This blog post begins the series by diving into Phase 1, highlighting how frontend re-platforming created immediate value and set the foundation for the platform’s long-term modernization. Future posts will cover the DevOps enhancements and the shift to a micro-frontend architecture in detail.
The rationale for focusing on the frontend first
Modernizing the legacy payment platform meant tackling its outdated monolithic architecture, built on WebForms and the .NET Framework. While the system still worked, it was costly to maintain, hard to scale, and provided a frustrating user experience for merchants. Rewriting the backend from scratch would have taken years, and the client needed to see a return on their investment as quickly as possible, so we focused on re-platforming the frontend to deliver meaningful improvements faster.
We presented the client with two options: Blazor and React. Blazor, a .NET-based framework, allowed the client’s team to stay within their existing technology stack, making the transition easier for developers familiar with .NET. It was a practical, cost-effective option for incremental improvements. However, Blazor lacked the flexibility and ecosystem needed for the modern, scalable architecture the client envisioned.
React, on the other hand, offered a cutting-edge solution with a robust developer community, advanced UI/UX capabilities, and seamless integration with future technologies like micro-frontends. While React required retraining and a higher initial investment, its long-term benefits far outweighed the challenges. After careful evaluation, the client chose React to align with their long-term business goals and the need for a future-ready platform.
To connect the new React frontend with the legacy backend, we developed a Proxy API using .NET Core. This middleware simplified the backend’s complex API responses into formats optimized for the React frontend while providing a flexible layer that adapts as the platform evolves. By organizing backend functionalities into modular endpoints, it also lays the groundwork for a gradual transition to a microservice architecture in the future.
By starting with the frontend, we enabled the client to rapidly deploy monetizable improvements for merchants, avoid the delays of a lengthy backend rewrite, and see immediate results that improved merchant satisfaction and drove revenue growth — all while maintaining continuity in their existing operations.
Modern tools and features that drive value
Re-platforming the frontend allowed us to significantly enhance the tools merchants rely on daily while introducing new features that streamlined their workflows and improved their overall experience. Here’s how we delivered these meaningful upgrades.
Virtual terminal: One of the core tools we improved was the virtual terminal, a critical feature that enables merchants to create and manage transactions directly. We revamped its interface, making it more intuitive and responsive while incorporating a modern design that simplified transaction workflows.
Transaction management: Similarly, we enhanced the transaction management tool, focusing on usability improvements like better navigation, advanced filtering options, and a more seamless interaction experience. These updates ensured merchants could quickly and efficiently manage their day-to-day operations.
Modernized insights: A major effort went into redesigning the reporting system, which is essential for providing merchants with insights into their transaction data.
Shareable results: Beyond improving the UI for clarity and usability, we introduced key features like the search URL. This functionality allows merchants to save or share their search results, encoded directly in the URL, making collaboration and data sharing easier than ever. For example, a merchant can filter reports by specific criteria, copy the resulting URL, and share it with a team member who can access the exact same results instantly. By introducing search URL validation, we ensured data security and integrity while enabling a more collaborative workflow for merchant teams.
Personalized and efficient searches: To further streamline workflows, we implemented a saved preferences feature. Merchants can now retain frequently used search filters and settings, so they don’t have to reconfigure their reports every time they access the system. This improvement drastically reduced repetitive tasks, saving merchants valuable time.
Improved navigation: We also enhanced navigation by allowing users to return to their exact place in a search after exploring a detailed view. Whether using the browser’s back button or an in-app navigation link, merchants can seamlessly continue where they left off. This small but impactful change addressed a common frustration, improving efficiency and the overall user experience.
Each of these features was carefully designed to address real pain points identified through merchant feedback. These enhancements collectively transformed the user experience, allowing our customer to deliver immediate value to their clients.
Laying the groundwork for future phases
In this blog post, we covered Phase 1, where we re-platformed the frontend to deliver immediate value without disrupting backend operations. This step improved user experience, increased revenue potential, and set the stage for further modernization.
In the next post of this series, we’ll dive into Phase 2, where we introduced DevOps automation and Kubernetes to streamline deployments and create a scalable infrastructure. These enhancements were critical for enabling Phase 3, where we transitioned to a micro-frontend architecture to support independent feature development and greater agility — an approach we’ll cover in a separate post.
If your business is navigating a similar modernization journey, contact our team to discuss how we can help. Stay tuned for the upcoming posts!
