Borrower Portal

My Role: Lead Product Designer

Completed: October 2024

Number of users: 300

Team size: 1 Sr UX. Designer

Previous Project:
Loan Officer Experience
Next Project:
More Rates

Overview

The Borrower Portal experience provides users with a comprehensive platform to manage their loan applications, track progress, and access account information in a centralized, intuitive interface.

Challenge
The Borrower Portal launch required an MVP that would consolidate multiple workflows and touchpoints, while having a smaller than usual development resource.

Solution
Designed a streamlined, user-centric portal that simplified loan management and improved user engagement across engineering, product, and operations teams.

ConstraintsThe Borrower Portal project had to be delivered with a smaller than usual development team, requiring careful prioritization and efficient design solutions. The release timeline was tight, necessitating rapid iteration and close collaboration across all stakeholders.

  • Who we're designing for

    The team didn't believe in the idea of a persona or why it would be useful. So the first task was literally convincing the PM that this was a worthwhile exercise.

      Focus:

    • Spearheaded conversation with stakeholders to gather insights.
    • Developed 3 personas aligned to different user needs.
    • Prioritized Borrower persona to address critical tasks for lead generation.

      • Refining:

    • Refined persona goals, pain points, and motivations with PM.
    • Keeping the Personas updated and easy to access would help make this more useful.





  • Workflow discovery

    Loans were managed across multiple Excel files with inconsistent processes across offices. We consolidated workflows and collaborated with the PM to define an MVP addressing all critical daily tasks.

      Outcomes:

    • Impossible to track progress across multiple Excel files.
    • Inconsistent processes across offices led to confusion and inefficiency.
    • MVP Scope Definition: Collaborated with PM to prioritize content and determine the essential components for launch, deferring non-critical features to future iterations.
    • Regulatory Content Review: Reviewed and consolidated regulatory requirements to identify essential vs. redundant content for the MVP scope.



  • Primary Tasks

    The borrower's primary job was to submit a mortgage application with all required documents quickly and easily. With tight timelines and limited resources, we focused on an MVP that eliminated friction in the getting-started experience.

      Primary Tasks:

    • Simplify Onboarding: Remove barriers and clarify requirements upfront.
    • Clear Next Steps: Transparent, step-by-step guidance with progress visibility.
    • Reduce Friction & Error Handling: Minimize fields and provide clear error guidance.

      • Additional Tasks:

    • Mobile Optimization: Prioritize a mobile-first design to accommodate borrowers who are often on the go.
    • Scalable Architecture: Design a flexible system that can easily accommodate future features and regulatory changes without requiring a complete overhaul.
    • Loan Officer Visibility: Let Loan Officers see the Borrower progress and which errors remain.



  • Wireframes

    With no existing design system or patterns to reference, creating simple wireframes was the ideal starting point. This allowed us to define key screens and establish the foundational design patterns needed for the platform. I started by prioritizing the most critical screens and interactions so that we could start discussing, the pros and cons.

      Key Screens:

    • Getting Started Screen: Welcome borrowers and explain the application process at a high level.
    • Task Overview Screen: Display all required tasks and their current status clearly.
    • Document Upload Screen: Provide a straightforward, step-by-step document upload experience.
    • Progress & Status Screen: Show borrowers exactly where they are in the process and what remains.
    • Error & Validation Screen: Display helpful, actionable error messages to guide corrections.
    • Contact Information Screen: Allow borrowers to update and manage their contact details.
    • Application Summary Screen: Provide a clear review of submitted information before final submission.





  • Design System

    There was no design system, no brand guidelines, and no established visual language. We focused on creating a cohesive design system to ensure consistency across all screens and interactions. Focus on keeping it simple.

      Design System Features:

    • Color Tokens: Established a consistent palette with primary, secondary, and semantic colors for accessibility and brand cohesion.
    • Typography System: Defined font scales and weights to create visual hierarchy and improve readability across all screens.
    • Spacing Tokens: Standardized margin and padding values to ensure consistent alignment and visual rhythm.
    • Component Library: Built reusable UI components with documented patterns for buttons, inputs, modals, and alerts to accelerate development.



  • Framework

    Working with the existing design patterns and components, we established a consistent framework to guide the development of new features.

      Template Screen:

    • Standardized Layout: Created a reusable template screen that incorporates the established design patterns and components for consistency across all features.
    • Foundation Grid: Implemented a 12-column grid system to ensure consistent spacing and alignment across all screen sizes.
    • Developer Onboarding: Provided a clear starting point for developers to begin implementation without rebuilding the foundational structure using Bootstrap as the CSS framework.




  • Complete Tasks

    We created the first simple page with the first 2 steps of the application process. This included a process stepper to guide borrowers through their journey.

      First Steps & Process Stepper:

    • Process Stepper: Visual indicator showing current progress and remaining steps in the application.
    • Document Upload: Allow borrowers to start uploading required documents.
    • Clear Navigation: Enable borrowers to move between steps easily.
    • Simplicity: Keep the initial page focused and uncluttered.
    • Foundation for Growth: Design an extensible structure for adding additional steps.




  • Adding Documents

    Adding the documents to the application is a crucial step in the process and the place where the Loan Officer spends the most time in the process.


      Document Upload Features:

      5
    • Drag-and-Drop Upload: Simplify the process of adding documents by allowing users to drag and drop files directly into the application.
    • Multiple Format Support: Accept various document formats (PDF, images, etc.) to accommodate different file types borrowers may have.
    • Batch Upload: Enable users to upload multiple documents at once, saving time and improving efficiency.
    • File Validation: Automatically validate document requirements and file sizes to prevent errors and rejections.
    • Clear Instructions: Provide clear guidance on what documents are needed and why, reducing confusion and follow-up requests.





  • Error Handling

    Robust error handling is critical for maintaining a smooth user experience. Clear, actionable error messages help borrowers understand issues and resolve them quickly, reducing support requests and improving application completion rates.


    • Clear Error Messages: Explain what went wrong and how to fix it.
    • Real-Time Validation: Prevent submission errors with instant feedback as users fill forms.
    • Easy Recovery: Offer options to save progress or retry failed operations.
    • Contextual Help: Include help links or tooltips near error messages.
    • Error Logging: Log errors for support teams to investigate and assist borrowers.
    • Proactive Prevention: Disable submit button until all required fields are valid.