Loan Officer Portal

My Role: Lead Product Designer

Completed: October 2024

Number of users: 96 Loan Officers

  • Overview

    The Loan Officer Portal is designed to streamline the workflow for loan officers, providing a centralized platform for managing client interactions, loan applications, and internal processes efficiently.

    • Challenge

    • All processes were fragmented across platforms
    • Difficult for new users to be onboarded
    • Impossible to track progress across different systems
    • High error rate due to manual processes
    • Inconsistent user experience across different tools

      My Role

    • Led the design and implementation of the Loan Officer Portal
    • Collaborated with stakeholders to gather requirements and define user needs
    • Created wireframes, prototypes and high-fidelity designs
    • Worked closely with engineering to ensure accurate implementation
    Constraints
    There was a tight timeline to deliver the MVP, and the solution had to integrate with existing systems without disrupting current workflows.
  • Impact

    By unifying the loan officer workflow, we improved clarity, reduced errors, and created a scalable foundation for future product expansion.

      Before

    • Fragmented steps across multiple systems
    • Unclear ownership
    • Redundant checks
    • Inconsistent user experience
    • No clear way to track progress

      After

    • Unified workflow
    • Clear responsibilities
    • Predictable launch cycles
    • Scalable foundation for future products
  • Discovery

    Understanding how what the existing team thought this should be would help us move quickly into more developed ideas.

      Discovery Methods:

    • Stakeholder Interviews: Documented team goals and success metrics.
    • User Interviews: Conducted workshops to synthesize findings and align on key insights.
    • Storyboard: Worked with a BA to learn about the problems faced.
    • Understand Objectives: Identify the key objectives and goals of the users, documenting to help gain alignment.
    • Define User Journey: Mapped out the user journey to identify pain points and opportunities for improvement.
    • 5 whys: Used the 5 whys technique to identify root causes of problems that had been observed.
    In Situ
  • Competitor Analysis

    Analyzed competitors to identify industry standards and best practices.

    • Competitor Analysis Workshop: Evaluated other data visualization tools and gathered team opinions.
  • Synthesize Findings

    Documenting insights to validate assumptions and align the team, so that this institutional knowledge was recorded that could be used as the foundation for our Design Thinking approach.

  • Persona

    Developed personas to represent key user types and their needs.

    • Persona Workshop: working with the product owner and the team to create detailed personas.
    • Includes known pain points: Developed empathy maps to understand user motivations and pain points.
    • Onboarding Product Team: Introduced the product team to the personas and their needs.
    • Persona Validation: Validated personas with stakeholders to ensure they accurately represented user needs.
  • The Current Process

    Working with the subject matter expert we mapped out the current process and identified key pain points. There was already a system in place, but it had significant limitations and was not feasible to scale the process to external users and more mortgages.

    • The previous experience was heavily reliant on Excel files, emails, and personal relationships to function.
    • All issues required the Loan Officer to call their Loan Officer directly, leading to delays and inefficiencies.
    • There was no automated notification system, so updates had to be manually communicated.
    • There was no centralized system for tracking issues, causing confusion and duplicated efforts.
    • Loan Officers had to manually track the status of their clients' applications, leading to errors and missed deadlines.
    • It was impossible for external groups to do anything in the system without manual intervention.
    • Despite these issues, the system supported 2400 mortgages and 96 Loan Officers across 2 cities, indicating its core functionality was effective.

  • Journey Map

    Journey Map
  • Jobs to be done

    Applied the Jobs to Be Done framework to uncover the deeper motivations driving Loan Officer behavior and system needs.

    • Core Job Identification: Discovered that Loan Officers' primary job was to efficiently process mortgages while maintaining accuracy and compliance.
    • Functional Outcomes: Users needed to quickly access borrower information, calculate rates, and generate accurate documentation without manual rework.
    • Emotional Jobs: Loan Officers wanted to feel confident in their decisions and trusted by borrowers and management.
    • Social Outcomes: Teams needed to collaborate seamlessly and maintain accountability across departments.
    • Circumstantial Triggers: System design had to accommodate high-pressure deal closings and varying experience levels among Loan Officers.
  • Ideate

    Generated a wide range of ideas through collaborative ideation.

    • Crazy 8's: Generated diverse ideas through multiple rounds of Crazy 8's.
    • How might we: Incorporated diverse perspectives for a comprehensive approach.
    • Future state User Journeys: Refined ideas through iterative rounds.
    • UX storyboarding: Created storyboards to visualize user interactions and experiences.
    • 5 whys: Used the 5 whys technique to identify root causes of problems.
  • MVP Wire-Mapping

    We had to move quick, so we moved straight into creating a wiremap, this would provide a good level of detail to start making design decisions.

      Wiremap Benefits:

    • Wiremap shows the flow of the experience.
    • Opportunity to layout information architecture, without all of the details.
    • Quickly get buy-in from stakeholders.
    • Developers could understand the flow and dependencies of the MVP quickly and start giving a basic T-shirt size.


  • MVP Dashboard View

    Using a simple table structure allowed us to jump into Medium fidelity designs, so that we could quickly iterate and gather feedback from stakeholders. The dev team had stories in an upcoming sprint that needed these screens, keeping this round as simple as possible while still providing valuable features was my focus.

      Dashboard Goals:

    • Show all applications and their statuses at a glance.
    • Allow Loan Officers to quickly identify which applications require attention.
    • Provide filters and sorting options to manage large volumes of applications.
    • Integrate key performance indicators (KPIs) to help Loan Officers track their performance.
    • Enable quick access to detailed information for each application directly from the dashboard.

    After aligning on the wires and ensuring the content density of the table was appropriate, we moved on to creating higher-fidelity designs so that we could get faster buy in. I tried to keep it keep it as simple as possible, this started wth resusing branding elements established on a project running parallel.

      Dashboard Goals:

    • Show all applications and their statuses at a glance.
    • Allow Loan Officers to quickly identify which applications require attention.
    • Provide filters and sorting options to manage large volumes of applications.
    • Integrate key performance indicators (KPIs) to help Loan Officers track their performance.
    • Enable quick access to detailed information for each application directly from the dashboard.

    The dashboard provides an overview of key metrics and allows Loan Officers to track the status of client applications efficiently. This allowed us to explore vizualizations. Creating the a central hub for all content would be a huge step forward.Go to Dashboard Project



  • Loan Details IA

    Putting all of the pieces together from different conversations helped us collate content and figure out if there was anything missing

      Information Architecture Impact:

    • Lower fidelity information architecture helped us focus on details in future efforts.
    • Start laying out content and get a basic buy-in from the product team and/or stakeholders.
    • Start figuring out where there was more detail or roadblocks that needed our attention, while we had time.


  • Framework

    While working alignside the product team to start understand what content would be part of the MVP, I put a framework together that would be flexible enough to be used in many places but also be simple enough to build quickly.

      Framework Benefits:

    • Consistency: Ensures a uniform look and feel across the entire application.
    • Responsive Web Design: Easily adapts to different screen sizes and devices.
    • Accessibility: Built-in support for accessibility standards.
    • Customizability: Highly customizable to fit specific project needs.
    • Time-saving: Reduces development time with pre-built components and styles.
    • Community Support: Large community and extensive documentation for troubleshooting and enhancements.


  • Loan Details

    Working with the BA we documented what the Loan Officer would care about and understand more about how statuses affect the LO workflow.

      Aligning Loan Details Content:

    • Low fidelity wires, helped us move fast and align the information architecture.
    • Timeline to show the progression of loan statuses and key milestones.
    • This process helped us identify that many application would have different steps and different document requirements.

    Once we gained some alignment on the loan details, we moved on to creating higher fidelity screens that the product team could start grooming for Stories.

      Loan Details Impact:

    • Provides a quick overview of the loan status, reducing the need for detailed searches.
    • Helps Loan Officers prioritize their tasks based on the status of the application.
    • Improves decision-making by presenting key data points at a glance.
    • Reduces the time spent on manual data entry and status updates.
    • Enhances communication with clients by providing clear and concise status updates.
    • Facilitates better tracking of loan progress and identification of bottlenecks.
    • Supports compliance by ensuring all necessary data points are captured and displayed.
    • Increases overall efficiency by minimizing the effort required to access important information.


  • Services

    The services section is where LO's can request credit checks, I reused the table pattern and the framework to make something that feels coherent and consistent.

      Services Impacts:

    • Consolidated batch requests and services from various departments into a single platform.
    • Reduced the number of user inputs required to complete tasks from 12 clicks to only 2.
    • Streamlined common tasks to ensure they are completed in a timely manner.
    • Facilitated better tracking and management of requests and services.


  • Documents

    As one of the most common tasks, the documents section needed to be ambitious. Creating an easy to use table that would help LO's service any missing documents. Understanding the different statuses and when an LO needs to do something would supercharge the usefulness of this page.

      Documents Benefits:

    • Centralized all documents into a single place, making it easier to find and manage them.
    • Provided a clear overview of document statuses, with notifications for missing or outdated documents.
    • Allowed for easy uploading, downloading, and secure sharing of documents with clients and team members.
    • Integrated with other systems for automatic status updates and included search functionality to quickly find specific documents.
    • Enhanced security features and version control to protect sensitive information and track changes to documents.


  • Contacts

    The services section is where LO's can request credit checks, I reused the table pattern and the fraework to make something that feels coherent and consistent.

      Contacts Benefits:

    • Designed elegant cards that display all necessary information in a visually appealing manner.
    • Ensured the cards are responsive and adapt seamlessly to different screen sizes and devices.
    • Incorporated interactive elements to enhance user engagement and provide quick access to detailed information.


  • Communications

    The communications section was being worked on via another project so keeping it simple while getting a start on this tab.

      Communications Impact:

    • Centralized communication platform for all client interactions.
    • Integrated messaging system to streamline communication between Loan Officers and clients.
    • Automated notifications for important updates and reminders.
    • Secure and compliant communication channels to protect sensitive information.
    • Easy access to communication history for reference and auditing purposes.


  • Results Achieved

    The Loan Officer Portal significantly improved the efficiency and effectiveness of loanofficers. By providing a comprehensive and user-friendly platform, loan officers were able to manage their tasks more effectively. This resulted in:

      Results Achieved:

    • Increased Efficiency: Loan officers could access all necessary information and tools in one place, reducing the time spent on administrative tasks.
    • Improved Decision-Making: Enhanced data visualization and clear status updates helped loan officers make informed decisions quickly.
    • Better Client Communication: Centralized communication tools improved the quality and speed of interactions with clients.
    • Higher User Satisfaction: The intuitive interface and comprehensive features led to higher satisfaction rates among loan officers.
    • Scalability: The platform supported a growing number of users and could easily accommodate new features and updates.