From Monoliths to Modularization: Microservices, Design System Beginnings, and the First Micro-Frontend

In our last article, we tackled the challenge of rebuilding authentication using microservices and a small frontend platform, transforming the authentication monolith into something more modular and maintainable. That experience revealed both the value of modularization and the organizational hurdles standing in its way. Now, a fresh opportunity surfaced with Buy Now, Pay Later (BNPL), demanding an even bolder leap into microservices, design systems, and our very first micro-frontend (MFE).

BNPL On Fire

Though installment loans have been around for decades, they were traditionally a niche offering by big banks or department stores. Then came a wave of fintech companies like Affirm, Klarna, and Afterpay, catapulting short-term, mostly interest-free installment plans into mainstream popularity. Suddenly, everyone was clamoring for a BNPL solution, and we couldn’t afford to be left behind. Our existing servicing monolith was already a beast — its decades of tech debt meant even the smallest changes triggered a cascade of unpredictable issues. Integrating BNPL into that chaos would’ve taken years and led to countless overnight fire drills for developers, not to mention a frustrating, bug-ridden experience for our customers. It was clear this platform needed to be newly built, much like the rebuild of the authentication monolith.

Recognizing the Opportunity

With BNPL’s urgency forcing our hand, we had a rare opportunity to rethink how we built customer-facing platforms. I saw BNPL as more than a one-off platform — it was a proving ground. If we could demonstrate both the speed of React build teams and the value of a design system, we’d set the foundation for tackling even bigger challenges, like the larger, deeply entangled monoliths.

This is where great leadership made all the difference. My manager didn’t have the answers, but he understood the stakes. He trusted me to define the “what” and “how” while making sure I had the executive backing to figure it out. That kind of trust gave me the freedom to look beyond the immediate problem.

Overcoming Skepticism

There were two major hurdles to overcome: convincing teams React could handle the complexity of this platform and demonstrating the value of a component library in delivering scalable design solutions.

At this time and even to this day, React is one of the most supported and modern frameworks for UI development, known for being extremely fluid for customer experiences. While we had demonstrated its power in rebuilding our authentication experience, many doubted whether it could handle the complexity of a servicing platform, as well as our ability to confidently maintain it in production using our system’s infrastructure.

In this case, my manager was the final decision maker, and I had spent a year demonstrating my expertise to earn his trust, guaranteeing his support to move forward.

Then there was the resistance to a design system. Because I was in charge of the engineering effort, I decided we’d move forward with building a component library regardless of the resistance. If we couldn’t convince people through debate, we’d show them through results.

We also had an unexpected ally: an externally contracted designer assigned to the BNPL platform. He believed in design systems, and together, we aligned on a vision for the future. Because he was a contractor, he felt freer to operate in the gray with me, forging ahead without explicit sign-off from design leadership. And like me, he was an outsider — unburdened by the company’s legacy processes — which made it easier for both of us to challenge the status quo. More often than not, fresh eyes see the path forward without the emotional ties that weigh others down.

Building the Foundation

The Makings of a Design System

With alignment on the vision, we started pulling every component from the UX designs into a separate module, following the principles of the atomic design pattern — an approach I had used and appreciated in the past for its emphasis on building scalable systems. Each component was added to Storybook, which became the starting point for documenting and formalizing our design system. Shortly after its initiation, the component library was quickly implemented in the modernized authentication experience. Seemingly overnight, teams from across the company began adopting it, recognizing its ability to dramatically accelerate project kickoffs while ensuring adherence to the company’s branding.

Building on that momentum, the head of visual design became a pivotal partner. He harnessed our component library to launch the company’s first-ever formal design system, unifying design practices and ensuring our ability to deliver themable, white-labeled experiences across various platforms.

A Baby MFE is Born

As we were delivering the BNPL platform, we also took the opportunity to explore what could be our first step toward a modular frontend approach. We started with a simple module — part of the payment experience — which would eventually become the first MFE. Even though it was ‘just’ a payment module, it proved that MFEs could deliver focused functionality without a monolithic entanglement.

Meanwhile, we expanded our microservices ecosystem — it wasn’t controversial, just time-consuming to learn best practices and churn these out. These services were necessary not only for BNPL but for our other hefty monoliths as well.

The BNPL platform went live with a modern UI, blazing-fast performance, and near-zero production issues. It was not only a big win for React and the design system, but also a reminder that, in large organizations, action, not words and slides, wins the day.

Looking back at our different architectural strategies, the BNPL architecture brought us slightly closer to full modularization.

Looking Ahead

The BNPL platform validated that modern tools and approaches could work at scale, even in an organization steeped in legacy systems and cultural resistance. One standout success was the component library, which became a foundational asset across the company — now used in over 100 repositories to accelerate new platform launches with consistent branding and functionality.

Equally important was the partnership with our head of visual design, who guided the evolution of the library into a fully realized design system, unifying our approach to user experiences. Meanwhile, the first MFE we introduced for BNPL provided a glimpse of how isolated, reusable modules could integrate seamlessly with larger platforms, paving the way for future MFE initiatives.

Armed with a proven design system, a budding MFE strategy, a larger set of microservices, and a newfound confidence from BNPL’s success, we set our sights on the real beast: the larger and more deeply entangled monolith.