“What was the biggest purchase of your life?” I have asked this question to my client numerous times and 9/10 answered: buying their home.
Opportunities
I have been with the bank for almost 4 years. As a part of my job is to help client with mortgage applications, my mandate has been to make the process as painless as possible. My colleagues surely have the same agenda since we want to build relationships with our clients instead of having them go to other financial institutions. However, despite our efforts, many people still see the process of applying for mortgage a daunting task. I began to ask myself why that is the case.
One thing I noticed was that though the bank provides great tool, such as home financing checklist, for client to bring home after the appointment to remind them what documents mortgage professionals need in order to start the application, when documents were submitted, it was either the wrong or clients forget the other items bankers ask them to provide. Also, clients usually do not gather all the documents at once before handing them to their bankers, but rather, they email or hand over in person whatever document they have at the moment. This results clients come in multiple times just for the documents handoff.
I cannot stop but wonder if there is a way to make the documentation handoff process more efficient? Coming from the front line, I experience the pain points first hand. I decided to take this on as a design challenge and design an app to “streamline” the process.
Current process
Unless you are working or had worked in the related field, it is hard to know how many steps involves end to end for a mortgage application. For illustration purposes, I have this image below to show the mortgage application process at the bank I work for. I have also consulted a few other personal friends of mine who are working in the industry regarding their mortgage application process. I have gained feedbacks that their processes are similar to ours.
To better analyze the result later on, it is important to stress that at the bank I work for, there are two mortgage roles: personal banker and mortgage specialist. Personal bankers are anchored in branches and do not meet clients outside of branches for businesses, whereas, mortgage specialists go out to meet clients for businesses. Personal bankers take care of other financial needs while mortgage specialists only do mortgages. Because of the competitive nature of mortgage specialists, they are usually more efficient and experienced with mortgage applications.

Goals
The following are the goals identified to keep the project cope aligned.
- Business goal: To shorten the turnaround rate for the mortgage application process to increase throughput rate
- Project goal: To facilitate and streamline working relationship between BMO mortgage professional and client during mortgage document handoff process
- User goal: To reduce friction and time spent on mortgage document collecting process so less time is spent on admin work and more energy is spent on structuring the mortgage deal
Research
As UX designers, we need to remember that we are not our users. This is especially true for this project. Although I work in the field myself and this project was inspired by my pain points as a mortgage professional, I need to keep my bias in check.
__
Contextual inquiries
Before sending out surveys and conducting interviews, I did some contextual inquiries at my work place to observe clients’ reactions during mortgage appointments. The common reactions I picked up were confusion and annoyance when mortgage professionals requests for client documents such as income verifications, bank statements and property related informations. Clients often take notes on their cell phone or on the home financing checklist provided by mortgage professional as the mortgage professionals speak.
__
Survey findings
To confirm the observation from contextual inquiries, I sent out a survey to my colleagues whose job involves mortgage applications. The following are some highlights from the survey:
1. Long turnaround time for end to end mortgage approval
- 50% said it takes 1.5 - 2 week
- 50% said it takes 2+ weeks!
2. Takes a long time to collect all the necessary documents
- 40% said it takes 3-4 days
- 30% said it takes 5-7 day
- 10% said it takes 7+ days
3. Wrong documents
- Though the documents needed were explicitly explained to the clients, yet wrong documents were provided all the time
- When asked what kind of difficulties were encountered during the mortgage document collecting process, 66.6% responses said that clients provide the wrong documents!
To dive into the result a bit further, by combining the finding 1 and 2, one of the result interpretation could be: if a mortgage takes 1.5 weeks to complete, at least 3-4 days are spent on collecting documents. At the beginning of the case study, the mortgage application process flow has shown all the steps users go through to complete a mortgage. The fact that 25% of the time is spent on 1 step shows the need to streamline the process.
__
Interview findings
After having preliminary findings from the survey, I interviewed a few colleagues to get a general sense of mortgage application process. The qualitative nature of the interview findings helped me to incorporate specific comment from the users into the app design. The following are the highlights from my interviewees:
Interviewee A: Our mortgage application process is not efficient
There are too many steps in our mortgage application process
Interviewee B: Structuring mortgage should be the most important step!
Mortgage professionals wants to focus more on making the numbers work instead of wasting time on collecting documents
Interviewee C: Clients keep calling me to ask if their mortgage has been approved yet?
Clients are left in the dark after the documents were submitted
Synthesis
__
Persona
Meet George, the embodiment of all mortgage specialists and personal bankers who received my survey and interview. George was the point of reference when designing for the wireframes.

