Mortgage Banker Sites Redesign

Macbook mockup with newly designed mortgage banker page hero showing

Overview

Atlantic Bay Mortgage Group is an independent mortgage lender serving Virginia, North Carolina, and other markets on the East coast. Mortgage bankers (or loan officers) use their web pages to get people to apply for loans, learn more about the mortgage process, as well as get in touch with the team.

Atlantic Bay Mortgage Group is an independent mortgage lender serving Virginia, North Carolina, and other markets on the East coast. Mortgage bankers (or loan officers) use their web pages to get people to apply for loans, learn more about the mortgage process, as well as get in touch with the team.

Time Frame: 6 months
Team: Developer
My Main Roles: User Experience Designer, UX Researcher, Content Writer
Tools: Sketch, Figma, Invision

Time Frame: 6 months
Team: Developer
My Main Roles: User Experience Designer, UX Researcher, Content Writer
Tools: Sketch, Figma, Invision

Understanding the problem

The company’s previous mortgage bankers pages contained bio and contact information, calculators and tools, photo slideshows, link-offs to blog articles and resources, and customer reviews all on a single page. Our site analytics showed users typically bounced from the page early – users typically did not view more than half of the entire mortgage banker page.

The company’s previous mortgage bankers pages contained bio and contact information, calculators and tools, photo slideshows, link-offs to blog articles and resources, and customer reviews all on a single page. Our site analytics showed users typically bounced from the page early – users typically did not view more than half of the entire mortgage banker page.

User research

Stakeholders were hesitant to allow us to speak with real customers, so I relied on site analytics, industry data, and trends. Nearing the end of the project, I was able to convince leaders to allow us to start working on Personas in order for us to better understand our customers.

Stakeholders were hesitant to allow us to speak with real customers, so I relied on site analytics, industry data, and trends. Nearing the end of the project, I was able to convince leaders to allow us to start working on Personas in order for us to better understand our customers.

Alternatives to user research:

  • Front line conversations: I spoke with mortgage bankers about how their borrowers (users) typically contact them and how those borrowers might utilize the site.

  • Competitive analysis: I reviewed other mortgage sites to see what they believed was most important for their mortgage banker pages.

  • Customer reviews: I explored our customer reviews for any insight on pain points across our entire mortgage process.

After gathering this research, I found common pain points both for the borrowers (our main users) and our mortgage bankers. The users’ main goal was to be able to complete actions quickly – applying for a loan and/or contacting their mortgage banker.

  • Front line conversations: I spoke with mortgage bankers about how their borrowers (users) typically contact them and how those borrowers might utilize the site.

  • Competitive analysis: I reviewed other mortgage sites to see what they believed was most important for their mortgage banker pages.

  • Customer reviews: I explored our customer reviews for any insight on pain points across our entire mortgage process.

After gathering this research, I found common pain points both for the borrowers (our main users) and our mortgage bankers. The users’ main goal was to be able to complete actions quickly – applying for a loan and/or contacting their mortgage banker.

Ideation to wireframes

Worked on low-fidelity wireframes to incorporate information gathered from user research. I created wireframes to have a better understanding of what my sketches would look like. I presented several wireframes to internal team members and stakeholders to get feedback and sign off.

Worked on low-fidelity wireframes to incorporate information gathered from user research. I created wireframes to have a better understanding of what my sketches would look like. I presented several wireframes to internal team members and stakeholders to get feedback and sign off.

Wireframe for new Mortgage Banker home/landing page (hero, bio, calculator)
Wireframe for Mortgage Banker's new contact page
Wireframe for Mortgage Banker's new customer reviews page

User testing

Performed user test sessions with the new designs to understand how colleagues and friends would use the site.

  • Several individuals were confused by some navigational aspects, for instance, why the company logo didn't return them to the company home page.

    • From these test sessions, I brought this pain point to internal leadership, and it is currently being discussed.

  • Most users were able to find and perform the main goals for the site – apply for a loan or getting in touch with the mortgage banker. A few users suggested a quicker way to get in touch with a mortgage banker.

    • I added priority contact info area above the fold in a prominent location, so users could perform their actions quickly and smoothly.

Performed user test sessions with the new designs to understand how colleagues and friends would use the site.

  • Several individuals were confused by some navigational aspects, for instance, why the company logo didn't return them to the company home page.

    • From these test sessions, I brought this pain point to internal leadership, and it is currently being discussed.

  • Most users were able to find and perform the main goals for the site – apply for a loan or getting in touch with the mortgage banker. A few users suggested a quicker way to get in touch with a mortgage banker.

    • I added priority contact info area above the fold in a prominent location, so users could perform their actions quickly and smoothly.

High fidelity designs

These high-fidelity designs were tested again with a click-through prototype using Invision. Our team has a backlog of extra features to add over time. Choose a mortgage banker to view the live mortgage banker sites.

These high-fidelity designs were tested again with a click-through prototype using Invision. Our team has a backlog of extra features to add over time. Choose a mortgage banker to view the live mortgage banker sites.

Device mockups of newly designed site pages
Device mockups of newly designed site pages

Outcomes and takeaways

Mortgage bankers and other internal stakeholders have found the new designs represent the brand of the company while also allowing each mortgage banker the ability to customize their site. Since the launch of the new site designs, user page visits per session increased by 17.5%, and completed customer acquisition events have increased by 64%.

  • Despite the limited access to users, the industry trends and expert information on our users helped shape the design of the site. With more conversations and research with users, I could improve the site experience more by surfacing other pain points and goals.

  • Convincing stakeholders to allow us to talk directly to customers is a difficult but worthwhile action given the important insights gathered from the user interviews.

Mortgage bankers and other internal stakeholders have found the new designs represent the brand of the company while also allowing each mortgage banker the ability to customize their site. Since the launch of the new site designs, user page visits per session increased by 17.5%, and completed customer acquisition events have increased by 64%.

  • Despite the limited access to users, the industry trends and expert information on our users helped shape the design of the site. With more conversations and research with users, I could improve the site experience more by surfacing other pain points and goals.

  • Convincing stakeholders to allow us to talk directly to customers is a difficult but worthwhile action given the important insights gathered from the user interviews.

Jordan Nguyen

Let’s talk