ANODA Discuss your product

A mortgage CRM redesign, without starting over

Sail is the CRM Ark Mortgage’s loan officers work in all day.We redesigned it inside the system already built, for desktop and mobile web.

Sail dashboard: income and closing figures, activities, and the loan officer’s rank among colleagues; Sail on a phone: the dashboard with income, statistics and the tab bar
Existing
system a redesign that had to fit what was already built
2
platforms desktop web and a mobile adaptive of the same product
Wireframes
to UI kit structure, wireframes and final desktop and mobile UI

We redesigned Sail’s existing mortgage-agent CRM around the loan officer’s working day: leads, applications, pricing, documents and routing. Information architecture and UX and UI connect each record to its owner and next action, across desktop and responsive mobile web. A UI kit and new feature designs extended Ark Mortgage’s existing system for its own developers.

What a loan officer passes through

One chain, from a name on a list to a loan being worked:

Our enterprise software design guide connects related records, roles and exceptions so a borrower, a loan and a routing rule stay part of the same officer’s work.

  1. Leads

    • Partners and contacts
    • Table and kanban
    • Unqualified and converted

  2. Pipeline

    • Scenario to closed loans
    • Commission
    • Bulk actions

  3. Loan

    • Details and borrowers
    • The long application
    • Activities

  4. Pricing

    • Scenario search
    • Product results
    • Rate lock and changes

  5. Documents

    • Upload and categories
    • Unassigned files
    • Who can open one

  6. Team

    • Lead routing rules
    • Employee capacity
    • Notifications
Everything on one screen Nothing misread
Dense tables and record grids that still say whose loan it is and what state it is in.
A long form A short day
The application split into sections an agent can jump between, one borrower or two at a time.
New features The system already running
Routing, staff and notifications added without contradicting the ownership rules the CRM already had.

One loan, read top to bottom

Found
An agent who opens a loan needs the borrower, the figures and the last thing said about it. A screen that hides one of them sends them to call the wrong person or work from an old number.
Decided

A strip on top with the borrower, LTV, DTI, amount and dates. Below it the loan record in one grid, then borrowers, qualifications and the property in one column, the activity feed beside it, and pre-approvals last.

Our CRM system design guide uses Sail to show how the record, pipeline stage, owner and next action fit together before the interface is drawn.

For the user
An agent sees whose loan it is, the figures that decide it and what happened last before touching anything.
Sail loan details: a summary strip with borrower, LTV, DTI, loan amount and closing date, a Loan Details grid, borrowers, qualifications, property details, an activity feed and pre-approvals
After: a loan at the Scenario stage; the figures are example data

  1. Whose loan, and the figures

    Borrower, LTV, DTI, amount and dates in one strip.

  2. The loan record

    Every loan field in one grid, in a fixed order.

  3. The people, the property, the history

    Borrowers, qualifications and property in one column; emails, tasks, notes and meetings beside it, newest first.

  4. Pre-approvals

    Created, amount, status and method, with Edit at the row.

How the work progressed

From the structure of a CRM already in use to final screens, a phone version and a kit, extended as later scopes were added.

  1. Information architecture

    How leads, pipeline, loans, pricing, documents and the team’s tools connect, for the first scope and for the scopes that came after it

    Artifact Information architecture for the initial and the later additional scopes

  2. Wireframes

    Where a stage, a figure and an action sit on the pipeline, the lead and the loan, before any styling

    Artifact Desktop web wireframes

    Three Sail wireframes in grey: a loan with borrowers, loan details, activities and pre-approvals; the pipeline table; and a lead with its status bar

  3. Desktop UI

    Dense borrower, loan, pricing and status data made scannable, without changing how agents already think about the product

    Artifact High-fidelity desktop screens across the initial and the later scopes

  4. Mobile adaptive

    Which parts of the pricing, product-result and application workflows a phone keeps, and how their dependencies stay visible

    Artifact Responsive and mobile adaptive screens of the web product

  5. UI Kit

    One set of inputs, buttons, stage bars and cards for every screen, within the implemented system

    Artifact A UI kit of reusable patterns

    Sail UI kit sheet: activity cards, dropdowns, stage bars, and primary, secondary and tertiary buttons in four states

