Mortgage Company Website Design

This is an individual project. My client was a mortgage company called Monument, a Real Estate Finance Company specializing in support for families purchasing a home. This website will serve as not only an informational platform where their services are clearly showed, but also a vehicle of getting in touch with potential clients. They wanted it to look more up-to-date than their old website and to stimulate the audiences' desire of getting a sweet home. I created it with WordPress as a full-stack website designer, proposed the customer targeting strategy and managed online ads as a marketing strategist.

Time Span: September 2017
Individual Project

Identifying Problems:

  • Website Hierarchy: website pages and content lack proper hierarchy
  • Visual Design: low-resolution and irrelevant images to home loans
  • Engagement: lack of call-to-action and engaging content

Defining Project Goal

Increasing the number of leads (potential clients' contact information) is the goal.

Unlike functional website, such as social media and software tools, mortgage websites are mainly informational website that doesn’t require a user account and frequent usage. The ultimate goal of mortgage websites is usually getting the contact information of potential customers so that the sales team can use these leads and convert them to actual sales later on.

Defining Success Metrics

  • Boost Engagement
  • Collect leads
  • Cost Effectiveness
  • Redesign the website to be more engaging
  • Collect lead forms via advertising medium
  • Optimize the budget allocation
  • CTR and Page Depth
  • Number of Leads
  • Cost per Lead

Learning Target Customer

The target customers are the 30 – 50 years old small business owners and high income workers. They have intents in getting mortgages for their family or provide home loan services for their employees. Here are some of the typical potential customers:

-David is a 40 year old veteran and constructor, whose annual income is $65,000. He has a family of two kids. He is looking for mortgage options and veteran benefits of the house purchasing.

-Eric owns a small lighting company and has an annual income of $105,000. He is getting married and looking for a housing mortgage. He is a first-time home purchaser and needs help in home searching, mortgage selection and loan application.


Conducting Usability Test

I recruited five potential customers to use the website and recorded their navigation steps, time spent and pages, and then evaluated the usability of the old website with the System Usability Scale. I found that people couldn’t find whey they were looking for clearly and went back and forth between different pages. There was no clear navigation path.

Restructuring Website Hierarchy

Wireframing The Website

I used the wireframe to presented the information hierarchy of my new design.

Improvement I

The old website has a header image that is irrelevant to mortgage service. It also has all three services as parallel information displayed, which doesn’t clearly show that mortgage service is their primary service. I decided to show a header that focuses more on mortgage service as their core competency and other additional services at the second section as people scroll down.

Old Website

New Design

Improvement II

Old Website

New Design

Instead of a big chunk of text, I broke down the information into two sections. The first section will give people a brief overview of the cost for divorce financial service and an option to click for more information. The second section will display the cost information in a more straightforward way.

Improvement III

There are a lot of irrelevant information displaying in a parallel way in the team page. There are services, vision, contact email and team introduction in the same page but nothing stands out as the core information. I decided to have company vision as the header, team introduction as the second section and a contact us form at the end. Since the services are already introduced in other pages, I took it down from the team page.

Old Website

New Design

Redesigning The Website

Quantifying Outcomes with Google Analytics in One Month

4000% Daily Website Visitors Increased

Day Active User shows the number of visitors of the website in a selected period of time. By redesigning the website and directing traffic from different ads, I’ve increased the number of 1 day active users by 4000%.

25.77% Lost Visits Were Saved

With these engaging elements, it increases the stickiness of the website visitors. As it shows, within one month, I significantly lowered the bounce rate of the website home page. I also turned 25.77% exit rate into next page rate.

500% Visitor Engagement Increased with Home Search

As it shows, more people clicked through the home search page (ixd/search/basic) > the home result page (ixd/result/listings) > the home detail page (ixd/detail) and the home photo page (ixd/photo). A completed navigation path has created to engage the visitors.

Optimizing Lead Generation Ads

In addition to the Contact Us form on the website and the Sign Up form before visitors can download the E-book, I created lead generation ads on Facebook. My strategies including A/B test, lead form optimization and budget allocation.

Quantifying Outcomes with Facebook Advertising in One Month


Number of Leads Increased


Cost per Lead Reduced


Lead Form Submission Rate Increased