Designing a Shared Loan Status Card for a Real Estate Lending Platform
overview
Simple Deals is a lending platform for real estate investors. People use it to apply for a loan, move it through approval, and sign the final documents all in one platform.
Three kinds of people work on each loan. A borrower applies and waits. An originator, the middleman who works the loan between the borrower and the lender, pushes it through underwriting. An admin runs the team and keeps an eye on every loan at once.
All three sign in and land on the same page, and all three need the same thing fast like where is this loan right now?, what has to happen next?, what's the progress on the tasks? . The early build didn't answer that well as the status was on the screen, but it was easy to miss, and nothing showed you what was left to do.
solution
The answer was one card, shared by all three roles.
Each loan shows up as a card. It carries the loan's status, its address, a progress bar, and how many tasks are still pending. Closing those tasks is what moves the loan forward, one stage at a time, until someone signs and it closes.
The borrower checking one loan, the originator scanning twenty, and the admin watching the whole team all read the same card with just changes on the actions they can perform on the loan.
Initial findings
The Initial card showed everything except what mattered most.
Working from the version a developer had already built, A few things stood out right away. The card led with a person's initials in a large colored block, so the first thing you saw was whose loan it was, not where it stood. The status sat in a small tag that was easy to skip. And the loan type and the status sat side by side as two tags, with nothing marking which one mattered more.
Drag the slider to compare the starting point with where it ended up.
iterations
The iterations wasn't one card. It was three, each trying a different way to show loan type and status.
1. The color block draws the eye first. The actual loan status,hides in the corner in the smallest text on the card.
2. Bridge and Approved replace the avatar as color pills for status and type. The address becomes the headline instead of competing with it.
3. Same pills, now with icons , status becomes something you recognize by shape, before you even read the word.
Design decision
The fix wasn't a better tag. It was taking the first one off the card
Up to this point, each card carried two tags the type of loan and status of loan
Loan type became a row of tabs on the home page. If you're looking at the Bridge tab, every card under it is already a bridge loan, so printing "Bridge" on each one told you nothing. The card got simpler because the page around it changed, not because the tag got redrawn.
Takeaway
What i learned
Card that shipped is simpler than the iterations before it
The first three cards spent their strongest visual space on color blocks and avatars. None of that helped anyone scanning a pipeline of loans. Once status became the loudest thing on the card, everything else fell into place.
