ANODA Discuss your product

Mortgage lending app, from application to every task

Ark Mortgage’s borrower portal is where homebuyers apply for a loan and follow it to closing.We designed it for the web and phones.

Ark Mortgage Loan overview: the borrower’s active loans with amount, loan number, outstanding task, status, milestone, date and an action per row; Ark Mortgage Loan Details on a phone: the current stage, the loan officer and coordinator, and the pending tasks with Sign and Upload
100
screens across the web portal and the mobile app
3
people from competitor research to developer handoff

Ark Mortgage, Inc. lends to homebuyers and runs its own loan-origination system for its staff. Its borrowers needed a place of their own: to apply, then to follow the loan and answer what it asks for. We designed the borrower portal for the web and for phones , from competitor research to the developer handoff and the store listings, over four milestones.

What a borrower goes through

One chain, from an invitation to a closed loan:

  1. Account

    • Invitation
    • Sign-up
    • Log in

  2. Application

    • Seven steps
    • Save and exit
    • Declarations

  3. Loan

    • Stage
    • Loan officer
    • Loan information

  4. Tasks

    • Uploads
    • Signatures
    • Done

  5. Profile

    • Contacts
    • Employment
    • Access

  6. Notifications

    • Status
    • Requests
    • Preferences
Thorough Bearable
Every question a lender must ask, in steps a borrower can finish and come back to.
Progress Promises
An honest stage for the loan, with nothing that reads as approval.
Monitor Phone
The same loan and tasks, read in a table or within a thumb’s reach.

One loan, read top to bottom

Found
A borrower opens a loan to learn three things: where it stands, what it needs from them, and whom to call. None of it may read as a promise.
Decided
One details page: the people to contact on top, the stages as a line, pending and completed tasks side by side, and the loan’s own facts in a column on the right.
For the user
A borrower sees the one thing to do next and who to ask about it, without calling to find out.
Loan Details for loan №124564: the loan officer and coordinator, the stages from Application to Clear to Close with Processing current, a pending Signature task with Sign, completed tasks, and the loan information with amount, rate, status, milestone, document and property address
After: loan №124564 at Processing, with one signature pending

  1. Who to ask, and where the loan is

    The loan officer and the coordinator on top, then seven stages from Application to Clear to Close, the current one marked.

  2. What it needs from you

    Pending tasks with their action, completed ones with their date.

  3. What the loan is

    Number, amount, rate, status, milestone, document and the property, in a column on the right.

How the work progressed

Four milestones in one engagement: research and flows first, then the look, then every screen on both platforms, then the handoff.

  1. Discovery

    What borrowers get from established mortgage portals: identity checks, applications, tasks and support

    Artifact Competitor research with pros, cons and what to take for Ark

    Competitor research table: identity verification at four mortgage lenders, with pros, cons and screenshots, and a summary column

  2. User Flow

    Every path from an invitation or a cold sign-up to a loan and its tasks, down to the error states

    Artifact Information architecture and user flows for each area

  3. Wireframes

    Where the application steps, the loan table and the task list sit, before any style

    Artifact Web wireframes, then mobile wireframes

    Grey wireframe of the web Loan overview: sidebar menu and the loan table with task, status, milestone and date

  4. Moodboards

    How the portal should feel next to the Ark Mortgage brand

    Artifact Moodboards and three visual directions

    Three moodboards in the brand’s blues and red, each with its principles and reference dashboards

  5. UI & Design system

    Every screen and state on the web and the phone, from one set of components

    Artifact High-fidelity UI, a clickable prototype, desktop and mobile UI kits

  6. Adaptives

    The same loan on a monitor and on a phone

    Artifact Responsive web layouts and the mobile app screens

  7. Delivery

    What the developers and the store listings needed

    Artifact Screen maps, the developer handoff, App Store and Google Play assets

Every account change, drawn to its last state

