MTrac
Proprietary Loan Origination Software for Mortgage Brokers
MTrac
Proprietary Loan Origination Software for Mortgage Brokers
MTrac
Proprietary Loan Origination Software for Mortgage Brokers
Majestic Home Loan
B2B Mortgage Lender
UI/UX Designer
with 1 Back-end Engineer
UI/UX Design, UX Research
Adobe Xd, HTML/CSS, SQL, ASP
2020, 4 weeks
Majestic Home Loan
B2B Mortgage Lender
UI/UX Designer
with 1 Back-end Engineer
UI/UX Design, UX Research
Adobe Xd, HTML/CSS, SQL, ASP
2020, 4 weeks
Majestic Home Loan
B2B Mortgage Lender
UI/UX Designer
with 1 Back-end Engineer
UI/UX Design, UX Research
Adobe Xd, HTML/CSS, SQL, ASP
2020, 4 weeks
Background
Majestic Home Loan, a small wholesale mortgage lender, lacked a dedicated customer support team. Instead, brokers with issues reached out to various departments—sales, underwriting, or even to me, a UX designer. The company had no plans to hire a support team or invest in user research, so the burden fell on already overworked staff.
Most of the support tickets are related to the proprietary loan origination software, especially about locating loans and asking the current status in the system.
Although I was hired to improve marketing aspects, such as the company website and landing pages, I recognized this issue was affecting the brokers and internal teams. I decided to address the root causes by improving the legacy enterprise software.
Excessive Support Tickets Dragging Multiple Teams' Performance
Majestic Home Loan, a small wholesale mortgage lender, lacked a dedicated customer support team. Instead, brokers with issues reached out to various departments—sales, underwriting, or even to me, a UX designer. The company had no plans to hire a support team or invest in user research, so the burden fell on already overworked staff.
Most of the support tickets are related to the proprietary loan origination software, especially about locating loans and asking the current status in the system.
Although I was hired to improve marketing aspects, such as the company website and landing pages, I recognized this issue was affecting the brokers and internal teams. I decided to address the root causes by improving the legacy enterprise software.
Excessive Support Tickets Dragging Multiple Teams' Performance
Background
Majestic Home Loan, a small wholesale mortgage lender, lacked a dedicated customer support team. Instead, brokers with issues reached out to various departments—sales, underwriting, or even to me, a UX designer. The company had no plans to hire a support team or invest in user research, so the burden fell on already overworked staff.
Most of the support tickets are related to the proprietary loan origination software, especially about locating loans and asking the current status in the system.
Although I was hired to improve marketing aspects, such as the company website and landing pages, I recognized this issue was affecting the brokers and internal teams. I decided to address the root causes by improving the legacy enterprise software.
Excessive Support Tickets Dragging Multiple Teams' Performance
Background
Research Process
Understanding the Industry
I educated myself through independent research and interviews with the operations manager to better understand the wholesale mortgage industry. Unlike typical B2B SaaS products like HubSpot, Jira, or ADP, mortgage brokers don’t stick to one software. Instead, they use multiple wholesale lenders’ platforms depending on loan scenarios—choosing Lender A for government loan cases and Lender B for expedited loan cases.This insight helped me understand the software's role within a broker's broader workflow. I hypothesized that enhancing external consistency through smaller UX improvements would be beneficial.
Understanding the Mortgage Operation Process
I expanded my understanding of the mortgage process by watching YouTube tutorials for loan officers, underwriters, closers, and secondary marketers. Afterward, I asked targeted questions to department managers at Majestic Home Loan to fill knowledge gaps.I documented these findings and created a simple workflow diagram for myself and to be shared with the development team. Image 1.1
Competitor Analysis
In this niche industry, public resources were limited. I analyzed competitor UI/UX designs by checking on the tutorials on their websites and their YouTube channels. Recreating competitor interfaces and flows enhanced my understanding of industry standards and trends, building a valuable resource library.
Extra Efforts
Without user tracking tools in the software, I analyzed server logs to identify user flows and feature traffic. This gave me a clearer picture of how brokers interacted with the software and where friction occurred.The dashboard had the second-highest traffic, followed by key areas like loan registration, underwriting conditions reply, and the secondary department for locking interest rates.Furthermore, I recorded how each department works, thanks to the operations manager, I could see how a loan is registered and submitted, initial documents were generated, underwritten, closed, and funded.
Image 1.1 - Workflow in the company
Understanding the Industry
I educated myself through independent research and interviews with the operations manager to better understand the wholesale mortgage industry. Unlike typical B2B SaaS products like HubSpot, Jira, or ADP, mortgage brokers don’t stick to one software. Instead, they use multiple wholesale lenders’ platforms depending on loan scenarios—choosing Lender A for government loan cases and Lender B for expedited loan cases.This insight helped me understand the software's role within a broker's broader workflow. I hypothesized that enhancing external consistency through smaller UX improvements would be beneficial.
Understanding the Mortgage Operation Process
I expanded my understanding of the mortgage process by watching YouTube tutorials for loan officers, underwriters, closers, and secondary marketers. Afterward, I asked targeted questions to department managers at Majestic Home Loan to fill knowledge gaps.I documented these findings and created a simple workflow diagram for myself and to be shared with the development team. Image 1.1
Competitor Analysis
In this niche industry, public resources were limited. I analyzed competitor UI/UX designs by checking on the tutorials on their websites and their YouTube channels. Recreating competitor interfaces and flows enhanced my understanding of industry standards and trends, building a valuable resource library.
Extra Efforts
Without user tracking tools in the software, I analyzed server logs to identify user flows and feature traffic. This gave me a clearer picture of how brokers interacted with the software and where friction occurred.The dashboard had the second-highest traffic, followed by key areas like loan registration, underwriting conditions reply, and the secondary department for locking interest rates.Furthermore, I recorded how each department works, thanks to the operations manager, I could see how a loan is registered and submitted, initial documents were generated, underwritten, closed, and funded.
Image 1.1 - Workflow in the company
Research Process
Understanding the Industry
I educated myself through independent research and interviews with the operations manager to better understand the wholesale mortgage industry. Unlike typical B2B SaaS products like HubSpot, Jira, or ADP, mortgage brokers don’t stick to one software. Instead, they use multiple wholesale lenders’ platforms depending on loan scenarios—choosing Lender A for government loan cases and Lender B for expedited loan cases.This insight helped me understand the software's role within a broker's broader workflow. I hypothesized that enhancing external consistency through smaller UX improvements would be beneficial.
Understanding the Mortgage Operation Process
I expanded my understanding of the mortgage process by watching YouTube tutorials for loan officers, underwriters, closers, and secondary marketers. Afterward, I asked targeted questions to department managers at Majestic Home Loan to fill knowledge gaps.I documented these findings and created a simple workflow diagram for myself and to be shared with the development team. Image 1.1
Competitor Analysis
In this niche industry, public resources were limited. I analyzed competitor UI/UX designs by checking on the tutorials on their websites and their YouTube channels. Recreating competitor interfaces and flows enhanced my understanding of industry standards and trends, building a valuable resource library.
Extra Efforts
Without user tracking tools in the software, I analyzed server logs to identify user flows and feature traffic. This gave me a clearer picture of how brokers interacted with the software and where friction occurred.The dashboard had the second-highest traffic, followed by key areas like loan registration, underwriting conditions reply, and the secondary department for locking interest rates.Furthermore, I recorded how each department works, thanks to the operations manager, I could see how a loan is registered and submitted, initial documents were generated, underwritten, closed, and funded.
Image 1.1 - Workflow in the company
Research Process
Design Process
Focus on the External Consistency in Mortgage Industry
I revisited my research notes to understand why competitors made specific design decisions. Most competitor dashboards relied heavily on table-based layouts. Interviews with sales representatives confirmed this was to facilitate communication both within broker companies and between brokers and sales reps. For example, brokers often print the dashboards to facilitate discussions and share updates more effectively.I also ensured that terminology matched industry standards, making the interface familiar and lowering the learning curve for brokers. Image 2.1, 2.2
Personas
Using the gathered information, I created personas for different user types.:Mega broker companies with multiple user roles.Owner of the companyLoan OfficerLoan Officer Assistant (multiple in some cases)Small broker companies where one person wears multiple hats.Loan OfficerAssistantI considered different default view settings of ordering items by role. However, to minimize the confusion and maintain communication across roles, I decided not to implement this but noted it as a potential future update.These personas contributed to the later projects. Particularly during reorganizing information architecture of the software.
Prototype and User Testing
I built a web prototype and tested it with sales representatives who had prior loan officer experience, which is very similar to our customers, mortgage brokers. This approach provided a broker-like perspective without direct access to customers.The test involved tasks such as locating specific loans, navigating to particular pages, and remembering loan details. Afterward, I conducted interviews to gather improvement suggestions. Image 2.3
Image 2.1 - LOS dashboard UIs United Wholesale Mortgage (2019)
Image 2.2 - NMSI (2020)
Image 2.3 - Prototype (HTML/CSS, ASP)
Focus on the External Consistency in Mortgage Industry
I revisited my research notes to understand why competitors made specific design decisions. Most competitor dashboards relied heavily on table-based layouts. Interviews with sales representatives confirmed this was to facilitate communication both within broker companies and between brokers and sales reps. For example, brokers often print the dashboards to facilitate discussions and share updates more effectively.I also ensured that terminology matched industry standards, making the interface familiar and lowering the learning curve for brokers. Image 2.1, 2.2
Personas
Using the gathered information, I created personas for different user types.:Mega broker companies with multiple user roles.Owner of the companyLoan OfficerLoan Officer Assistant (multiple in some cases)Small broker companies where one person wears multiple hats.Loan OfficerAssistantI considered different default view settings of ordering items by role. However, to minimize the confusion and maintain communication across roles, I decided not to implement this but noted it as a potential future update.These personas contributed to the later projects. Particularly during reorganizing information architecture of the software.
Prototype and User Testing
I built a web prototype and tested it with sales representatives who had prior loan officer experience, which is very similar to our customers, mortgage brokers. This approach provided a broker-like perspective without direct access to customers.The test involved tasks such as locating specific loans, navigating to particular pages, and remembering loan details. Afterward, I conducted interviews to gather improvement suggestions. Image 2.3
Image 2.1 - LOS dashboard UIs United Wholesale Mortgage (2019)
Image 2.2 - NMSI (2020)
Image 2.3 - Prototype (HTML/CSS, ASP)
Design Process
Focus on the External Consistency in Mortgage Industry
I revisited my research notes to understand why competitors made specific design decisions. Most competitor dashboards relied heavily on table-based layouts. Interviews with sales representatives confirmed this was to facilitate communication both within broker companies and between brokers and sales reps. For example, brokers often print the dashboards to facilitate discussions and share updates more effectively.I also ensured that terminology matched industry standards, making the interface familiar and lowering the learning curve for brokers. Image 2.1, 2.2
Personas
Using the gathered information, I created personas for different user types.:Mega broker companies with multiple user roles.Owner of the companyLoan OfficerLoan Officer Assistant (multiple in some cases)Small broker companies where one person wears multiple hats.Loan OfficerAssistantI considered different default view settings of ordering items by role. However, to minimize the confusion and maintain communication across roles, I decided not to implement this but noted it as a potential future update.These personas contributed to the later projects. Particularly during reorganizing information architecture of the software.
Prototype and User Testing
I built a web prototype and tested it with sales representatives who had prior loan officer experience, which is very similar to our customers, mortgage brokers. This approach provided a broker-like perspective without direct access to customers.The test involved tasks such as locating specific loans, navigating to particular pages, and remembering loan details. Afterward, I conducted interviews to gather improvement suggestions. Image 2.3
Image 2.1 - LOS dashboard UIs United Wholesale Mortgage (2019)
Image 2.2 - NMSI (2020)
Image 2.3 - Prototype (HTML/CSS, ASP)
Design Process
Final Design and Deployment
Presentation for Sales Representatives
I held a short presentation with the operations manager, for the sales team to explain the new features, release plan, and how to communicate these updates to brokers. Making sure our sales team can support the customers effectively. Image 3.1
Incremental Deployment
Instead of all-at-once deployment, the deployment started with smaller broker companies, I stayed online 24/7 to assist sales reps and customers. The initial feedback was positive, and I implemented minor adjustments, such as adjusting the number of loans displayed and adding extra filter items. After these refinements, I rolled out the update to larger broker companies.
Image 3.1 - User Manual
Presentation for Sales Representatives
I held a short presentation with the operations manager, for the sales team to explain the new features, release plan, and how to communicate these updates to brokers. Making sure our sales team can support the customers effectively. Image 3.1
Incremental Deployment
Instead of all-at-once deployment, the deployment started with smaller broker companies, I stayed online 24/7 to assist sales reps and customers. The initial feedback was positive, and I implemented minor adjustments, such as adjusting the number of loans displayed and adding extra filter items. After these refinements, I rolled out the update to larger broker companies.
Image 3.1 - User Manual
Final Design and Deployment
Presentation for Sales Representatives
I held a short presentation with the operations manager, for the sales team to explain the new features, release plan, and how to communicate these updates to brokers. Making sure our sales team can support the customers effectively. Image 3.1
Incremental Deployment
Instead of all-at-once deployment, the deployment started with smaller broker companies, I stayed online 24/7 to assist sales reps and customers. The initial feedback was positive, and I implemented minor adjustments, such as adjusting the number of loans displayed and adding extra filter items. After these refinements, I rolled out the update to larger broker companies.
Image 3.1 - User Manual
Final Design and Deployment
Result
-90 % Decrease
in Support Requests
Changes in Organic Visitors, from Dec 2019 to Nov 2020
100 % Increase
in Condition Reply Speed from Brokers
Changes in Organic Visitors, from Dec 2019 to Nov 2020
-90% Decreased Support Tickets
in Support Requests
100% Faster Customer Reply
in Customer Reply
Result
Result
Result
Related Projects
What I valued the most that I gained from this quick project was the trust from the senior management. Thanks to their trust and support, I was able to start implementing other UX improvements.
Product Finder Update
As the next short-term project, a senior programmer and I re-designed another single page feature. This page was connected to multiple major steps in loan process, registering loan, selecting rate & pricing, and locking rate.For readability and marketing purpose, I highlighted the pricing information and displaying tips to maximize the potential that the loan scenario has. For usability, I placed the default value that are most common per each product categories (Conventional / Non-QM / FHA-VA), minimizing inputs, and adding tool-tips for the new brokers in the industry. Image 4.1
Loan Detail Screen Update
Accommodating to the national mortgage application change(GSE to URLA), I worked with senior programmer to create loan detail page. This page resembles the URLA format so that brokers can easily edit their loans without a stiff initial learning curves.
Loan Registration Process Update
Similar to a common product fidner you can find in retail markets, I added seamless step-by-step loan registration feature into the software. It had multiple automated features that I developed with RPA (WinAutomation, currently Microsoft Power Automate), such as loan imports from other loan origination software through industry standard format (MISMO 3.2 and 3.4). Image 4.2
MTrac Design System for LOS and Mobile App
Lastly, in 2022, I started creating MTrac design system based on Material Design 3 for UI design & front-end overhaul of MTrac and its mobile application. Image 4.3, 4.4, 4.5
Image 4.1 - Product Finder
Image 4.2 - Loan Registration
Image 4.3 - Design System
Image 4.4 - New LOS Design
Image 4.5 - Mobile App
What I valued the most that I gained from this quick project was the trust from the senior management. Thanks to their trust and support, I was able to start implementing other UX improvements.
Product Finder Update
As the next short-term project, a senior programmer and I re-designed another single page feature. This page was connected to multiple major steps in loan process, registering loan, selecting rate & pricing, and locking rate.For readability and marketing purpose, I highlighted the pricing information and displaying tips to maximize the potential that the loan scenario has. For usability, I placed the default value that are most common per each product categories (Conventional / Non-QM / FHA-VA), minimizing inputs, and adding tool-tips for the new brokers in the industry. Image 4.1
Loan Detail Screen Update
Accommodating to the national mortgage application change(GSE to URLA), I worked with senior programmer to create loan detail page. This page resembles the URLA format so that brokers can easily edit their loans without a stiff initial learning curves.
Loan Registration Process Update
Similar to a common product fidner you can find in retail markets, I added seamless step-by-step loan registration feature into the software. It had multiple automated features that I developed with RPA (WinAutomation, currently Microsoft Power Automate), such as loan imports from other loan origination software through industry standard format (MISMO 3.2 and 3.4). Image 4.2
MTrac Design System for LOS and Mobile App
Lastly, in 2022, I started creating MTrac design system based on Material Design 3 for UI design & front-end overhaul of MTrac and its mobile application. Image 4.3, 4.4, 4.5
Image 4.1 - Product Finder
Image 4.2 - Loan Registration
Image 4.3 - Design System
Image 4.4 - New LOS Design
Image 4.5 - Mobile App
Related Projects
What I valued the most that I gained from this quick project was the trust from the senior management. Thanks to their trust and support, I was able to start implementing other UX improvements.
Product Finder Update
As the next short-term project, a senior programmer and I re-designed another single page feature. This page was connected to multiple major steps in loan process, registering loan, selecting rate & pricing, and locking rate.For readability and marketing purpose, I highlighted the pricing information and displaying tips to maximize the potential that the loan scenario has. For usability, I placed the default value that are most common per each product categories (Conventional / Non-QM / FHA-VA), minimizing inputs, and adding tool-tips for the new brokers in the industry. Image 4.1
Loan Detail Screen Update
Accommodating to the national mortgage application change(GSE to URLA), I worked with senior programmer to create loan detail page. This page resembles the URLA format so that brokers can easily edit their loans without a stiff initial learning curves.
Loan Registration Process Update
Similar to a common product fidner you can find in retail markets, I added seamless step-by-step loan registration feature into the software. It had multiple automated features that I developed with RPA (WinAutomation, currently Microsoft Power Automate), such as loan imports from other loan origination software through industry standard format (MISMO 3.2 and 3.4). Image 4.2
MTrac Design System for LOS and Mobile App
Lastly, in 2022, I started creating MTrac design system based on Material Design 3 for UI design & front-end overhaul of MTrac and its mobile application. Image 4.3, 4.4, 4.5
Image 4.1 - Product Finder
Image 4.2 - Loan Registration
Image 4.3 - Design System
Image 4.4 - New LOS Design
Image 4.5 - Mobile App
Related Projects