IVY Direct
Xiaoxi Zheng
UX and Product Designer
Made with

IVY Direct

Easier and better mortgage application

The Project

Ivy Direct is the new digital mortgage platform created by Ivy Mortgage. Buying a home is an exciting milestone, yet many struggled when it comes to applying for mortgages. Confused in the land of financial terminologies, bombarded with phone calls, home buyers are often being pulled left and right about what needs to be done in order to score the best mortgage for their unique situations. Ivy Direct replaces an existing application process heavily rely on offline communication and emails with a better web application to streamline borrower and credit analyst interactions. Borrowers can now get a realistic estimation of their mortgage terms in minutes and are guided in the mortgage application process every step of the way.

My role

I was the product designer and technical consultant on this project where I researched business requirements, interviewed potential home buyers and created the information architecture, content, as well as visual designs for the new mortgage application product. 

Business Challenge

"The current mortgage application system only gathers initial information from loan borrowers and encourages offline communication"

                                                                                        --Loan Processor of Ivy Morgage

The existing version of the website was launched as an initial functional site without thinking too deeply about home buyer workflows and left a tremendous amount of opportunities to be explored.
The existing version of the website was launched as an initial functional site without thinking too deeply about home buyer workflows and left a tremendous amount of opportunities to be explored.

Problem Statement

Ivy Mortgage's current mortgage application process introduce mortgage borrowers to multiple point-of-contacts for different purposes. Communications are often siloed in emails and official documents are handed-off in different versions and forms.

Users have no central point of guidance on what needs to be done when.

Goals

  • Provide home buyers a central point of guidance throughout the application process.
  • Help mortgage borrower close on their dream home faster by reducing the number of times the borrower need to revisit their application.
  • Reduce unnecessary internal processes to cut cost and offer more competitive mortgage rates to home buyers. 

Personas & Customer Journey

Customer journey maps were created after interviewing a few targetted potential home buyers to gain insights into opportunity points. Personas were identified based on its preferences and home buying experience. 

Personas:

Amy - represents many of the first time home buyers, who needs clarification and guidance in every step of the mortgage application process.

David - represent many of the experienced home buyers, who have almost all of the necessary paperwork ready to go and want to close on a house ASAP.

User journeys identified for 2 primary target audiences.
User journeys identified for 2 primary target audiences.

Sketches

IVY Direct


Lots of quick sketches to communicate business goals, initial workflow testing, idea validation, and goal alignment across multiple stakeholders.

Sitemap & Workflow

IVY Direct

Sitemapping the proposed new web design provided an overview of what typical user interactions with the sites are and identified a happy path along with extreme edge paths.

This exercise clarified a lot of confusions and assumptions about the workflow across multiple stakeholders like product owner, developers and myself.

Wireframes

Based on interviews, sketches, and workflow identification. Key screens were produced in wireframe fidelity. This process was carried out with the Product Owner again to validate and align the navigation flow and test layouts of new information hierarchy.

Overview of wireframe iterations
Overview of wireframe iterations
IVY Direct

Initial Testing - Rate Quote Page

The initial rate quote page asks mortgage borrowers to fill out a basic questionnaire to pre-determine what kind of interest rates they are qualified for. The initial wireframe was designed to optimize for personas like Amy, where I opted for step-by-step multiple choice form filling process (shown 1st on the right). The initial assumption was that users should feel less intimidated by the pre-application process with less text-heavy UI.

Problem:

Users regardless of their home buying experience want immediate access to their initial rate quote results. After initial testing, multiple users reflected that by artificially breaking up the questionnaire into multiple pages, the process felt longer than necessary.

Solution:

Adjust the initial rate quote page into a basic form filling process (shown in the middle on the right) so that the user is only 1-click away from the initial rate quote results.

In the final visual design (shown last on the right), I took a step further to reduce confusion and speed up the initial rate quote process by introducing a single column form layout so users have a single direction they can rely on when filling out the questionnaire.

UI Visual Design

The visual design for this application was optimized for the desktop experience but with responsive and mobile translations in mind. Stylistically, I aimed for a fresh and minimal style to put emphasis on the action items for mortgage borrowers.

IVY Direct

Visual Refinement -Rate Quote Results 

Adjusting visual designs for the best presentation of competitive mortgage rates. 

Visual Critique:

Initial visual designs lack visual impact for rate quote results. List view (shown left below) presents all rate-quote details visually equally and lacks focus. In addition, Loan Information/Scenario carried from the previous step still takes visual precedence over Rate Quote Results (shown left and middle).

Solution:

1) De-emphasize editable Loan Information/Scenario from the previous step visually. 

2) Create a new visual element that emphasizes the most important number out of the rate quote details. 

Guide the users so they can proceed with confidence. 

Visual Iterations of the Rate Quote Results page
Visual Iterations of the Rate Quote Results page

Learnings

What did I learn?

  • Existing workflow discourages stakeholders to make significant changes.
  • Involve stakeholders early to validate current processes and propose any new ideas early and test frequently against current and potential users.  
  • Deliver work in layers and communicate all design decisions and verbalize the pros and cons of each design decision for stakeholders and help them make informed decisions

Outcome

48
Iterations
42
Screens
35%
Faster to closing
+3M
Loans Distributed

Dear Xiaoxi Zheng,

Best,