UX Research

Email Marketing

Jan 2023 - Mar 2023

Pre-application decision flow

Better has digitised the mortgage space with its unique products which help Americans on their path to home ownership. The pre-application flow is a series of questions which the customer answers, to help Better understand what kind of a product they are looking for. Accordingly, the user can be directed to the relevant product flow.

The solution:

After multiple discussions within the product team, I suggested that we should take the user through the refinance pre-application flow, taking in their financial standings and later, based on these finances, show a comparison between the two products (cash-out refinance and HELOC) while highlighting the product which is most suitable for them.

The problem

With the introduction of a new product offering (HELOC) under the refinance options, the whole refinance flow needed to be revamped.

To introduce this new offering, the user was asked to choose either "HELOC" or "cash-out refinance" and from that point forward, the user was pushed into the respective flows. This was a quick fix and a new flow was required since the user did not understand the difference between the two products and hence had to go through both the flows individually to understand what product was best suited to their needs.

It was essential to suggest the user which product was most suitable according to their financial standings without them having to go through the two individual flows.

The context:

An everyday customer has little to no knowledge of how mortgage works. There are multiple financial offerings based on the customers needs, which have a lot of fine-print.

In simple terms, there are two broader categories which Better tackles - “Purchase” and “Refinance”.

Purchase refers to purchasing a new house, while refinancing refers to taking out money of your existing house.    

Traditionally, under the refinance category, better user to offer only “Cash-out refinance”. With the introduction of “Home equity line of credit” (HELOC), a new product was now being offered. This meant that the user now had to choose one of the two products offered under the refinance category. With no real context or understanding of the similarities or differences between the two products, the customer was confused.

The problem

With the introduction of a new product offering (HELOC) under the refinance options, the whole refinance flow needed to be revamped.

To introduce this new offering, the user was asked to choose either "HELOC" or "cash-out refinance" and beyond that point, the user was pushed into the respective flows.

This was a quick fix and a new flow was required since the user was not able to understand the difference between the two products, which meant that the user had to go through both the flows individually to understand what product was best suited to their needs.

The context

An everyday customer has - little to no knowledge, of how mortgage works. There are multiple financial offerings based on the customers needs, which have a lot of fine-print.

In simple terms, there are two broader categories which Better tackles - “Purchase” and “Refinance”.

"Purchase" refers to purchasing/buying a new house, while "Refinancing" refers to taking out money of your existing house.    

Traditionally, under the refinance category, Better used to offer only “Cash-out refinance”. With the introduction of “Home equity line of credit” (HELOC), a new product was now being offered. This meant that the user now had to choose one of the two products offered under the refinance category. With no real context or understanding of the similarities or differences between the two products, the customer was usually confused on choice of product.

The solution

After several discussions with the product team, I suggested redesigning the 'refinance pre-application flow' to guide users without asking them to choose a product upfront. This idea was later implemented on the website. Instead of requiring users to state their preference at the start, the flow evaluates their financial situation and then presents a comparison between two options—cash-out refinance and HELOC—highlighting the product that best fits their needs.

The problem:

With the introduction of a new product offering (HELOC) under the refinance options, the whole refinance flow needed to be revamped.

It was essential to suggest the user which product was most suitable according to their financial standings without them having to go through the two individual flows.

The context:

Purchase refers to purchasing a new house, while refinancing refers to taking out money of your existing house.    

The solution:

User flows

Current user flow

Proposed user flow

Detailed decision tree

Existing screens

An understanding of the existing screens from a UI perspective was important to keep the new design screens consistent. We did a quick analysis of the designs and keeping the design structure the same when building the decision screens.

Below are a couple of the existing screens from the current flow.

Decision Screen Iterations

While majority of the screen components existed within the pre-application flow, the decision screen was something which needed design.  There were a few points to take into consideration:
Provide enough information for the user to be able to differentiate between the two products.
Highlight the better option of the two according to their needs and financial standings.

There was a lot of back and forth between the design team and the product manager. Here are a few initial screens.

Final Design

With some final changes based on feedback from the design team, and a few more information point changes from the product manager, I finally landed on this screen.

The suggested option was highlighted by the light green background on the card. Further, a “Better recommended” tag was added to the suggested option. The primary CTA was used for the suggestion vs a tertiary CTA for the other option.