GPARENCY LLC

Empowering lenders to craft competitive quotes

GPARENCY's Lender Portal product introduces a concept familiar to the real estate industry: quotes. In a marketplace where lenders have to compete with one another, they must be able to separate themselves by creating competitive quotes that provides unique value to investors.

Our goal was to empower lenders to create custom quotes that fit their lending criteria in order to maximize their chances of providing a mortgage.

I was the UX Designer on this project collaborating with my team to research key financial formulas and data, creating mockups for the team, and delivering final assets for development.

PLATFORM:

B2B Marketplace

TIMELINE:

Q1 2023

ROLE:

Product Designer

TEAM:

PM, CDO, Data Analyst, 5 Engineers

* The data listed on here are obfuscated figures and do not represent an actual property and quote. All information on this case study is my own and does not reflect the views of GPARENCY.

Disconnect Between Us And Our Users

Lenders want data in order to stay competitive

In order for lenders to be confident that their quote can win, they can adjust their quote based off their competitors to increase their chances of winning.

But our process did not accurately reflect our user's workflow

Our users (lenders) utilize a mix of financial data and formulas in order to create a competitive quote to finance a property. The quoting process is a dynamic process and includes various factors which were not reflected on the workflow we created.

Our process did not consider the complexity of quotes and did not include key financial data our lenders used leading to a quote with missing data that would never be processed.

Old designs of how quote submissions were

Our flow was missing inputs for key financial data making them inaccurate

The current experience revealed usability issues

When performing a heuristic evaluation it revealed various issues that hindered our user's experience: inconsistencies, lack of error prevention, inflexibility, and outdated designs.
The lack of customization was a priority as it resulted in lenders either:

not submitting a quote
submitting an inaccurate quote that would never go through

This was a driving factor for us in improving this workflow to increase the success of our lenders.‍

Heuristic evaluation noting down the usability issues

Researching Loan Type Differences

Different loan types have different compositions

We met with our lending department and learned that the three loan types offered have unique differences from one another during the quoting process.

From our learnings we were able to identify the common fields found on all three loan types and sort the unique fields into their respective buckets.

We were able to increase the number of data fields from 17 to a maximum of 38: a 76% increase of data on quotes.

Chart breakdown of what fields are included in each loan type

All three loan types have certain data fields found only in their category

Time Constraints Limited Exploration

Moving away from the sidebar and into a modal

Initially, I thought a modal would be a great as we could break up the form into different steps making it more digestible to our users.

However, I realized that this would be a disruptive process for our lenders as it required many detailed interactions which would be a painful experience when performed on a modal.

Modal exploration instead of our sidebar

Exploration of reusing our existing modal for quotes

What about using the entire page instead?

A full-page form was a stronger alternative as we could utilize white space and make it easier to review information. We could easily show every section and reduce the amount of scrolling needed when reviewing.

Unfortunately, our deadline was moved up and we could only improve the current design of the sidebar as part of our scope.

I do believe that this was the design direction we should have chosen if given more time to work on this project.

Full-page form exploration instead of our sidebar

Exploration of full-page form taking inspiration from Google Forms

Addressing Usability Issues

Improving Visibility

We implemented states into our input fields from our design system to improve accessibility and give users a visual cue when performing an action with each field.

Adding states on input fields to address lack of visibility

Improved Visual Design

We standardized our input fields to create design consistency across the entire form as well as how they were used with our other products.

Updated designs that are consistent with our products

Expanded Options For Time Lengths

We provided more flexibility for users to enter in either "Years" or "Months" rather than limiting them to "Years" as both formats were applicable depending on the loan.

Providing lenders with more options instead of limiting them

Required Fields

Red asterisks were added to required fields to reduce the chances of errors when submitting.

Reset Button

To give users control and freedom, we added a reset button to undo any mistakes or start a clean slate instead of having to manually delete and re-enter data.

Exploring Concepts To Display Rates

Rates added an extra layer of complexity

We learned that some lenders would tailor quotes to their needs which included fields we did not previously have. We separated rates into two parts: Index + Gross Spread and Total Rate.

‍The former was simpler and required three pieces of information which were already included with our process.

The latter opened up the opportunity for lenders to have more control on certain criterias for a quote.

Version 1: Disabling additional fields behind radio button selection

For the first iteration, we explored showing lenders all possible data fields they could edit even if they were submitting via Index + Gross Spread.

However, we thought this created too much vertical height on the form already and would create additional noise for those who did not need to further customize their rates.

Prototype of version 1 when additional fields are disabled until total rate is chosen

2nd Period is disabled until Total Rate is chosen

Version 2: Additional fields shown only when Total Rate is chosen

We explored hiding the fields under Total Rate only when the corresponding radio button is selected. This helped reduce the vertical height of the form and also removes the additional text not relevant for lenders who would not choose this option.

We went with this version as we felt this provided the smoothest experience by minimizing distractions.

Prototype of version 2 when additional fields are shown when total rate is chosen

2nd Period is hidden until Total Rate is chosen

Simulating A User's Workflow

We restructured the data fields by order of importance

Through our conversations with our SMEs in the commercial real estate industry, we learned that lenders started quotes by beginning with the most to least important data.

We reflected this flow by reorganizing the data fields on the quote process to simulate their workflow.

Order of importance that a lender goes through when quoting

Organizing fields based on the order a lender would review by when submitting a quote

Learnings & Takeaways

Unfortunately, my position was impacted by layoffs right before the release of this feature.

I was very excited to work on our Lender Portal as it was put on pause and we were looking to attract new lenders to use our product starting with this project.

This project helped strengthen my financial knowledge by empathizing with our lenders to understand the complexity of quotes and the data needed to provide a mortgage.

These were metrics we could have used to define success:

76% increase of data fields added to quotes, increasing a lender's competitive edge and accuracy
Reduced implementation time by 2-3 weeks as we utilized our design system and reused our previously built input fields

If given more time on this project, I would remove the sidebar as that was how it was originally built and lead users to a separate page where they can quote the deal and also see a summary panel of all of their decisions.

I believed this would improve the experience by reducing the amount of scrolling needed to check on their work and also create breathing room on the form so that it was easier to use.

Different design direction if given more time and resources

My vision of how this could be further improved if given more time and resources