My Role: Lead Product Designer

Completed: October 2024

Number of users: 300

Team size: 1 Sr UX. Designer

Problem
Users and clients were unhappy with the current Borrower Portal.

Solution
Understand what an ideal state for the Borrower Portal is and create a best in-class expereience that supports 100% of current features and close the gap between us and our competitors.

There was a previous experience that was missing several key features. This meant we had a good idea of what users expected and what stakeholders thought would be MVP.






Hueristic Review

  • Worked with a BA to review the current experience.
  • Annotated screenshots with what we liked and didn't like.
  • Identified missing features.
  • Discussed the current experience and gathered the BA's opinions.





Information Architecture

We conducted a thorough investigation of the content by collaborating with Business Analysts (BA) and clients to prioritize the necessary information. This process involved several exercises to ensure we captured all critical aspects.

These exercises helped us create a well-structured and user-friendly Borrower Portal that meets both user and business requirements.

  • Content Audit: We reviewed the existing content to identify gaps and redundancies.
  • Stakeholder Interviews: Conducted interviews with clients and stakeholders to understand their needs and expectations.
  • Card Sorting: Organized content into categories to determine the most logical structure.
  • Prioritization Workshops: Worked with BAs to prioritize content based on user needs and business goals.



Complete Tasks

The user needs to upload the required documents to proceed with the application. At this point, we didn't know if the borrower would have all of the documents or if they would want to upload the files one by one.

  • Flexible Greeting: Personalized the greeting.
  • Descriptive Tasks: Provide clear and detailed descriptions for each task the borrower needs to complete.
  • Important Datapoints: Highlight key information and important data points for the borrower.
  • Contacts Section: Include a section for contacts that can be updated by the client as needed.
  • Simple Upload Flow: Ensure the document upload process is straightforward and user-friendly.
  • Improved Validation: Implement better validation to reduce errors and ensure all required information is provided.
  • Clear Status: Clearly display the status of the application and any remaining tasks.





Additional Documents

The process of obtaining the correct documents isn't straightforward, and borrowers often don't understand why a document is required. This confusion can lead to delays and the need for follow-up communication to clarify the requirements.


  • Flexibility: Additional documents provide flexibility for handling unique borrower situations.
  • Efficiency: They help reduce the number of service requests by allowing borrowers to upload necessary documents directly.
  • Completeness: Borrowers can easily attach additional documents to their application, ensuring all required information is provided.
  • Smooth Process: This feature supports a smoother process when regular tasks are not sufficient to complete the application.

Mobile Priority

Given that our target audience consists of borrowers who are often on the go, it was crucial to prioritize the mobile experience. By focusing on mobile-first design principles, we ensured that the Borrower Portal is accessible and user-friendly on smaller screens. To make resizing easy I kept everything on the Foundation Grid idea.

Mobile Design
Mobile Design
  • Responsive Design: Ensured the portal adapts seamlessly to different screen sizes.
  • Touch-Friendly: Designed with touch interactions in mind for ease of use.
  • Optimized Performance: Focused on fast loading times and smooth navigation on mobile devices.
  • Accessible Navigation: Simplified navigation to make it easy for users to find what they need quickly.





Loan Details

The Loan Details section is crucial for borrowers to manage their loans effectively. This section allows borrowers to view their loan details, make payments, and perform other regular tasks. Improving this section can significantly enhance the user experience and reduce frustration.


  • Payment Options: Provide multiple payment options to cater to different borrower preferences.
  • Transaction History: Display a detailed transaction history for transparency and record-keeping.
  • Loan Summary: Summarize key loan details such as balance, interest rate, and due dates.
  • Notifications: Implement notifications for upcoming payments and important updates.
  • Support: Include a support section for borrowers to get help with any issues or questions.





Tasks/Conditions

The Tasks/Conditions section is essential for borrowers to keep track of their application progress. This section allows borrowers to view and complete necessary tasks, ensuring they provide all required information and documents. Enhancing this section can significantly improve the user experience and streamline the application process.


  • Payment Options: Provide multiple payment options to cater to different borrower preferences.
  • Transaction History: Display a detailed transaction history for transparency and record-keeping.
  • Loan Summary: Summarize key loan details such as balance, interest rate, and due dates.
  • Notifications: Implement notifications for upcoming payments and important updates.
  • Support: Include a support section for borrowers to get help with any issues or questions.



Documents Repo

The Documents Repository section is essential for borrowers to keep track of their application documents. This section allows borrowers to view, upload, and manage necessary documents, ensuring they provide all required information for their application. Enhancing this section can significantly improve the user experience and streamline the application process.


  • Clear Instructions: Provided straightforward instructions to guide users through the process.
  • Minimal Steps: Reduced the number of steps required to complete tasks.
  • Accessible Design: Ensured the design is accessible to all users, including those with disabilities.
  • User-Friendly Language: Used plain language to make information easy to understand.