From a name on a list to a loan being worked

Found
A CRM is a set of jobs joined by hand-offs: a lead becomes a loan, a rule sends a lead to a person, a file lands on a loan. Each hand-off is where a wrong state can slip in.
Decided
Each hand-off drawn as a run of screens before the final UI, and a menu that keeps the whole product one tap away on a desktop and on a phone.

  1. A lead becomes a loan

    The kanban of leads by status, one lead with its details and activities, then the dialog that ties a converted lead to a loan.

    Open the full map
    Three Sail screens: the leads kanban with columns from New to Converted, a lead’s details next to its status bar and activities, and a Converted dialog asking whether to associate the lead with a loan

  2. A rule sends leads to a person

    The rule’s criteria, a multi-choice of loan purposes, and the rule ready to save with its loan officer.

    Open the full map
    Three Create a New Rule screens: choosing whether criteria are equal, ticking loan purposes in a list, and the finished rule with a loan officer assigned

  3. A file lands on a loan

    The upload dialog, the file with its category chosen, and a new folder created as it uploads.

    Open the full map
    Three Upload Document dialogs over the file manager: click to upload, a file with category Income and a document type, and a new folder named Pay Stubs while the upload runs
Sail pipeline on a phone with a tab bar: Dashboard, Leads, Contacts and Pipeline, above a Create button

The same four areas, on both

Dashboard, Leads, Contacts and Pipeline: a side menu on the desktop, a tab bar on the phone.

  • Side menu on the desktop, tab bar on the phone
  • Wireframes and final screens for each area
  • Information architecture across the scopes

Six jobs a loan officer needs done

In the order a day meets them.

Starting the day

Found
A dashboard that shows income, closings and rank in one place is only useful if the numbers can be read against each other.
Decided
Income and closing figures across the top, the officer’s statistics and yearly goal beside their activities, then their own row of pull-through, closings and applications above the ranking.
Sail dashboard with four income and application figures, a statistics donut, a yearly goal, an activity feed and a ranking table of loan officers

Knowing where every loan stands

Found
A cleaner CRM can still misstate a loan. An agent who reads the wrong stage calls the wrong borrower, or approves the wrong commission.
Decided
The pipeline split into Scenario, Prospects, Applications, Closed Loans, Adverse and All Loans, each row with its stage as a badge. Commission on its own screen with Pending, Approved and Rejected in a column of their own, next to the action that changes them.
Sail pipeline table with tabs from Scenario to All Loans, a search field, and rows showing full name, lock, city, state and a Scenario badge
Sail commission screen with cards for the current pay period, the next one and year to date, and a table of commissions with Pending, Approved and Rejected badges and Approve and Reject buttons

Filling a long application

Found
A mortgage application runs to dozens of fields across many sections. On a small screen a long form can hide a required field or a co-borrower and still look finished.
Decided
Sections listed beside the form so an agent can jump between them, one borrower or two side by side, and collapse or expand a whole section. On the phone the same sections sit behind a picker and an Expand All.
Two Borrower Information forms next to each other, each with personal information fields, and a Forms list of sections on the left with Borrower 1 and Borrower 2 tabs
Sail loan application on a phone: a loan summary card, a section picker, Borrower 1 and Borrower 2 tabs, Expand All, and Personal Information and Contact Information sections
Sail loan and product information on a phone: loan product, total loan amount, LTV, loan type, loan purpose, interest rate, loan term and an Interest Only toggle

Comparing prices without guessing

Found
Two pricing options can look alike while their assumptions differ, and an agent who reads them as equal presents the wrong one.
Decided
A scenario built in collapsible sections, results with each product’s eligibility and its rate grid, and a locked scenario shown as current data beside proposed data with the changed field marked. An extended lock keeps the old term in view, struck through beside the new one.
Sail pricing scenario form with sections for lien position, loan information and borrower information, a Run Search button and the loan stages on the right
Sail locked scenario with a current product row and two columns of current and proposed data, lien, loan, borrower, property and search sections, and the DTI ratio marked in red
Sail locked scenario after Request Extension: the lock term reads 22-Day with 15-Day struck through and plus seven days, a new lock expiry date with 20 days left, and a Success notice that the lock term was modified

Keeping documents in order

