Loan Search

INTRODUCTION

The Internal LOS is a platform used to manage student loans within the company.

One of the pages I redesigned was the Loan Search page, a page used to search for specific loans and take a glance at loan information. It is most important for the customer support team because they are the ones who take customer calls and help customers through their loan application process.

✏️ My Responsibilities

The Loan Search was one of the many pages I redesigned as part of the overhaul of the entire Internal LOS platform. The platform was first developed when there were no designers, so I approached the project without existing designs to work off of. I was the sole and lead designer of the project, so I was responsible for building a design system, conducting user research, and communicating with developers.

background

Understanding the Users

Although many different users use the Loan Search page, I decided to focus on a primary user to guide me through the process. I defined the primary user to be the Customer Support Team because:

✔️ Their workflow always starts on the Loan Search page.
✔️ They use the Loan Search page at high stakes - since the page is opened and used during customer calls. This means they need to quickly read and identify information while they are on the call with a borrower.
✔️ Customer Service Representatives need to be efficient when taking customer calls.

A Customer Support Representative’s Typical Workflow

To understand the typical user flow when taking customer calls, I conducted user interviews, met with the managers, and observed a new hire training to identify their workflow.

errors in the old flow

01
If they want to search by name, they need to find the name field and then copy and paste it into the search again
‍
‍02
To find the most recent loan with an active status - they need to skim through the borrower status column
‍
‍03
If the SSN doesn’t match the file they clicked into, they have to go back to the loan search page and find a different file

a simplified new flow

01
‍One general search bar - so that the users don’t need to look for specific input fields
‍
‍02
‍They can quickly find an active loan status by simply looking at the badge colors

‍03
‍The user is now verifying the customer’s SSN BEFORE leaving the page - if the information doesn’t match, they do not need to go back and forth between pages

design systems

Creating a new internal design system utilizing existing components

As part of the overhaul, I built a new design system using our existing company components and styling as the starting guide. This was the company’s first design system for an internal tool, so I built off our foundational components such as buttons and text fields to contribute over 100 new components. This design system was then used to build more internal tools for the company.

user testing

Implementing many adjustments for a huge difference

Throughout the process, I conducted multiple rounds of user testing, and in each round, I spoke to 10 users. I interviewed many roles utilizing the Loan Search page: Underwriters, Customer Support Representatives, QA analysts, Operations Managers, Loan Processors, etc.

In one round of user tests:

50% of users said the design was too cluttered and overwhelming with information and colors.

30% of users stated that it was overwhelming at first but they got used to the design after interacting with it more.

before

I learned that these issues came up since I was now presenting more information than they were used to. After feedback, I made small adjustments without sacrificing the content itself. These small adjustments included:

Increasing the text size
Adjusting the colors for better readability
Removing the harsh line dividers
Rounding the corners of the table

after

final design

Increasing efficiency during customer calls

✅ Customer support can now confirm a customer’s identity before opening up the loan information

The main goal of the loan search page is to find the loan a customer is calling about and quickly access the loan’s information page. But before they can open up the loan page, the customer service representative must confirm the borrower’s identity first. During the call, they use the phone number to filter out the loans and then they ask for the borrower’s SSN to find out which loan to click into.

impact

The redesign increases efficiency by minimizing the chances of the user clicking back and forth between pages to confirm the customer’s identity.

🎨 Small visual improvements so that users can quickly understand the loan

The most important responsibility for customer support during a call is to quickly understand the loan information while assisting a customer. I incorporated many visual improvements to aid users in quickly identifying important information. One included a badge design system that utilized iconography and colors to differentiate between different loan statuses.

BORROWER AND COSIGNER STATUS

The colors and iconography allow users to quickly identify the status of the loan. At first glance, they can identify which phase the loan is in.

USER FEEDBACK

Validating Designs

I validated the designs by conducting another round of user tests, scheduling design reviews with my team, and walking through the flows with development. In the final round of user tests, I received positive feedback on the redesign.

50% said that different status colors help them identify active loans.

50% expressed positive feedback on the general search bar

80% were pleased with the visual design - they found it clean and easy to read

user quotes

“The color and layout are great! Everything is easier on the eyes and it is easier to skim through the different rows.”

“The redesign makes it easier to manage loans and know where everything is.”

“Overall, I like the design. Even though there is more information than before, everything is still easy to read.”

CHALLENGES

⛔ Designing from no design

The Internal LOS platform was first created when the company was a lot smaller - there were no designers so developers created the platform with no design included. This meant that I took on the project with no design system, documentation, and explanation of all the different flows. I had to walk through every single screen and map out each flow and create components from scratch.

It was challenging trying to understand the product without any documentation, and it became confusing at different points due to the design and logic inconsistencies. To overcome this challenge, I spent a lot of time getting to know the current platform and I constantly asked the managers and developers about how the platform works. It was important for me to stay organized and ask questions.

🛠️ Understanding the many different roles within a start-up

Due to the nature of working for a startup, people have to wear many different hats. This meant that when I was learning about all the different roles that use the platform, I also had to learn about their wide range of responsibilities that were outside the scope of their title role. For example, a Loan processor and a customer service representative are 2 different roles - but within the company, some loan processors take on customer service responsibilities.

To overcome this, I had to create user profiles and always keep note of which roles intersect and everyone’s responsibilities.

Loan Search Page

Goals