Designing An Approval Letter Process

Mortgage as a Service (MaaS) is a ready-to-use, customizable mortgage origination platform within Salesforce. Clients often seek an approval letter before applying for a mortgage to bolster their home-buying offers. This feature was absent in MaaS, necessitating the design of both a pre-qualified approval letter (PAL) and a verified approval letter (VAL).
Client
Rocket: Mortgage as a Service (MaaS)
Date
November 10, 2023
Role
UX Design, UI Design, User Research, Design Leadership

The User's Journey

A Prequalified Approval Letter (PAL) is a preliminary lending offer based on assumptions, and not fully underwritten. A Verified Approval Letter (VAL) is stronger, as it's underwriting-reviewed.

Starting with user flows for PAL and VAL requests, initially, we designed parallel flows with similar steps. Users chose approval type at the beginning, upgrading later if needed. Upon further consideration in the interest of simplicity, we defaulted to the PAL flow, giving the option to upgrade later, halving screens and streamlining the experience. Users can convert to a mortgage application at any point, retaining entered data but transitioning to a more comprehensive flow.

The first iteration (top) and final iteration (bottom) of our verified approval letter user flow.

Designs

Once we created the user flow, we began designing the screens using the Salesforce Lightening Design System (SLDS). The broker needed to accomplish 4 main categories of tasks:

  1. Enter their client's application information such as personal information, employment and income, assets, credit, liabilities, and purchase goals.
  2. Enter loan structuring information such as product selection, regulatory tests, and automated underwriting tests.
  3. Adjust the amount of the approval letter down if necessary, download a copy of the approval letter, and convert to a verified approval letter if applicable.
    1. If the user opted to upgrade to a verified approval letter, tasks would be assigned to the broker such as uploading the necessary documentation on behalf of their client.
  4. Convert the application to a mortgage at any point in the process.

For this project, all we needed to do was create the approval letter portion, as the rest of the data collection and underwriting tests had already been designed. We modified the application start screen to include an option for an approval letter, but most of the design work centered around the newly added Approval Letter page.

Prototype of updating the amount of your approval letter, downloading it, and then upgrading to a verified approval letter.
Various pages in the approval letter experience.

User Interviews

We designed all screens, formed an interactive prototype, and initiated user testing. I orchestrated an unmoderated UserTesting.com trial, involving mortgage loan officers. After a pilot test for clarity, we conducted the primary test with six users. Alongside the intern I was mentoring, I observed, documented, and synthesized outcomes. Utilizing a Lucid template, I structured test questions and participants, incorporating research objectives and key findings. The test highlighted users' desire for enhanced educational elements such as tooltips for clarifying terms, more comprehensive PAL and VAL distinctions, and better elucidation of 'converting to a loan'.

User testing notes and synthesis

Design Iteration

With our user testing completed, we made the necessary tweaks and began the work of finalizing our designs. We added annotations and organized our screens by type. Each page in our file belonged to a step in the approval letter flow, and each page consisted of main components, notes and resources, and page variations.

Design file for approval letter experience.

Lessons Learned

I discovered the value of providing ample information and context, even when dealing with specialized 'power users' who might be assumed to grasp the fundamentals. Due to variations in mortgage industry terms, imposing our own terminology on loan officers caused confusion and frustration during testing. Moreover, I honed the skill of task delegation to our winter intern, who excelled in ideation, UI design, user research, and synthesis. Collaborating closely on this project, I was delighted to welcome her back to the team the subsequent summer for further engagement.

What I'd Do Differently

While we did eventually reach the conclusion that creating one slightly longer user flow was better than creating two parallel flow (one for PAL and one for VAL, which the user selects at the beginning), I wish I had pushed myself to find that simplicity earlier. I was following the conventional thinking of creating a diverging set of paths at the beginning instead of looking at the flow from a different perspective from the beginning.

What's Next

The designs were completed and put in the developer's backlog, but unfortunately the project was put on pause all together due to challenges with the mortgage market. I enjoyed working on this project and hope it can be picked back up in the future.