Mortgage COACH

Case Study of Responsive Website

 

 

Type
Responsive Design

Role
Research
Information Architecture
Interaction Design
UI / UX Design
Usability Tests
Iteration

Timeline
3 weeks

Mortgage Coach was built to help loan officers continue to thrive, not feel like they don’t have enough resources to advance in their career and also helping families make confident mortgage decisions. But with many competitors that are arising, Mortgage Coach had contacted us to re-design a responsive website that would display their current products to their audience ranging from Millennials to Generation X.

 

The Challenge

Our goal is to help Mortgage Coach re-design a responsive website that would display their current products to their audience ranging from Millennials to Generation X.

 
 

Research

I began this process by delving into research. My goal was to uncover the demographics of loan officers, explore and review current competitors in the market and analyze their strengths and weaknesses and finally understand the variety of experiences of loan officers’ when using tools like Mortgage Coach to display mortgage options. The research methodologies that I used in this process are:

  • Secondary Research - Statistics, facts to evaluate the direction of mortgage industry

    • Market Research: to obtain statistics and facts of loan officers

    • Competitive Analysis: to help understand the current market, what has been successful and what has not been

  • Primary Research - Research that was done to carried out to answer specific questions

    • User Interview: to gain insight on real life experiences to better meet the needs of the loan officers

Secondary research was done to help us get certain statistics, facts to evaluate the direction of mortgage industry. Some of the interesting information that was uncovered through secondary research are:

  • Loan Officer Statistics

    • Currently there are 419,941 licensed mortgage loan originators nationwide

    • There is an upward trend in growing number of MLO (Mortgage Loan Originators) growing 7.6% from 2015, which indicates that there is a growing popularity in this business field, more and more individuals are joining the team of loan officers

    • 54.8% of Credit counselors & loan officers are Female

    • 80.8% of Credit counselors & loan officers are White

    • The median age of Credit counselors & loan officers is 42.7

    • 87.9% of loan officers said that referrals from current clients are one of their most successful marketing tactics

  • Homebuyers Statistics

    • Millennials driving home buying by 36%

    • Half of home buyers are under age 36

Then I began our competitive analysis. This method will helps us understand the current market, what the competitors have tried, what have worked and what has not worked. By researching online I have found the top 5 competitors according to a Linkedin article written by Sumit Rajpal.

All of these competitors have clear message for their targeted audience which are loan officers. They all carry floating support button which gives them 24/7 access.

One common finding was all of the websites have large fonts (perhaps correlates to the average age of the loan officer which is mid 40s).

Not all of these websites are clear on where a loan officer can go to begin using the product. Many of them use static and outdated image that decreases excitement on the site.

In order for me to understand the website and where the users may run into problems site audit was performed. One interesting that was discovered was that Mortgage Coach website was not clear on who their audience is. Their product is targeting lenders but their slogans and mottos are often borrower oriented such as “helping families make confident mortgage decisions.” Through this I was able to understand some of the reasons why the website traffic was low.

After the secondary research came the primary research where I went out to get stories from real life experiences. The participants were loan officers ranging from 25-45 in age and the interview itself was conducted remotely. Some of the findings that were uncovered was:

  • All of the participants did not start their career in mortgage industry

  • All of the participants value relationship building with their clients

  • Majority of the participants are aware of technology movements (3 out of 4)

  • All of the participants found their job fulfilling through helping families

  • Majority of the participants found the industry compelling because of the income possibilities (3 out of 4)

 
 

Synthesis

After gathering all the information through the research process came the synthesis. This process began with empathy mapping: based on the data collected from the user interview, it was written into 4 categories: See & Hear, Think & Feel, Saying, and Doing. Doing this helped to gain deeper insight to understanding their experience.

Capstone 2_MC_Empathy Map.png

From the empathy map there were 3 insights:

  1. Loan officers are aware of the technology shift in the industry

  2. Loan officers are trying to follow the trend in the industry

  3. Loan officers value building relationship and trust

And based on those insights came the needs:

  1. Loan officers need to be educated in the new technology

  2. Loan officers need to know the changes in the industry

  3. Loan officers need clientele’s trust

Another form of synthesizing the research was by developing a persona. One of the challenges that I faced was not zooming in too much into this one persona because it’s an archetype that represents potential users’ goals, needs and observed behaviors. Greg Kelly represented the general audience of the loan officers who are middle aged, have been in the industry enough to know its ups and downs.

 
 