Found
Borrowers change details mid-loan: a new email, a new password, fewer messages. Each change can fail, and a borrower stuck on one ends up calling the loan officer.
Decided
Each area of the portal got its own flow before any screen: sign-up, the application, loans, tasks, profile and notifications, every action with its default, active, error, filled and success states.

  1. Changing the username

    From the profile to the form, the check of the current username, its error, and back to the updated profile.

    Open the full map
    User flow fragment: from the user profile to the Change Username form in default and active states, its fields, and the wrong username error

  2. Email and notifications

    The email change with its password check and error, then every notification toggle a borrower can set, grouped by what it’s about.

    Open the full map
    User flow fragment: the Update Email Address form in default and active states with the wrong password error, then Notification Settings with its toggles grouped by communication, loan status, payments, transaction history and interest rates
Ark Mortgage navigation: the web sidebar with Loan Overview, Task Management, Help Center and Legal/Privacy, and the phone’s tab bar with the same four places

Four places, on both platforms

Loans, tasks, help and legal: a sidebar on the web, a tab bar on the phone.

  • Competitor research
  • Information architecture
  • User flows for every area
  • Navigation for web and mobile

Six jobs, from the first question to the last signature

The application first, where a borrower spends the most effort. Then the loan and its tasks, where they keep coming back.

An application in seven named steps

Found
A mortgage application asks about the person, the loan and property, employment, assets, other property, demographics and declarations. On one page it reads as a wall.
Decided
Seven named steps down the left, the current one marked and the finished ones ticked, a progress bar inside each step, and Save and Exit always in the corner.
Loan application step one, Your Personal Information: name, suffix, phone, email, citizenship, date of birth, the last four digits of the Social Security number and marital status, with the seven steps listed on the left
Loan application step three, Your Current Employment: a self-employed checkbox, full-time or part-time job, employer details, position, start date and income, and links to add previous or current employment

Leave now, finish later

Found
Nobody has every pay stub at hand. A form that loses answers when someone steps away gets started twice or not finished at all.
Decided
Leaving asks once and keeps every answer, so the application reopens where it stopped. Once it’s sent, the borrower is told who gets in touch next.
Are you sure you want to exit? The application is not yet complete, but all entered data will be saved, with Cancel and Save & Exit
Congratulations! Your application has been successfully created. The loan officer will contact you by mail soon, with Got it

Declarations, one answer each

Found
The declarations are legal questions about other loans, liens and judgments. One left unanswered comes back later as a question from the lender.
Decided
Each question on its own, with Yes and No as two wide targets and the chosen one filled, and the co-applicant’s copy of the same questions after the borrower’s.
Loan application step seven, About this Property and Your Money for this Loan: five yes-or-no declarations about other mortgages, new credit, liens, co-signed debt and judgments, each answered No

Tasks that say what they need

Found
“Upload document” doesn’t say which document, and a vague task turns into an email to the loan officer.
Decided
One task list across a borrower’s loans: the loan, the task type, exactly what’s needed, the date and one action. The upload says up front which files fit, and why a file was refused.
Task Management: tasks across loans with the loan amount and number, task type Upload document or Signature, what is needed such as the last two pay stubs or W-2 forms, the date and Upload or Sign
Upload document dialog: acceptable types are PDF, JPG or PNG up to 5 MB, a drop area, and the error Invalid file type
Upload document sheet on a phone: a pay stubs PDF uploading, Replace Document and Upload

Notifications that match the tasks

Found
A borrower waits on the lender as much as the lender waits on them, and silence reads as bad news.
Decided
A notification for every status change, request, signature and received document, the unread ones marked, and settings per topic for email and the app.
Notifications panel: loan status, a document request, a signature needed, a document received and an application submitted, with times, a show-unread toggle and Mark all as read
Manage Notifications on a phone: email and in-app switches, then loan status updates and payment alerts, each with its own switch

Account and security in one place

Found
Borrowers change emails and passwords mid-loan, and a mistake there shouldn’t mean a phone call.
Decided
Username, email, password, log out and account deletion together, each change checked against the current password, with the error beside the field and a way to reset it.
Change Password: the current password field in red with Wrong password and Forgot password, new and confirm password fields, Cancel and a disabled Change button
Access on a phone: Username, Email, Change password, Log out and Delete account

One kit for the web and the phone

Found
Two platforms drawn apart drift apart: a task or a field ends up looking and behaving differently on the phone than on the web.
Decided
Desktop and mobile UI kits built on the same colours, type and components, with every field and task drawn in each state it can take.