__
User stories
As a mortgage specialist, I want to be able to get the correct documents from clients quickly so I can start structuring the mortgage deal.
As a personal banker who are busy with different banking services everyday, I want to have time to help all my clients so that I can grow my book of business.
__
User journey map
After having the user stories drafted out, I let George take me on his journey of working as a mortgage specialist. Being though a day in life allows me to identify the opportunities in each step. Although opportunities were identified in each of the step, the goal of this project is to focus from “send off” to “application.”

__
User flow: Uploading documents
From the user journey map, the main flow is identified to be the document uploading flow. This is what the flow looks like:

__
Information architecture
The flow was then extended from the main document uploading flow to show relationships between pages. Information architecture serves as the blue print for the next low fidelity wireframes.

Design
__
Low fidelity wireframes
Using pen and paper to sketch out ideas is the most effective way of gathering ideas without being restrained with the technology. Here are some sketches of my exploration between different progress bars and uploading functions:

__
Mid fidelity wireframes
Before the project was tested, I took the wireframes to mid fidelity so the information in each screen can be examined rather than only the flow.

__
User testings
For the user testing, it took me a bit of time to identify who should I test my wireframes with. On one hand, Streamline was designed to solve users’ (mortgage professionals’) pain points; on the other hand, the people who would install Streamline on their phone are the clients of mortgage professionals. The solution to the testing at the end was to test the flow with non mortgage professionals and to test the information in wireframes with mortgage professionals.
The following highlights were from non mortgage professionals:
"It's confusing that there are two steps before uploading” -> One tester suggests that the process would have been much easier and less confusing if there is only one upload instead of making it a two steps process.
"How do I view previously uploaded documents?” -> One tester explained that he would appreciate if he was able to review the document that has been submitted
The following highlights were from mortgage professionals:
“Clients called us frequently to inquire about the next process, maybe the process bar should be more detailed” -> The suggestion was surrounding on a lack of details for future steps in the current design.
“What about other uploading functions besides camera rolls?” -> Two testers point out sometimes the documents are not always saved in camera necessarily so more options (such as upload from icloud) should be provided.
“Streamline helps to reduce the necessary face to face contact with clients to the initial meeting and the final document signing. It would be nice to have a scheduling function to schedule with client for the final meeting.” -> This suggestion could means scheduling with client for the final meeting and to send a notification for appointment reminder.
__
High fidelity wireframes
Due to time constrain, I took the wireframes to high fidelity when I had a chance to test my wireframes with the non mortgage professionals. The feedback from mortgage professionals will be under future consideration.
__
UI design
Streamline is designed to be a corporate app that will be widely used by mortgage professionals; therefore, the design needs to be consistent with the current company image. The audit from the current banking app is resemble to Complexion Reduction trend mentioned by Michael Horton on Medium. This trend has three characteristics:
- Bigger, bolder headlines
- Simpler more universal icons
- Extraction of colours


Having identified the main characteristics, I extract the main colour palette from the brand and have my high fidelity wireframes follow the UI guideline.

__
Prototype
The screens for my prototype are shown above. If you are interested in my Invision prototype, please click here: https://projects.invisionapp.com/share/G4UDAATKSAF#/screens