Success Story Digital Experience

Leading US Bank Accelerates Their Path to Digital Banking

This US bank was looking to implement a large and complex UI platform that would be used to monitor and perform actions on payments as they flowed through the bank’s systems.

Getting the architecture right at the start of a project was essential. It would save a lot of pain for both the bank as well as future developers who would inherit that work.

Apexon was engaged to implement a custom solution that simplified the maintenance and use of the system with a streamlined architecture and more intuitive UI.

  • US bank

    Founded in 1869, the firm is headquartered in New York and maintains offices in all major financial centres around the world

  • 2nd on the list of investment banks in the world by revenue

    2nd on the list of investment banks in the world by revenue

  • largest United States corporations by total revenue

    Ranked 59th on the Fortune 500 list of the largest United States corporations by total revenue

the Results

Key Outcomes

More Flexible Architecture
More Flexible
Architecture

Faster Software Update Cycles
Faster Software
Update Cycles

Better, More Consistent Online User Experience
Better, More Consistent
Online User Experience

Our methodology

how
we did it

Apexon works with companies across the digital lifecycle.

Go Digital
Go Digital

Accelerating the delivery of new digital initiatives with confidence

Be digital
Be digital

Creating the infrastructure and foundation to scale digital initiatives

Evolve Digital
Evolve Digital

Leveraging data and analytics to continuously improve digital delivery processes

The challenge

Creating a “one stop shop” for the bank’s users

End-users had to navigate an excessive amount of legacy UI tools that didn’t offer a consistent look and feel. To fix this, the bank needed a new architecture to support the system. It would save a lot of trouble for both the bank as well as future developers who would inherit that work.

The bank’s developers did not want a software application where the user interface and data access code were merged into a single program from a single platform. That would require separate teams coordinating unnecessarily. It also wanted to avoid creating a large codebase that would quickly become difficult to understand and maintain as it grew.

With this in mind, Apexon worked with the bank to define three core requirements for the solution:

User-friendly

User-friendly Enable quick and easy navigation via one consistent (web-based) app

Dev-friendly

Dev-friendly Separate release cycles for functionally discrete parts of the app

Robust

Robust Functionally discrete parts of the app must be available to end-users if other parts, or the platform as a whole, go down

These same requirements applied to the complex frontend app that would need to be built as well.

The Solution

Streamlined Architecture & More Intuitive UI

Apexon was engaged to implement a custom solution that simplified the maintenance and use of the system with a streamlined architecture and more intuitive UI.

The solution incorporated several key elements:

Micro Frontend

Micro Frontend This design approach is highly recommended for legacy systems that are becoming difficult to maintain. Each element of the UI (a micro frontend) is served as a separate component. Those components are then bundled together in one overall UI (a shell/wrapper).

Web Components

Web Components Each micro frontend is defined as an HTML custom element making it easy to embed any Angular or React component into the shell. These web components easily communicate with other components and the shell and support browser navigation (in the way other single-page application routing works). They also support deep-linking and URL sharing.

iFrames

iFrames iFrames provide a backup to web components and allowed the embedding of a standard HTML document (the micro frontend) inside another HTML document (the shell).

streamlined architecture and more intuitive UI

Apexon’s solution approach provided the bank with several key advantages:

Protection against software regressions

Protection against software regressions The insulated nature of the micro frontend pattern means as new components are added existing components are protected against software regressions.

Accelerated software update cycles

Accelerated software update cycles The micro frontend approach enables Web components to be updated separately. This allows for a breakdown of large changes, such as major upgrades to framework versions, into smaller tasks.

Centralized UI data

Centralized UI data The web component approach, along with iFrames, allows firm-wide components to be embedded into a newly designed “one stop shop” UI. Apexon was able to provide one consistent UI without compromising on code maintainability and the product’s resiliency.