How do we help borrowers apply for mortgages online?
They tasked my team of 3 to redesign their white-label point-of-sale (POS) system product demo for lenders to help borrowers apply for mortgages online.
3-Week Design Sprint
Pen and Paper
On a team of 3 designers, I:
Conducted UX research including 3 user interviews, 5 card sorts and 3 rounds of paper prototype tests.
Wrote usability test plan and conducted 5 rounds of usability tests with mid-fidelity wireframes.
Managed the project timeline, organization and kept track of key deliverables.
Presented our research and design process to stakeholders and engineering team.
Informed all stages of the research and design process, including stakeholder meetings, competitive analysis, design studio, low-fidelity wireframing, and hi-fidelity iterations.
Elphi did not have a compelling product demo to show potential investors.
Their existing product demo was also not based on user research and was not competitive with other POS systems in the mortgage space.
My team of 3 designed a point-of-sale product demo that allowed mortgage loan borrowers to apply for loans and calculate their rates online.
The demo simplified the paper application form for users and reduced the number of clicks users had to go through compared to Elphi's competitors.
What are our business considerations?
Elphi is selling their POS software to lenders, which include:
The POS software needs to be customizable for each lender and easy and attractive to use as lenders are all competing for mortgage buyers.
Elphi had existing screens from their UI designer but they were not backed in user research.
Industry highly regulated by Frannie and Freddy. Everything that is collected by the lender has to go into the 1003 Form
Elphi's developers already had begun coding the product based on initial designs, so our team needed to consider the work that had already been done for the project.
Elphi differentiates itself by using open API and blockchain technology to provide a secure history of transactions.
However, they compete with both banks and other SaaS companies that provide similar mortgage origination POS software.
We needed to design a product that could compete in terms of simplicity of use and visual appeal.
Minimize number of clicks someone has to go through to complete the mortgage application form
Have a mortgage calculator where users can put in different numbers to see different rates
be answer-responsive - the form would adapt according to how users answer different questions
Have menu where you can go back and edit
What features do we need?
Key features needed:
Menu to orient users
We compared features across 3 POS systems that are similar to Elphi's. We used Neilson's 10 usability heuristics as well as features we identified as important from our discovery research. We then decided which key features we needed based on our findings.
How do borrowers apply for mortgages online?
We wanted to speak directly to users who had applied for mortgages to understand the following:
Whether they had applied online and/or offline for a mortgage and/or refinance
How they felt about the mortgage application process
How they approached the mortgage application process
Example questions I asked were how much research they did and whether they completed the process in one sitting.
“When I think about making a big purchase...I want to understand what I'm committing to.”
“The application process took longer than I expected, it should have been more automated.”
“The process was a lot of waiting, we had to mail or fax forms, and then wait to get things back.”
I conducted 3 of the 9 user interviews.
We interviewed users who were:
Between ages 28-65
Middle and upper class
After sharing my findings with my team members, we came up with some key takeaways:
They use mortgage calculators to research rates
Want a reputable bank
Find out lender information from personal network and/or agent
Are cautious about personal information online, but to different degrees
Synthesizing our interview findings to create personas.
Who are the primary and secondary users?
Jordan is ready to apply for a mortgage. They've chosen an online application for its convenience.
Goals & Needs
An easy-to-use and efficient application process
Low/competitive interest rates and packages
Alex is starting the process of purchasing a home and is exploring their options.
Seeking knowledge about application and loan process
A calculator to compare rates and mortgage packages
Worried about security
No direct communication with a loan officer during the application process
Skim over content
Wants to understand what information is needed to apply for a mortgage and why it's necessary
How do borrowers organize information?
I conducted 4 of 9 rounds of closed card sorting to understand how borrowers expected to fill out the mortgage application form.
We broke up the 1003 Uniform Residential Loan Application into 13 cards that covered the major sections of the form as well as 1 card for social security and date of birth, which we wanted to test specifically.
Purchase, down, and loan payment
Declarations (violations against you)
Purchase or refinancing?
Do you own any real estate?
SSN + DOB
The 1003 Uniform Residential Loan Application Form that lenders must submit with borrowers' information.
Users organized questions into ones that were easy to answer and ones they’d need more time on.
Users expected to be asked for their SSN despite our assumptions from our background research and competitive analysis that users might be sensitive about putting in that information online.
Round 1 of 9 card sorts we conducted to understand how users organized information on the 1003 form.
Paper Prototype Testing
We took our card sorting results and synthesized them along with the flow of the existing application form as well as our competitors flow to come up with 3 main sections of the form:
Personal Information user can complete quickly
Personal Information that the user needs more time to answer
I conducted all 6 rounds of paper prototype testing with my teammate to understand the order of questions users expected to be asked on each of the 3 sections of the form.
Our paper prototype for the application form.
Users were expecting to have to fill in a lot of information. This showed that they were comfortable with the number of questions we put in each section
Users grouped all demographic questions together, different from how they are distributed on the form.
1 of 6 participants who tested our paper prototype.
The complete user flow starting at the mortgage home on lender site to completing form and returning to user dashboard.
Designing an intuitive and simple form
In order to begin the design process, we conducted a design studio to ideate different design solutions and converge as a team.
Round 1: 5-minute sketch of my solution for form, including menu, progress indicators, and question layout.
Round 2: My second 5-minute solution after pitching my initial sketch to team.
What changes do we need to make to our designs?
I brought the second half of our flow into mid-fidelity wireframes.
I wrote the usability test plan and conducted 4 rounds of usability tests on the mid and hi-fi wireframes. I wanted to test:
Whether users could tell where they were throughout the form
Whether users could understand the language of what they were being asked
How confident users felt about their ability to complete the form
We also tested Elphi's existing designs for the POS homepage and mortgage calculator and redesigned them to make them more eye-catching and competitive.
Users noted that they might need more information about words such as "assets" or "liabilities."
I added further explanation for users that might need examples of what the form was asking.
Language Preference Page
Language Preference Page
Originally we used the 1003 form's statement that "your loan transaction is likely to be conducted in English" on our wireframe.
Users were confused as to whether language preference meant the form would be in a different language.
They also felt the tone was not friendly.
I changed the language to be more friendly and to reflect that the language option referred to the part of the process after the user completed the form.
Users did not understand the green underline indicated they were in that section of the form.
While they liked the friendly language of the section header "Tell us about your property," it did not help orient them because it did not match the section name of the menu, "Loan Details."
We bolded the side menu section and top navigation menu section the user was on and added a checkmark to the side menu to indicate the user had completed the previous section.
We added a smaller header to match the menu section the user was on that users said helped orient them and kept the page header so the form would remain friendly to its users.
Existing Mortgage Homepage
Mortgage Homepage Redesign
Existing draft of Elphi's UI designer's POS homepage.
We redesigned the top half of the homepage to direct our primary persona to either purchase or refinance the bottom of the homepage for our secondary persona to understand Elphi's points of differentiation.
Existing Mortgage Calculator
We usability tested the existing draft of Elphi's mortgage calculator.
Users liked the sliding scale for estimating credit score but didn't need to estimate purchase price or down payment.
Mortgage Calculator Redesign
We redesigned the calculator to fit onto one page without scrolling.
We put purchase price and down payment as a form field rather than a scale.
We also replaced "Get started" with "save your results" to better address the needs of our secondary persona who wants to calculate their results but isn't ready to apply.
Saving their results doesn't pressure them to begin the application process but incentivizes them to return to that lender when they are ready as they have already started an account.
A simplified and intuitive form
What did I learn?
Working with developers
I presented our UX process to Elphi's team of engineers and was able to understand further about their technical constraints and answer questions they had about the research and design process.
There's a tricky balance between testing mid-fidelity wireframes and going into high fidelity. We moved to high fidelity before we were able to apply all of the changes from our usability test results, and ended up doing more work in high fidelity to change language and orientation.
Elphi initially wanted us to spend less time on research and focus on UI. I presented Elphi's CEO and COO with our research findings and explained the value of talking directly to their users.
At the end of the project, Elphi informed us that they thought the research behind the design increased the quality of the product and would also help them differentiate their product when pitching it to potential clients. This was a gratifying win!
1. Interview lenders to understand their needs:
How will the POS integrate with their existing site and system?
What customization do lenders need on the POS?
What questions do lenders prioritize on the 1003 form?
2. Build out the POS on mobile so users can calculate rates on-the-go and access their account dashboard.
3. Finish building out the refinance and co-borrower flows.
I had begun building out different wireframes for users applying to refinance and applying with a co-borrower and was able to work with the COO on designing that flow.
We only needed to deliver one flow to the client so I did not prioritize the additional flows, but in the future would conduct usability tests with the additional flows and bring them to hi-fidelity.