What is MaaS
MaaS (Mortgage as a Service) is a web-based mortgage service built by Rocket Mortgage. It works as a one-stop mortgage service plug-in on a Salesforce-based Customer Relationship Management system. Financial institutions such as commercial banks that collaborate with Rocket for mortgage loan business can use MaaS to support their own clients who want to purchase a new home or refinance an existing mortgage.
Why MaaS
Before the idea of MaaS, banks whose mortgage services were supported by Rocket had to come to Rocket and initiate the mortgage application on RocketMortgage.com. With MaaS, which is embedded in the Salesforce system, a tool used by millions in the finance industry for multiple types of tasks, bankers from different financial institutions could offer mortgage services to their borrowers in a system they already use.
As a comprehensive mortgage service hub integrated into Salesforce CRM, MaaS encompasses the full suite of services pertaining to loan application, origination, and underwriting. Now, an entire mortgage department is ready to go by just clicking a little blue button.
Record Input Form
Design Task
The liabilities page records all debts, including existing mortgages and car loans, that the borrower is obligated to pay. My task was to create the liability input form page once the user clicked the "Add Liability" button.
Liability Main Page
User Friction - Information Complexity
The input flow diverges and converges at multiple points based on various conditions of the record, such as whether it was pulled from credit and whether it was shared with others. With these numerous variations, the information can become complicated for users to process. Therefore, the design goal was to make the information as clear as possible to reduce the cognitive load on users.
liability record input flow
Solution Focus
To tackle the issue more effectively, I opted to design with a focus on two key principles:
1. Information chunking: group closely related fields together for easier comprehension.
2. Information layering: establish appropriate variants and nested components to accommodate different mortgage conditions.
Design Process
Before diving into the page build in Figma, I created sketches to organize the information according to these principles.
liability record input grouping sketches
After the information chunking and layering, I began transferring the design to Figma to develop the variations. I also wrote detailed annotations for each condition to make it easier for engineers to understand.
Basic Information section input variations
Final Form Design
Example Liability Input Form
Loan Handoff - Error Panel
Design Task
The Loan Handoff page is the last step before the mortgage application is forwarded to underwriting. At this stage, if any issues arise during the handoff process, Rocket Mortgage will return failure reasons, prompting loan officers to attempt resolving the errors before a successful loan handoff and my responsibility was to build the error panel that displays this information.
successful loan handoff screen
User Friction - Limited Error Feedback
Given over 1000 error types in total, our backend infrastructure lacked the ability to specify whether each error could be resolved by the users or they would have to contact Rocket for further help. This situation placed a SIGNIFICANT burden on users who often had to expend substantial effort in resolving issues without clear guidance on which ones were actually solvable on their end.
Solution Focus
Consequently, the solution focus was to create an error panel that aimed to alleviate the users' cognitive load and interaction efforts in the process, maximizing the usability with the limited engineering feasibility at hand.
Early Versions
After conducting a usability test on UserTesting.com, the feedback received indicated that most users favored the idea of the side error panel, as well as the checkmarks. Therefore, the decision was made to combine solutions 2 and 3 so that:
- The error sidebar with a check button remains on the right side of every page of the application process. This allows users to refer to it while navigating between different pages.
- The checkboxes are kept so that users can keep track of the error handling progress.
UI & Copy Iteration
With the main direction settled, I proceeded to fine-tune the UI and copy of the sidebar to ensure it could maximize user efficiency.
Final Design
Reflection
Design with scalability.
This project really gave me an opportunity to immerse myself in working within a design system. Both applying Salesforce's existing design system and building the MaaS component library enabled me to brush up my skills making design more scalable and maintainable.
Striking balance between desirability and feasibility.
When designing the error panel, I needed to strike a balance between user experience and engineering feasibility. Collaborating with the engineering team allowed me to understand the backend capacity from the outset, enabling me to make decisions that are both desirable and feasible.
.png)
