Modernizing Our Loan Origination Experience
Review The Current Experience
The 'Start A New Loan' (SANL) experience consists of 15 pages where mortgage brokers enter information on behalf of their client. Mortgage applications are a very dense, time-consuming process, so any opportunity to make small enhancements and reduce cognitive load for the user is key.
The loan application process is the main function in our portal, and received over 38,000 average monthly visitors in 2024, with over 10,000 of those being unique visits.
Over 80% of our users upload a mortgage application from their internal Loan Origination System (LOS), so most of the fields will already be filled. The main roles of the mortgage broker are to review the imported information to ensure accuracy, and to fill in the remaining information in our portal.
Additionally, 99.4% of our visits are on desktop, and as a result, our current mobile experience has been neglected. We have debated on which reason came first, but regardless, our mobile experience for SANL needed to be enhanced as well.
We began by doing a heuristic review of the current experience in our broker portal. The accompanying Figma files were often times out of date, and every page of the experience lived in a single file. We also took this opportunity to break each page of the experience out into it's own Figma file, allowing us to have more space for explorations and reduce load times for the files.
Our scope for this project was limited to minor enhancements, so larger upgrades were saved to a backlog. Examples of enhancements we made were updating select fields with 3 or fewer options to radio groups, re-ordering questions to improve chunking related information, and component construction to reduce the effort of further updates.
We built components that utilized Boolean properties, and nested components to limit the number of frames used. Below is an example of the Military Service section within the Client Information page with several layers of nested components, able to be toggled on and off depending on the scenario. The blue text denotes a content change from the current experience.
Rebuilding Nearly 20 Pages
Due to the scale of this work, I pulled in a few other designers from my team to help out when they had extra time from their main work. I delegated pages to these other designers to keep us on-track, following up with them and other stakeholders at weekly sync meetings.
Above is an example of how we constructed each page of the SANL experience. We included several full-page examples to show how each card appeared in context on the page, but most of the work went into creating page variations to show how each scenario would look. Pink annotations showed rules and conditional logic, while the blue annotations showed content changes or updates we made from the current experience.
While we utilized the Rocket Design System for this enhancement, some of our patterns were not represented in the design system, as it was primarily built for our consumer teams. We spun up our own team design system where we built custom components as-needed, such as nested input fields, data display components, and table variants.
Implementation and Further Enhancements
Weekly meetings with engineering and product stakeholders ensured our enhancements were in-scope, and that we stayed on-schedule. This was also time for us to receive feedback on the designs and workshop them before the next meeting. Once all pages had been completed, the designs were handed off to the engineers to implement.
.png)
The modernization of the mortgage application software with the Rocket Design System resulted in significant improvements to the user experience and overall efficiency of the SANL process. Key outcomes include:
Improved User Experience: The updated design enhanced usability and clarity, resulting in a more intuitive and streamlined application process for users.
Consistent Branding: By aligning with the Rocket Design System, we achieved a consistent and cohesive brand identity across all pages of the application software.
Increased Efficiency: Small enhancements and optimizations contributed to a more efficient and user-friendly experience, reducing the time and effort required to complete the application process.
Stakeholder Satisfaction: Regular communication and collaboration with stakeholders ensured alignment and buy-in throughout the project, leading to a successful implementation of design updates.
Conclusion
This project highlighted the importance of effective collaboration, clear communication, and meticulous attention to detail when implementing design updates within a complex software system. By leveraging the Rocket Design System and adopting a user-centered approach, we were able to modernize our mortgage application software and deliver a seamless user experience for our customers.