Our client is an equipment leasing and financing company with customers in construction, healthcare, refrigeration, and other industries. Customers apply for financing through client-approved, third-party brokers who collect and submit applications on their behalf. Our client evaluates the applicant’s creditworthiness and creates leasing options based on their findings.
The method for collecting data from brokers was no longer serving the client. Their existing Broker Portal was time consuming, not user friendly, and did not integrate well with the client’s Salesforce CRM and other systems. These limitations led to low user adoption and brokers relying on slow, manual processes. Additionally, both brokers and the client were unable to easily gain insights into aggregated data, which made it difficult to analyze the deal lifecycle.
The client’s leadership successfully worked on another project with Chateaux and sought them out for their aptitude in the web application space. Chateaux was tasked with replacing the existing Broker Portal with a state-of-the-art system employing the latest technologies to produce a best-in-class broker solution.
This project was a multifaceted endeavor that applied Chateaux’s expertise in digital transformation services, microservices and micro frontends, and data warehousing. In this success story, we will explore how Chateaux’s digital transformation team developed the mobile responsive UI for the Broker Portal web application.
Chateaux’s Digital Transformation Team led the UI development of the project, gathering requirements, designing wireframes and mockups, and developing the User Interface of the Broker Portal web application.
The team determined the Broker Portal web application would be composed of five distinct micro frontends, or separate user interfaces, that come together under one container app. These components include an application flow section to create new loan applications; a dashboard to track applicant progress; a portfolio to track existing customer and broker data; a deal maker to complete the financing process; and a resource center for Q&A support.
UI Components and Micro Frontends
- Application Flow
Previously, brokers submitted applications in a Salesforce-driven UI , but the existing flow was too lengthy, incorporating over 100 fields just to initiate an application. Right away, the team sought to simplify and streamline this process and also capture data more effectively while still leveraging Salesforce. A formerly 20-minute process now takes only 5 minutes to complete.
- Applicant Progress Dashboard
Dashboards were created to track an application’s progress and subsequent approval or denial. Applications can be viewed on a case-by-case basis or in bulk. These insights benefit both the brokers, who can track progress from the road, and the client, who can evaluate a broker’s progress and identify problems such as a broker with too many denied applications.
- Existing Customer Portfolio
Dashboards were added to showcase the total lifecycle of all funded applications, detailing broker management, customer status, payment status, and more.
- Deal Maker
A dashboard was created for brokers to easily see and manage deal options for approved clients.
- Resource Center
A new, reorganized Resource Center was also created in the Broker Portal. Instead of calling into customer service, Brokers can go directly to the center and pull up information faster for their customers.
React.js and UI libraries plus webpack were used to build the web app and its assets. Each area was developed as a separate micro frontend, creating a series of high-level container projects that all come together as one. The web app was deployed using Azure App Services on the client side.
The new Broker Portal consolidates multiple points of business logic into one flow in a user-friendly, mobile-responsive UI. New dashboards showcase aggregated data to provide insights for both the brokers and the client, all in the same accessible web application. These easy-to-use visualizations provide deep, real-time information about customer’s application or deal status. Brokers can now track performance metrics in a user-friendly web app that can be accessed in the office or on the road.
In addition to enhanced insights, the web app also saves time. The application process has been trimmed down from a 20- to now 5-minute process thanks to new web screens. While credit check and other third-party validation systems were previously used for the application lifecycle, they were dealt with as separate functions. Now, these validations are consolidated into the web app, making the entire process more efficient. In addition, prequalification mechanisms were added using business logic to ensure that only qualified customers continue in the application process. This cut down extra work for brokers and saves time and hassle for unqualified prospects.
Microservice architecture and micro frontends were both used in this project. Each allow updates to be made to different parts of the application without impacting the rest. By separating resource development allocations across different projects, a single or set of developers can really focus on a specific micro frontend. This makes development easier and more secure and provides a total end-to-end service.