Found
A file manager can look tidy and still leave out who uploaded a document, whether it is filed, and who may open it.
Decided
Each file listed with its size, date, ID and uploader; files not yet on a loan kept in their own Unassigned list; and access set per document: who can open it, who is invited, and whether they can edit or only view.
Sail file manager with an Income folder holding Pay Stubs, a file list with size, date, ID and uploader, and an Unassigned list with two files
Access to Document dialog with a Who Can Access selector set to Underwriter, an invite field, one invited person, and Edit or View options

Setting the team’s rules

Found
Lead routing, staff and notifications are new, and they have to agree with how the team already owns leads. A rule that conflicts with another should say so before it is saved.
Decided
Rules listed by priority with their criteria and who gets the leads, a simulation that runs test leads through a rule and reports Success or Error with the reason, employee capacity beside each loan officer’s limits, and notifications for every change.
Sail lead routing configuration: a table of rules by priority with name, criteria, assigned loan officers, dates and Edit and delete actions
Simulation Results dialog listing five test leads with the loan officer assigned, a Success or Error status and a note such as conflicts with another rule
Sail employee management table with current capacity badges, performance metrics and maximum leads overall and by loan purpose
Notifications panel over the lead routing dashboard listing a test lead created, a rule added, a lead assigned and a rule modified

One kit under every screen

Found
A CRM this size repeats the same few things: a stage, a button, a field. Drawn one screen at a time they drift apart, and inside a system already built the drift is expensive.
Decided
A UI kit of inputs, buttons, tabs, tooltips, cards and stage bars, drawn to what the implemented system could take, and used across the desktop screens and the phone.

One stage bar, three journeys

The same bar tells a lead, a prospect and an application where they are.

  • Stage bar for a lead with New filled and In progress, No Answer, Unqualified and Converted greyed
    Lead status: New, In progress, No Answer, Unqualified, Converted.
  • Stage bar for a prospect from Prospect through Value Presentation, Pre-Qualification and Credit Scrub to Documentation and Sales Presentation
    Prospect: From Prospect through Sales Presentation to Close and Lost.
  • Stage bar for an application from Application, Processing and Submittal to Approval, Funding and Shipped, with Purchased greyed
    Application: From Application to Shipped and Purchased.

One button, four states

Default, hover, pressed and disabled, left to right, in three weights.

  • Primary button in four states from left to right: default, hover, pressed and disabled
    Primary
  • Secondary button in four states from left to right: default, hover, pressed and disabled
    Secondary
  • Tertiary button in four states from left to right: default, hover, pressed and disabled
    Tertiary

Product results, on a desktop and on a phone

Kept
The results themselves: each product with its eligibility, the rate grid for an eligible one, and the reasons an ineligible one was ruled out.
Changed

On the desktop the results share a wide table with the loan’s stages beside it; on the phone each product is a full-width row that opens into its reasons, with the tab bar below.

Web app design carries that working model into responsive tables, forms and recovery, with the handoff your engineers need.

Sail product results on the desktop: an eligible conforming product open on a rate grid with 15, 30, 45 and 60 day columns, and an ineligible one showing its reasons
Desktop · Product results An eligible product open on its rates, and an ineligible one open on its reasons.
Sail product results on a phone: ineligible products as rows, one open on the reasons DTI ratio is above 50 percent and occupancy is investment property, and a Cancel button
Phone · Product results Ineligible products as rows; one open on its reasons.

Where Sail ended up

A loan officer’s day, from a new lead to a filed document and a routing rule, designed to read the same way on a desktop and on a phone, on one UI kit.

We designed it; building it, connecting it to data and running it belong to Ark Mortgage’s own system and team.

one product, on a desktop and on a phone
Desktop + mobile web
leads, pipeline, applications, pricing and documents
Lead to loan
lead routing, staff capacity and notifications
Team tools
reusable patterns for the whole product
UI kit

Can your agents tell a loan’s true state at a glance?

Stage, price, document, owner: we redesigned Sail so each reads at a glance, on a desktop or a phone. Bring us the screen your agents distrust, and we’ll show what to fix first.

Discuss your product Explore more case studies

What we brought to Sail

The product

The redesign and its kit

Read more about the design decisions

All articles