Define

Then I moved into defining the problem by entering into asking the Point of View and How Might We questions. The formula that was used for the Point of View statement was Needs + Insight. From there I asked the question “How might we…” for the next step which was brainstorming the possible solution. The key here was to not to ask too broad or too narrow because if it was too broad then there would be too many solutions, and if it was too narrow then not enough solutions.

Given HWM questions, began the brainstorming sessions. I began by writing the HWM questions on the blue sticky notes timed myself to spend 2 minutes on each question writing down all the possible solutions. I went through it 3 times then came with possible solutions .

 
 

STRATEGY

Project goals were used to identify commonality of Business Goal and User Goal. In the midst of the research process, often we need a reminder of what the business goals and user goals were to stay focused on the product that I am trying to build.

With the project goals in mind, I created a product roadmap, to display features in priority order. The roadmap includes metrics that will measure so that the impact and effectiveness of the features can be analyzed.

With the given product roadmap I was able to develop the sitemap that would allow us to view the relation of each pages and general overview of the website.

Capstone 2_MC_Site Map.png
 
 

interaction Design

One of the challenges that I faced was trying to target exactly what the task the user will attempt to accomplish. Since the website will be developed with its intention toward loan officer (lender) then it had to be specifically for them. Based on their needs what they should attempt to do is to find useful information on this website which is the reason for this user flow.

The process began with brainstorming and sketching low-fidelity wireframes for different options for the website layout. It helped with the information architecture to help the user how to best find information and complete tasks.

Capstone 2_MC_Low Fi Wireframe Sketches.png

Then these sketches were made into mid-fidelity responsive wireframes because this website would not only be presented on a desktop but also possibly a mobile and a tablet.

Capstone 1_MC_Mid Fi Wireframe_2.png

Then the mid-fidelity desktop wireframes were made into a prototype for usability testing. View prototype here.

 
 

USABILITY TESTING

The prototype was taken out for usability testing but before that I created a plan to what I wanted this usability testing was to be about. The objectives of the usability testing was to:

  • Test the intuitiveness of the website regarding navigation and flow

  • Observe what features the user may lean towards

  • Test to see how long it takes for the user to download an infographic

  • Test to find out any confusion that the user may encounter

The participant was given two scenarios: one in the perspective of an existing user and one in the perspective of a new user. They were given two tasks to accomplish:

  1. Check “What’s Up This Week?”, download infographics

  2. Explore the website and request for demo

With the collected data I organized the information by using affinity map. It was divided into three categories: success, patterns, comments. From there I uncovered insights and recommendations on how this website could be modified to better serve the needs of the loan officers.

Capstone 2_MC_Affinity Map.jpg

Insights

  1. The general pain points came from trying to find request demo page

  2. Overall the pages did not connect well for it to be intuitive for the user

  3. Majority turned to search function instead of trying to dig through the website

Recommendations

  1. Make request demo more accessible like adding request demo page on multiple pages such as homepage and connect page and adding request demo button on

  2. navigation bar

  3. Have variety of CTA buttons throughout the first page that would allow the user to connect to other page faster

  4. Add support element when clicking on search since users turned to search for help

 
 

ui design & iteration

Mortgage Coach already had an existing branding that I was given to work with. But because they did not identify their brand attributes yet, I began with these five brand attributes: One-Of-Kind, Eccentric, Exciting, Trustworthy, Reliable. Then a Pinterest moodboard was created to gather assets to express the look and feel for respective brand attributes.

Then I put together a style tile to gather different elements to represent Mortgage Coach. This style tile included the brand’s logo, color, typography and etc. One of the new things that was developed was the monogram which Mortgage Coach did not originally had.

Lastly I created the hi-fidelity wireframes. With the recommendations given earlier from the affinity map, the hi-fidelity wireframes were brought into life with a prototyping tool.

Lastly, I created a UI Kit to serve as a reference and resource guide for anyone working on the site. This guide will ensure the consistency of styles and elements used across the website. View prototype here.

Capstone 2_MC_UI Elements.jpg
Minimalist-Showcase-Project-Presentation.png

Next Steps

  • These process will be presented to the Mortgage Coach stakeholders. We will be discussing the scope of this project and possible consequences of radically changing the current website.