PROJECT TYPE
Professional project at Scratch
TIMELINE
April - October 2023
TEAM
Ankur (Head of Platform Engineering)
Claudio (Software Engineer)
Josephine (Product Designer)
Mateusz (External Developer)
CONTRIBUTION
Content audit
Information architecture
Wireframing
Design quality assurance
Scratch.fi
Loan Management Platform for Lenders
Background &
Problem
Compass, Scratch's loan management platform, currently serves both external and internal users, leading to an overload of information and features irrelevant to lenders. The current loan page lacks a clear structural hierarchy and offers content that is not easily digestible at a glance.
To address this, we aimed to transform Compass into a dedicated environment for lenders. I collaborated with Lender Ops team and Engineering team to optimize lender self-service features within Compass to streamline routine requests and define precise date parameters for field inputs, ensuring a seamless user experience.
Key Result
Transformed Compass into a dedicated environment tailored for lenders. This included adding self-service functions such as fee waivers and credit applications, enabling lenders to manage these tasks independently. These enhancements not only improved efficiency for our team but also reduced escalations between Scratch and lenders by 15%.
Transforming Compass into a Dedicated Environment for Lenders:
Design Process Overview
The transformation of Compass into a dedicated environment for lenders began with an in-depth analysis of the existing platform.
I led this initiative, collaborating closely with our lender operations team, engineering team and our external developers to ensure pixel-perfect execution. We strategically divided the project into four distinct phases, allowing us to effectively track our progress and move forward with clarity.
This collaborative approach allowed us to make consistent progress while ensuring that every aspect of the redesign was thoughtfully executed.
PHASE 1: CONTENT MAPPING & AUDIT
Compass serves both external and internal users, offering information and features that may not always be relevant to lenders.
In this first phase, I conducted a comprehensive audit of all existing content on Figma, which was crucial for visualizing the platform's current state, identifying redundant information, and understanding data points across different loan programs, loan types, and loan states. As part of this process, I collaborated with our lender operations team to identify common, repetitive requests that we could streamline and worked closely with our external developers to address any immediate issues uncovered during the audit.
Old Compass Layout / Zones:
[Compass platform before the redesign]
Understanding Lender's Needs
Recognizing that the existing platform serves both external lenders and internal users, I identified that certain functionalities were not always relevant to lenders. To address this, I collaborated with the lender operations team to gain a deeper understanding of lenders' specific needs when accessing the platform. We found that lenders primarily focus on a clear loan summary that highlights key details, such as the loan status (e.g., current, late, delinquent, paid off), loan type, and program. Additionally, quick access to payment history was crucial for identifying potential discrepancies.
In response to these findings, I also worked with the team to introduce self-service functionalities for lenders. We identified common requests—such as waiving fees, applying non-cash credits, and extending maturity dates—and identified repetitive tasks that could be streamlined and automated.
1. Loan Status
2. Payment History
3. Loan Documents
4. Servicing Notes
What lenders care about:
1. Apply non-cash credits
2. Disable autopay
3. Extend dates (maturity date, graduation date)
4. Flag loan as fraud
Common requests made by lenders:
PHASE 2: IDEATION & REDESIGN
Redesigning Loan Details: A Scalable Solution for Diverse Loan Types and States
Revamping the Loan Page with a Clear Information Hierarchy
In this second phase I also focused on redesigning the loan details section to better accommodate the diversity of loan types, programs, and states. This involved researching and documenting all necessary data points required for each loan type and proposing a new information architecture for the individual loan details pages. New components were also created to handle specific loan states, such as bankruptcy and fraud, ensuring that the design system remained cohesive and scalable. The new loan details structure also include a dedicated section for loan actions.
Old Loan Details
New Loan Details
The restructured information architecture now features a more logical and user-friendly hierarchy. Borrower Details are prominently displayed, followed by a consolidated Loan Details section that includes an Overview and Payment History. Documents and Communications have also been organized more clearly using tabs, making it easier for lenders to find the information they need.
This reimagined structure is designed to enhance the user experience, making the platform more efficient, reducing the need for escalations, and ensuring that lenders can navigate Compass with greater ease and confidence.
Optimizing the Borrower Information Panel
Old Loan Page Layout
New Loan Page Layout
The old Borrower Details section occupied too much space on the loan page. The redesigned Borrower Information Panel improves readability and conserves space by organizing key details into streamlined sections. Key details are grouped into simple sections, with quick options to edit or copy contact info. A privacy feature lets you blur sensitive information with one click. This redesign makes managing borrower data faster and more intuitive.
New Borrower Details
Old Borrower Details
What are servicing notes?
Servicing notes are detailed annotations made by Loan Guides agents to document interactions with borrowers. These notes capture important data on borrower communications and currently reside in our internal system.
The goal is to make these servicing notes accessible to lenders directly within the Compass platform. By surfacing these interactions, lenders will be able to view and download servicing notes in a CSV format. This feature addresses a common request from the lender operations team, enabling smoother access to borrower communication records and improving overall workflow efficiency.
Streamlined Searches: Filter Servicing Notes for Faster Insights
Since there are often numerous communication records, I implemented filtering options for this communications section. Lenders can now filter by contact method (e.g., phone, email) and inquiry type, allowing for faster access to relevant information.
Lenders can now quickly search and download Servicing Notes!
Introducing Self-Service Loan Functionalities for Lenders
To address common lender requests, I collaborated with the lender operations team to identify loan actions that could be automated, such as applying non-cash credits, disabling autopay, extending key dates, and marking loans as fraud. I designed self-service functionalities within the Compass platform to streamline these routine tasks, significantly reducing the manual workload for the operations team. Additionally, I worked closely with engineering to establish accurate date input parameters, ensuring a smooth and user-friendly experience.
Common requests made by lenders:
1. Apply non-cash credits
2. Disable autopay
3. Extend dates (maturity date, graduation date)
4. Flag loan as fraud
Filtering for Servicing Notes
PHASE 3: DESIGN REVIEWS & ITERATIONS
In the third phase, the initial designs were reviewed with the team. Feedback from these sessions was used to iterate and refine the designs, ensuring they met the needs of the users while maintaining alignment with the overall design vision.
Borrower Information Panel
To align with the new structure of the individual loan pages, the Borrower Information panel should seamlessly integrate with the updated layout, which emphasizes top-to-bottom content flow for improved readability. The previous Borrower Info panel displayed excessive information, much of which lenders may not need upfront. Therefore, I redesigned the panel from a vertical format to a horizontal layout for easier left-to-right scanning. Users can now click on the borrower's name to access secondary information, such as alternate or skiptraced phone numbers, only when needed.
Initial vertical panel design
Reiterated borrower information design
Since many of our borrowers have multiple loans, I aimed to create an intuitive interface that enables lenders to see all loans tied to a borrower and switch between them effortlessly. To address this, I designed a multi-loan carousel on the Loan Page. Recognizing that switching between multiple loans can be time-consuming and prone to errors, the carousel provides a clear and easy-to-navigate interface.
The carousel allows for quick selection and clear visibility of each loan card, ensuring that users can move between different loans without leaving the page or navigating complex menus.
This design enhances workflow efficiency and makes loan management more user-friendly for lenders.
Loan Page - Borrowers with multiple loans
![[Hover] - Multi-loan carousel](https://static.wixstatic.com/media/b410ab_24adafaad47f4dcfbdb39279435d8a83~mv2.png/v1/fill/w_980,h_97,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Rectangle%20737.png)
PHASE 4: SHIPPING & DEPLOYMENT
The final phase involved preparing the designs for deployment. All screens were thoroughly annotated to ensure clarity and consistency.
After finalizing the annotated designs, I worked closely with our developers at SWMansion, setting up regular meetings to ensure pixel-perfect execution and resolve any design-related issues or discrepancies. This close collaboration ensured the designs were accurately implemented and deployed in the integration environment, with continuous iteration to refine inputs and functionality.
Final Designs
Lender Dashboard
Modals - Loan Actions for Lenders
Loan Overview, Payment History & Communication
Loan Actions for Lenders
Seamless Loan Switching: All Borrower's Loans at Your Fingertips
The Compass redesign successfully transformed the platform into a tailored environment for lenders, equipping them with critical self-service functionalities like fee waivers and credit applications. These enhancements empowered lenders to independently manage tasks, leading to a notable 15% reduction in escalations between Scratch and lenders, while also streamlining workflows and improving overall team efficiency.
Let's take a look at how a loan is presented on the Compass platform ↴
👋🏼 Curious for more?
Redesigned the borrower loan portal to ensure compliance and enhance the user experience, giving borrowers greater visibility into their overall loan journey. This led to a 20% reduction in support calls.
Redesigned information architecture and website to increases leads and conversions. Design process include content audit and strategy, creating a new sitemap and wireframing with content.