Skip to content
WorkAboutServices
Back

Mortgage CRM

A mortgage application seen from three perspectives: loan officer, processor and borrower. The interface connects loan pipelines, document collection and borrower tasks around the work each role needs to do.

View on Contra
About this project Scope, process & feedback
Scope
Product design
Tools
FigmaClaudeGoogle AI Studio

Challenge

Keep a shared application understandable when each role needs different information and next actions.

Solution

Mapped role-specific journeys and designed the pipeline, borrower portal and document states in Figma, including an intended workflow alongside existing Loan Origination Systems.

Product design scope

  • Role-based journeys and views
  • Loan pipeline interfaces
  • Borrower portal screens
  • Document upload and e-signing flows
  • Checklist, status and reminder states

The loan phases covered

Documented design coverage · published Mar 2026

4 loan phases

  • Intake
  • Underwriting
  • Document collection
  • Closing

Core journeys for loan officers, processors and borrowers, with manager dashboard information.

Project scope

3Core role journeys mapped

Loan officers, processors and borrowers · project record, March 2026

The outcome

A Figma interface design covering the loan pipeline, borrower experience and document workflows.

Feedback on our product design work

Aleksei Sabitov

Sabsus · Contra · May 18, 2026

“… quickly gets a solid grasp of the business logic …”

Read on Contra
Behind the designDesign decisions, experience flow & numbers
The organising idea

Build around responsibilities.

I mapped the role-specific journeys before designing the screens. Pipeline management, document collection and borrower tasks became connected workflows with their own hierarchy. The proposed integration with an existing Loan Origination System keeps those workflows close to the tools a mortgage team already uses.

Experience flow

Follow the application, not the menu.

The loan lifecycle used to organize the proposed experience. Each role joins the journey at a different point.

  1. 01Lead intake
  2. 02Documents
  3. 03Underwriting
  4. 04Closing
Design coverage

Three journeys around the same application.

The brief names four loan phases: lead intake, underwriting, document collection and closing. Role-specific journeys were mapped for officers, processors and borrowers, alongside manager-facing dashboard information. The deliverable is an interface design covering that workflow.

Design scope
Full scopeBrief, responsibilities & delivery
The brief
Design a mortgage CRM around loan pipelines, document workflows, and distinct user roles.
My role
User flows, interface structure, and UX/UI design in Figma.

What was delivered

UX/UI design for pipeline management, role-based views, borrower screens, and document workflows.

  • User journeys and role-based views
  • Pipeline management interfaces
  • Borrower screens
  • Document workflows

How it came together

  1. 1

    Mapped the journeys around each role before developing the screens.

  2. 2

    Separated pipeline management, document collection, and borrower tasks.

  3. 3

    Kept the relationships between those workflows visible.

  4. 4

    Designed the intended CRM-to-LOS workflow so the product could fit alongside existing Loan Origination Systems without a full platform switch.

Project context

The established deliverable is UX/UI design. Production implementation and launch are not established.

Designing the document journey

The proposed borrower portal includes document upload, e-signing and application progress. Document workflows use checklists, status indicators, version history and reminder states to give each role a clearer view of what happens next.

Image guide

  1. 01
    Project overviewOriginal project image
  2. 02
    Track the incoming leadsDetail from the original artwork
  3. 03
    Funding / Revenue — pre-lock stateOriginal Figma design
  4. 04
    Loan Center — task workspaceOriginal Figma design
  5. 05
    Products & Pricing — loan parametersOriginal Figma design
  6. 06
    Conditions — document requirementsOriginal Figma design
  7. 07
    MCR Data Audit — milestones and complianceOriginal Figma design

Reach out.

Have a website or product in mind? Let’s talk about what it needs.

Start a conversation
Hire Me on ContraChat on WhatsApp
denis@trbn.designBack to top
GalleryAll work
14 / 25
Project overview
Track the incoming leads
Funding / Revenue — pre-lock state
Loan Center — task workspace
Products & Pricing — loan parameters
Conditions — document requirements
MCR Data Audit — milestones and compliance
Previous projectAl-Futtaim dashboard themesNext projectAutomation Workflow Builder
Loading image…

A regional offer

Hello.

Let’s talk about your next website or product.

Discuss your project