Smarter, Faster Loans

Funding Societies

Underwriting loans is the foundation of our business at Funding Societies. Our sales and credit teams use our internally-built loan origination system to continuously react and adjust our risk underwriting and loan book.

Command Center

Command Center allows all roles across the loan process to take large quantities of data and transform them into an easily-digestible form to make reliable decisions. When I joined in August 2019, the underwriting platform was in its infancy, as it was in the process of being overhauled with more powerful features.

Design Lead, 2019–2021

I was responsible for coordinating across different teams to establish a final product based on my prototypes.

As the sole designer for the Command Center, I oversaw the design development of the entire platform suite, including information architecture, UX, and visual design.

Business Goals

Enabling credit decisions for scale, correctness, and resilience

  1. Automate manual decision-making with rule engine and data models
  2. Early warning system related to exposure or default risk
  3. Ensure that our underwritng system cannot be gamified easily
  4. Configurable and reusable workflows across loan products
  5. Enable safe self-serve experimentation with new loan products
See the impact ↗

Challenges

Behind our biggest revamp

  1. This was an all-or-nothing endeavour. Necessary loan information needed to be available to all roles across the sales and credit organisations in order to underwrite loans.

  2. Each loan has different risk assessment practices, which meant we needed to build loan files with different levels of visibility across sales and credit roles to fit with compliance requirements. The plan was to build step-by-step, tackling one loan product at a time.

  3. Our platform relied on many third-party integrations for functionalities that we did not develop ourselves, such as workflow management and pulling credit bureau data. There were constraints to the user flows related to calling these APIs.

  4. The need to store and process customer data into a central system was difficult in itself. Previously, there wasn’t a single source of truth for all loan-related matters.

An Excel credit memo saved locally on an analyst’s computer, filled using customers' PDFs, and communicated to the team via Trello.

Module Configuration

Our goal for the Command Center was to keep the user very focused and ensure they have the right information at their fingertips in order to complete the task. We decided to separate the loan underwriting processing into smaller, well-defined tasks.

This accomplishes a few things:

  • allowed the organization to track TAT for each task, which will help the business identify bottlenecks and optimize the operations
  • the modular nature of the tasks allows the business to make repeatable tasks for other types of loans, especially making it faster for the business to create new loan offerings
  • allowed the business to systematically analyse historical data based on specific tasks and work towards building a self-improving smart loan origination system

Contextual Inquiry

My colleague and I conducted contextual inquiry interviews with 20 users across different roles to deeply understand the current origination and underwriting process. It was especially important to capture nuances of the process that was not evident in the written output. 

One of the challenges that emerged was that users wanted to see all information available at any given time. The existing process had everything available to view at the same time across different windows of Slack, Excel, Google Sheets, and Trello.

We wanted our users to feel completing each defined task was seamless, that they weren’t sacrificing any of the information they were once used to.

I developed this framework to document the raw interviews, describing job stories at a high-level, then in detail with screenshots and quotes.

Configuration Exploration

Based on users’ feedback and the research output, I was able to significantly simplify the structure of the different workflow components. It sacrificed visibility on some information in exchange for clearer hierarchy and eliminated the full-view multi-module presentation.

In the first iteration, the module was a complex blend of hierarchical structures that mimicked Google Sheets. However, in practice the complexity led to confusion about which information belonged to which person.

Having users scroll to different parts of the screen performed worse than having users view everything in one glance, because the whole task took up too much vertical real estate. When users wanted to see everything, they end up having disconnected pieces that may not be useful all the time.

Configuration exploration: Stacking the information the users wanted to see in one task led to confusion.
Before: Three crucial relationships for each task (filter, view, create/reassign) were disjointed.
After: Users are able filter or sort with column headers and reassign single or bulk rows.

I made an exhaustive list of configurations for our task elements to do different tasks on the Command Center. We wanted to maintain consistent behaviour and covered the dozens of edge cases. The final arrangement establishes a logical, consistent eye-flow for users and groups task elements by their relationships to each other.

I also worked on a modular system that could accommodate new types of tasks in the future. This would allow the Command Center to evolve and support the entire lifecycle of loan processing.

The result gets users into the information they need to fill faster and creates a tighter correlation between the task input and the information needed.
Configuration exploration: Align content with two keylines. The hypothesis was we could use two-column sections to avoid vertical scroll and improve legibility.
Configuration exploration: Separate all the view-only content in a separate page. It gives the task a clear sense of “place” for users inside of the massive sea of mixed content.

Task Real Estate

Because screen real estate is at a premium in software, it was important that we defend our choice to add more whitespace to the UI.

It takes effort to keep something simple and we were not chasing simplicity in the abstract. At the feature level, we had to constantly negotiate to avoid crowding the screen with unnecessary features, and focus on translating how the business intended to make the loan process more modular.

Competitive analysis helped to contextualize our decisions and reminded everyone that just because a UI change feels drastic internally, when compared to the broader software landscape it might be completely within the norm.