The same task on a desk and a phone

One pending task from the kit: the same marker, name and action, a card on the web and a full-width card on the phone.

  • Web pending task card: a red marker, Signature and a Sign button
    Web: In the loan’s pending column.
  • Phone pending task card: a red marker, Sign the loan estimate and a Sign button
    Phone: The same task, full width.

Every field in every state

Empty with a hint, filled, and in error with the reason and a way out, the same on every form of the portal.

  • Empty field: Enter username with a grey hint
    Empty
  • Filled field: First Name, Daniel
    Filled
  • Error field: Current Password in red, with Wrong password and Forgot password
    Error

The same sign-up on a desk and on a phone

Kept
The invitation’s email and the last digits of the Social Security number, the username, the password with its rule, the terms and one button.
Changed
On the web a brand panel sits beside the form; on a phone the form takes the whole screen under the logo.
Welcome to Ark Mortgage on the web: create your account for the invited email and Social Security digits, username, password, terms and Create account, beside a blue panel reading Realize your dream of home ownership
1440 · Web The form beside the brand panel.
Welcome to Ark Mortgage on a phone: the same account creation form with username, password, terms and Create account
375 · Phone The same form, the whole screen.

Listings for both app stores

Found
The mobile app needed store listings that say what it does before anyone installs it, on the App Store and on Google Play.
Decided
Store screenshots built from the real screens in the brand’s blue: the promise first, then the loan list, signing and the application, each with one line of copy.

The App Store set

All five screenshots; the Google Play set follows the same story at its own size.

App Store screenshot: the Ark Mortgage paper-boat mark, Realize your dream of home ownership, and a phone with the app’s splash screen
App Store screenshot: Let dreams grow, download the app, with a tilted phone showing the loan overview and a loan card lifted out of it
App Store screenshot continuing the tilted phone with the loan overview: active loans, their tasks, milestones and Apply Loan
App Store screenshot: Sign, manage your loan, and stay connected, with a phone showing the loan details and a lifted card to sign the loan estimate
App Store screenshot: Apply for a mortgage straight from the app, with a phone showing step one of seven, Your Personal Information

  • App Store set

    Five screenshots at the iPhone listing size, from the brand promise to the application.

  • Google Play set

    The same five, laid out for the Android listing.

  • Publication

    We designed the listings; publishing them is not part of this case.

What the developers received

One Figma file the client’s team could build from: every flow mapped, every screen on both platforms, and the kits the screens are made of.

Information architecture
Every area of the portal as a flow, with its branches.
Screens and states
Web and mobile, with errors, empty, loading and success.
Clickable prototype
The main journeys, clickable end to end.
UI kits
Desktop and mobile, from the same tokens.
Store assets
App Store and Google Play sets.

Flows in the handoff

  1. Wireframes for the web and the phone
  2. Moodboard and three style directions on key screens
  3. Web app: the application, loans, tasks and account
  4. Mobile app: the same journeys on a phone
  5. UI kit: the components behind every screen
  6. App Store and Google Play assets
Information architecture of the web app: account creation and authentication, with the invited and not-invited paths, login and username recovery
The map: sign-up and log-in, with the invited and self-registered paths.
Desktop UI kit: the 1440 grid, Inter type scale, primary, additional, system and grey colours, buttons, inputs, navigation, headers and table and form components
The desktop kit: grid, type, colour and every component the web screens use.

Where the product ended up

A borrower portal designed end to end for Ark Mortgage, on the web and on a phone. The client approved the final milestone in March 2024.

screens across web and mobile
100
people on the team
3
milestones, one engagement
4

In the client's words

The design connects the mortgage manager’s view with the borrower’s next steps. What we appreciated is the attention to document requests, case status and role-specific screens, so the two sides of the process can be discussed as one experience.

Lazar Weinstock IT Manager, Ark Mortgage, Inc. NMLS ID 103915

5.0

Building web and mobile from one design?

At Ark Mortgage, one set of kits and flows had to carry a borrower portal onto the web and a phone without the two drifting apart. Send us your product, and we’ll show how to hand it to your developers so they don’t have to guess.

Discuss your product Explore more case studies

What we brought to Ark Mortgage

The product

The system