Overview
Over a period of ten months, we worked with a major U.S. bank to redesign their online Mortgage Hub for customers going through the process of purchasing a home. Their current mortgage system had not been updated in two years and provided limited information, leading to unnecessary phone calls from customers.
They wanted to create a Mortgage Hub that would empower customers to complete much of the mortgage process online and also cut down on phone calls to the loan officer and processor. The system would need to keep customers up-to-date on the status of their loan, as well as let them know what they needed to be doing next and allow them to upload documents for their application.
Research
Before beginning our research, we conducted a workshop with the client to understand their goals for the project and how we would measure success. We had the stakeholders participate in empathy mapping to help us align on user needs, goals, and pain points. We also discussed the high and low points of the current user journey.
We wanted to understand the range of pain points associated with getting a mortgage, so we began by interviewing customers, stakeholders, and realtors. We also sent out a survey to homebuyers and conducted shadowing sessions with a Loan Officer, Loan Processor, and Underwriter at the bank.
After synthesizing our findings, we distilled our insights into four main categories of pain points. Based on our insights, we were able to extract three designs focus areas that would guide our design process moving forward.
We also found that there was a large number of data points related to what people liked about their lender. We captured these findings in three experience principles that we felt the solution should embody.
Concept Design
Using our insights from research as guidance, we sketched various potential solutions for the Mortgage Hub. We then narrowed in on three directions that each focused more strongly on one of the three experience principles. We created low-fidelity wireframes that we presented to the client, and based on their feedback we narrowed down to two final concept directions.
After fleshing out the two concepts, we created medium fidelity prototypes. We then created a protocol and conducted A/B testing sessions with customers of the bank. Half the participants completed a series of tasks using the concept A prototype, and the other half completed the same tasks on the concept B prototype. Using the results of these sessions, we were able to determine which features on each concept performed the best and combine them into a single concept.
Final Design
Once we had a single concept direction, we conducted a workshop with the client in order to define the features and user stories based on user research as well as feasibility. We then began more fully building out the user experience of the Mortgage Hub. We conducted several rounds of usability testing with high-fidelity prototypes on both desktop and mobile, each time iterating and improving the design.
The client also wanted to ensure that the Mortgage Hub could accommodate customers that were refinancing, in addition to those that were purchasing. We conducted interviews with customers as well as subject matter experts in order to inform our design of the refinance experience. Using our findings, we made a version of the Mortgage Hub that is tailored to the refinancing experience.
Internal Employee Mortgage Hub
During our research, we found that there were many pain points for the Loan Officers and Loan Processors related to their internal processes and software. So, we created concepts around a potential future Internal Mortgage Hub that would help them interact with the member and keep up to date on their files more easily. Based on our research, we created two concepts – one is an MVP and the other is a more future-looking concept with additional functionality.
Development
Once the designs were finalized, we worked with our developers to create a high-fidelity prototype of the entire experience. In order to facilitate the development and standardize the designs, a series of components were created to work with the client’s design language. These served as the building blocks for the Mortgage Hub and helped streamline the design and development process.
Using the components, we created a coded prototype of the Mortgage Hub. The prototype included major flows throughout the purchase and refinance experience. We used this prototype for our final round of member testing, and it will also be used by the client to facilitate internal concept sharing and implementation by their development team.