Redesigning The Pipeline Loan Application Sign In Screen

As a Web Design Manager, I tackled a variety of projects in real estate and mortgage web design, along with digging into the issues with the Pipeline Content Management System (CMS). One of our biggest CMS problems with the mortgage websites was the usability issues in the loan applications.

The below photos are screenshots from the original Loan Application. From a design and business perspective the look of it always bothered me, because it's very dated and built into the CMS in a way that we couldn't implement code to overwrite the original settings. Customers would expect us to be able to manipulate the application and since we weren't able to it was frustrating for customers and our team. Another big issue was that the loan application was not responsive. This presented a problem since our company sells mobile responsive websites and we all knew the importance of having your website built to adapt to any screen. 

I aimed to design a simple user interface that could be easy for developers to implement and create a better user experience for our mortgage customers and their clients. It helped that I had been working with our customers and the product for 2 years but I still wanted to research the issue before jumping into design. 


Loan Application - OLD Pics.png

Research Results

After conducting client and competitor research, and speaking with customers and members off our internal teams, these were the biggest takeaways:

  • The application should be responsive across all devices to become more valuable to our mortgage customers and easier for our Sales Team to sell.

  • It needs a modern user interface design and it should be built so that the Design Team can manipulate the CSS and personalize it for each company depending on their branding needs.

  • The application steps should remain as similar as possible to accommodate our older members that have been using the product for years.

  • Current bugs in the application need to be fixed like the drop-down menus not working when you go to the actual Loan Application page.

Creating The Structure + Skeleton Through Wireframing

Here are some of the things I kept in mind when drafting up some prototypes:

  1. It wasn't user friendly to have two different login pages for new and returning customers. Put them on the same page and easy enough to differentiate between.

  2. Make the headline focused on "Getting Started" instead of using the words "Loan Application" big and bold. Less intimidating to new users.

  3. Add in an alternative for someone who's not quite ready to start their application. Think about what they would need:

    • Their questions answered - something like an FAQ page

    • Maybe to schedule a meeting with a loan officer

  4. The main picture should be both generic (simple lawn photo possibly) and easily interchangeable. Exterior and interior photos have the problem of being too specific to their local communities.We would want something that works for a large part of the country so that it was easy to sell to people in many different locations.

  5. Keep design simple and clean, save the "choosing your loan officer" function for later on. The biggest goal for our mortgage customers is for people to get on their websites and get started on their application.

  6. Make sure the design translates well on all devices.

Designing An Appropriate Solution

I went with a clean, modern, and functional design along with the following extra changes to usability:

  • I didn't want users to have to click an extra link and go to a different page if they're a returning customer. Instead now they can use the top of the loan application to switch the form to the "Returning Customer" side and login easily.

  • It seemed too complicated to have people picking a loan officer right at the time of signing up. It was showing up too quickly in the process so I took it out so that it could be implemented later on after they were already going through the application.

  • I went with a Frequently Asked Questions (FAQ) button, since we can easily create a stock page with that material along with our other provided pages. Since the contact/schedule information is provided on all websites, it seemed more useful to our mortgage customers to focus on answering potential clients questions ASAP so that would start their online application sooner.