Better Mortgage

Make mortgage process fast, simple, and totally better.

Dates

September 2016 - October 2016

Role

Product Designer

 
 
 

About Better Mortgage

The Challenge

Americans pay more for housing than for almost all else combined – 33% of personal consumption expenditure. Yet somehow the mortgage process still takes nearly 50 days, costs over $5,000 in administrative fees, and requires more than 225 pages of paper and endless phone calls with commissioned loan brokers.

Better is a direct lender dedicated to providing a fast, transparent digital mortgage experience backed by superior customer support.

My Role

At Better, I was involved in designing several parts of the main product Tinman - an online platform for the entire mortgage loan process - from designing the new FAQ experience and improving the current pre-approval flow to establishing specific UI patterns. The following is a summary of what I’ve been mainly working on. 

 
 
 

New FAQ UX

Borrowers usually message Better Mortgage team when they have confusions for the process. From previous user testings, we noticed that borrowers ask common questions for a bunch of activities when they use Tinman to apply mortgage. To make the whole application process more efficient, we need a way to proactively show FAQs to borrowers without breaking the flow.

Concept exploration

We first looked at how other websites design their FAQ experience and thought about how we could layout it in our platform. 

 
 

While exploring, I noticed that it isn’t just about how this part looks like, but also how users would find the FAQ and interact with it. Inspired by Amazon’s online customer service, I imagine there could be a way to insert FAQ in conversation: we show borrowers FAQs first when they ask questions to us. 

 
 
 

Final Design

We decide to put FAQs inside the current message box. Here are some of design variations for this feature: 

 
 

And how it looks in the whole environment:

 
 
 

Mockups

We put content into design to see how it looks like in real scenarios. One example is at the end of the milestone “Get ready to lock”, this platform asks borrowers to pay $500 for an appraisal deposit. Borrowers ask many questions regarding to this step. So we made a relevant set of FAQs attached to this task.

 
 

Responsive design on mobile

 
 
 

Pre-approval flow improvements

As the initial part of the application, where borrowers get “3-minute approval”, we want our users to complete it fast without feeling frustrating. Besides, we imagine that in near future, there will be more borrowers using Better’s service to purchase houses. To meet the upcoming needs and decrease user drop-off and frustration, we proposed some improvements for current design. 

Previous Version & Insights

  1. No clues of how many steps there are
  2. Customers always feel insecure to input their social security numbers. They are unwilling to do this also because they are afraid of this will impact their credit score which is not true
  3. It’s not that mobile-friendly (not the priority)
 
 
 
 
 

User Flow

I diagrammed the user flow to get a comprehensive view of the pre-approval process

 
 
process flow-simplified.png
 
 
 

Proposed solutions

1. Set the expectations to this process

 
 

2. Educate users - it’s necessary for us to know your SSN and we have encryption for it. Besides, this process won’t affect their credit score

 
 

3. Introduce voice input to improve the mobile experience

 
 
 

Current design