Before: There simply was not enough space for the tasks users were expected to do when it was stacked inside the loan view.
After: In the modular approach, users were able to do everything directly on the loan itself, such as documenting their comments, which were previously Slack threads.

Customizing Angular Libraries

I learned to accept that edge cases for some interactions should follow tried and tested practices from established libraries. As the only designer on the team with a very lean team of developers, I wanted to remove potential bottlenecks in development. It was much more robust for the developers to use an existing library rather than spend time working on small elements.

I collaborated closely with developers to and I experimented to see how we can modify out-of-the-box solutions to fit our design system, instead of designing and then handing it off the engineers. Below are a few interaction design patterns where we included my suggestions from researching and styling Angular libraries.

Advanced Search

Our database of borrowers and their loans is our single source of truth. We used a searchbar in multiple parts of the Command Center to allow for the processing of repeat customers easily.

One of my suggestions was to use autocomplete, predictive search to provide instant results.
With the constraints of fetching from the database, I designed the search interaction to take place inside a modal instead.

Multiselect Dropdown

In this instance where users have to select multiple borrowers who are associated with one file, I experimented with angular multiselect dropdown libraries. For example, angular2-multiselect-dropdown has rich features to handle grouping, filter, and lazy load remote data.

Drag to see the code for the prototype.

Hover over table headers and rows

There are some parts which are built from scratch on top of the current library. In this example, our front-end engineer, Shubhro Bhownik created custom header component for the hover-arrow effect. The library that we are using would not work because it has server-side sorting.

The custom header makes backend calls. Based on whether the user has clicked up or down arrows, it sends the DESC/ASC parameter to the backend. When users click the arrow, it becomes highlighted as active so it stays on the header.

Using tables as forms

I designed many tables for viewing and selecting data but I will focus where users fill data. Our users were most familiar with Excel and I had to include similar features to create an intuitive experience for our Command Center.

One of the challenges was creating a web experience that had the level of performance that users were familiar with in Google Sheets or Microsoft Excel. We had to deprioritize features like enabling calculations inside cells to focus on precise, automated parsing of PDF statements directly into the cells, which would save users more time.

For some tasks where there used to be manual data entry for financial statements, we parse the values into the tables if possible.

UI Facelift

As Funding Societies was becoming as a financing company with robust internal tools, I felt it was the right time to unify the product’s visual language with that of marketing and consumer product surfaces. Having a cohesive brand image even for internal tools was important in presenting the company to external stakeholders like potential customers and investors.

We included typography and colour proportions foundations from marketing and consumer products. It was a simple swap but it helped to unify our surfaces across the entire company. This was an internal tool that our Engineering team built from scratch and it deserved to look like the best in class product that it was.

Type choices for clear information hierarchy

Command Center was a wash of the default Arial: navigation, labels, tables, buttons, searchbar are all set in the same typeface, and often in a single weight.

The first change was to use Inter, which was highly legible and more versatile in application. This simple change made a dramatic impact in refining the presentation of information. We used different type sizes and grayscale to add a clear layer of informational hierarchy within our UI that both simplified design decisions and served as a clear signal to users as to the utility of different text strings in the product.

Because processing loans is a primarily text-based decision making, changing any typeface is a herculean effort. I worked hand-in-hand with our front-end developers, Stuart Hammar and Shubhro Bownik to ensure the change-over for type and spacing was smooth.

Style Guide

I worked with Stuart and Shubhro to build a style guide for Command Center that could be easily adopted by other developers.

The Pantry Design System contains the library of common components used in the product and expands out to design principles for the design team to follow, as well as UX guidance on usage and implementation for every piece used in the product. This ranged form form elements to entire screen configurations.

The style guide was vital for both our developers and our designers, giving us a shared kit of parts to work from and ensuring consistency within our designs. This

reduced complexity in product development and set a consistent pattern of expected behaviors for users

. This framework was eventually adopted by additional suites in the customer-facing enterprise solution line and used across multiple teams at the company today.

Impact in Digits

We invested two years of work into our loan origination system rehaul, resulting in a significant improvement in our ability to automate and integrate AI into our credit underwriting. Our group CEO, Kelvin Teo, stated that we "have proven our AI-led credit capabilities in an unprecedented financial crisis".

In Q4 2021, Funding Societies annualised loan origination exceeded US$1 billion. The overall platform default rate remained under 2% through the pandemic.

We were able to improve the turnaround time for credit teams for accepting or declining loan cases by 30%. By capturing the end-to-end loan processing in one single system, 100% of TAT is recorded accurately on the Command Center.

“Funding Societies is establishing a bridge for these companies to access more sustainable and cheaper financing by building unique data sets on their performance and using AI-led technology to assess their creditworthiness more effectively than traditional models.”

Greg Moon,
Managing partner, SoftBank Investment Advisers