By Chandrasekhar Panda
Over the past decade, digital channels for banks have evolved from “convenient additions” to primary business channels. For example, the fintech company Revolut has built its business model around a convenient front-end1 banking experience. Meanwhile, traditional banks have accumulated an average of more than ten apps, which often still have the look and feel of the pre-smartphone age. Given the new primacy of digital channels, user experience has become a key differentiator for the companies that deploy them well. Revenue growth rates for the frontline business with modern digital channels can be two to four times higher than for those with legacy ones.
In many cases, digital channels have accumulated large legacies: overwhelming amounts of functionality in current ATMs, as well as mobile and online apps and a multitude of apps for distinct customer journeys, each with a different look and feel. In recent years, banks have had to grapple constantly with usability issues, which are compounded by a short innovation cycle of around 18 months for mobile apps and online front ends. The result is a continuous struggle within the teams to keep pace with functionality enhancements, create the next app, and maintain consistency across all front ends.
Small changes, big impact
Software development has firmly established the principles of the selective modernization of individual components and business capabilities along with maximum reusability. This approach has led to the development of microservices and serverless architecture. The world of mobile and online front ends, however, has only recently caught on. Micro front ends are minimal components that serve as the user interface (UI) for apps and websites. They can optimize reusability by implementing a small number of truly independent, technology-agnostic components.
In practice, a mobile app working with micro front ends would consist of several technological components with a common look and feel. These reusable parts ensure that individual components and technologies can be changed and modernized quickly. Minimal components, such as log-in screen, buttons, and application screens, can be flexibly reconfigured to deliver new customer journeys with minimal additional development.
Five essential elements of the micro front end
Designing easily reusable but distinct individual micro front ends might seem self-evident, but banks can find it cumbersome to achieve a consistent look and feel across channels. Successful front-end optimization consists of five elements:
- Reusable components. Building a design system—that is, a comprehensive library—of reusable UI components industrializes front-end development while enabling a consistent user interface across channels.
- Tech-agnostic design. When each element (for example, the log-in button) of the design system is technology agnostic, teams gain access to isolated, modular pieces of code with the best available technology. This approach also relies on the server side for rendering, which increases resilience.
- Browser-agnostic technologies and frameworks. By avoiding the need to design front ends for different browsers, companies can gain independence from user technology.
- DevOps integration. Companies that integrate the micro front-end approach with a DevOps toolchain can also fully automate user acceptance and integration testing.
- World-class developer portal. The developer portal acts as an internal marketplace for all information for the developers. A world-class portal for the front end integrates the design system, the reusable code feature, and the underlying technology usage.
These five key elements allow companies to continuously modernize their apps while upgrading the design system every 18 months in parallel. They also improve resilience, accelerate time to market, and provide development teams with more freedom on technology choices.
One bank, for example, recently used a micro front end to redesign and redevelop its mobile app. The agile team, tasked with adding new functionality to the app, employed a DevOps approach and developer portal to minimize the need to gain alignment among stakeholders and maximize reuse. The implementation of the micro front end has reduced the effort required to bring new functionalities to the market by 50 percent, since common elements such as screen layouts and buttons can be fully reused across the app.
Looking ahead, we believe that entire-app modernizations will no longer be required, as individual components can now be modernized without having to develop and deploy a new app from scratch.
Making micro front ends a reality
Micro front ends set the stage for a more efficient and nimble approach to front-end optimization, but the concept is not without its own challenges. The development of a state-of-the-art developer portal and design system requires banks to invest significant time, resources, and effort. It also comes with an additional level of technology complexity that companies will need to manage.
In addition, these new demands require companies to upgrade their development team’s skills as well as implement an agile approach to ensure the quality of end products. To facilitate adoption, the team will need to build capabilities in agile and knowledge in new development concepts. Recommended support includes executive coaching along with definition of individual learning journeys for the team members.
By taking these actions, banks can implement a broader app-modernization program that can move more quickly and efficiently—and increase revenues from their frontline business in the process.
1 Includes all front ends, from branch to ATM to mobile and online.
Chandrasekhar Panda is an expert in McKinsey’s Abu Dhabi office.