Better.com
2018-2020

Internal Tools

Improving the engine behind Better’s mortgage ops — one interaction at a time

  • Giovanni Vocale

    Senior Visual Designer
    ↓
    Product Design Lead

  • Alastair Halliday

    UX Director

The Challenge

Producing a mortgage loan is expensive — up to $10,000 per loan, mostly due to manual labor. That’s why most banks avoid financing loans under $80K.

Tin Man is Better.com’s proprietary system built to automate the loan process and reduce those costs. But at the time, it could only handle part of the workload. The rest had to be outsourced, where no profit was made.

To scale profitably, Tin Man needed to be faster and more efficient, automating more steps so fewer people could process more loans — bringing everything back in-house and lowering the cost per loan.

An early version of Tin Man

Tin Man as it stood in 2018, soon after I joined Better.

We can see a list of activities, each one representing a request of information made to the borrower.

The Design Was an Afterthought

But like many internal tools, Tin Man was engineer-led and lacked design attention. It was clunky and frustrating — even though the people using it were power users, in it 8+ hours a day, relying on speed and precision to get work done.

Underwriters had to dig for information — manually opening and closing each activity, which represented a request sent to the borrower.

Reviewing data this way was tedious and inefficient, especially for users under time pressure.

The animated pig was one of my first contributions — a company favorite that lived on for over three years, only retired after I left.

The Goal

The company’s goal was clear:
help underwriters and consultants process way more loans, way faster — and lower the cost for homebuyers.

My personal goal was just as ambitious:
make Tinman not just usable, but genuinely delightful to use.

A New Borrower’s Loan File

A structured summary of borrower data, divided into sections with collapsible tables, letting underwriters drill down as needed.

My Contribution

For over two years, I was the solo designer and front-end engineer working on Tin Man — the internal system used daily by hundreds of mortgage processors, underwriters, and loan consultants at Better.com.

Editable Fields

Authorized underwriters could edit certain fields to correct errors Tin Man occasionally made.

All changes were logged — who edited what, and when — ensuring compliance and building trust in the system.

Create Ticket

When a loan was in trouble, an authorized underwriter could create a ticket to alert the team.

The ticket would be assigned to a team member, who would then have to fix the issue.

High Stakes, High Volume

It handled a firehose of data: 100+ new loans per day, thousands in the pipeline. The people using it were under constant pressure — but with the right tools, even rookie hires could outperform seasoned mortgage veterans at other companies.

Sales Pipeline

Loans will be grouped into different sales pipelines and assigned to different loan officers.

Sidebar

The sidebar could be collapsed, and the pipelines could be filtered and sorted.

Pipeline Groups

Managers could group sales pipelines, create filters and assign them to different team members.

Drag and Drop

Managers could drag and drop pipelines to reorder them, or create new ones.

My Approach

I worked closely with product managers, backend, and full-stack engineers — while staying connected to internal users.

We had power users who acted as champions, gathering team feedback and sharing it with the PM. The PM triaged and prioritized requests, then brought them to me. I’d implement what I could directly in code, or coordinate with engineers when backend support was needed.

A user reporting an issue with the scroll within our company Slack channel.

Retrofit Mode

Engineers would often ship the first raw version of a feature — usually just getting the data on the page.

I’d step in afterward to refine the experience: restructure the layout, swap out clunky components, simplify the flow, and add micro-interactions or animations to make it feel polished and intuitive.

Fact History

A way for underwriters to peak into any saved fact associated to a loan.

Manual Fact Editing

Users could override manually some fact associated to a loan, in case the machine made an error.

Trigger Analyzer

Users could visualize why a certain activity was triggered or not. What inputs were needed to trigger it, and what was the outcome.

Prototype-First Mode

For new features, I’d build the front-end first — using mock data to prototype the full experience.

While engineers worked on the backend in parallel, my version was already functional and merged behind a feature flag. Once the backend was ready, it could be quickly wired in, tested, and shipped.

Better Cover

A test to see if borrowers would be intersted in pruchase also an insurance policy.

The trial was successfull and Better launched a new product, Better Cover.

Semi-Automated Messenger

A way to send automated messages to borrowers, prepopulated with data from the loan file.

We shipped fast

Most features were released within days, behind internal flags, to selected beta testers.

Feedback came in real time via Slack or direct comments from power users. I’d quickly iterate, polish, or debug — and if feedback was good, we’d launch to everyone.

The new Loan Files view

A table to see all the active loan applications, with filters and sorting options.

It replaced the older Activities view, which was grouping loan by activities instead of by loan files and didn't prove as useful as the new view.

Advanced Filters

Much more powerful and flexible filters, allowing underwriters to find loans by virtually any criteria.

Performance Improvements

I kept a close eye on page performance, identifying bottlenecks and optimizing them to keep everything running smoothly.

Organize Columns

Underwriters could rearrange columns, decide which ones to show and the selected settings will be persistent.

This was not relying on external library, since the Ember ecosystem lacked a good one, but a custom implementation.

Resize Columns

Underwriters could resize columns to make the view more comfortable.

This was not relying on external library, since the Ember ecosystem lacked a good one, but a custom implementation.

The infamous Giovanni bug. Made a good laugh across the company.

What I focused on

  • Information hierarchy – Bundling related data together, collapsing noisy views, surfacing what mattered most.

  • Speed + keyboard UX – Built for power users with fast flows, shortcuts, and snappy transitions.

  • Micro-interactions – Smooth loading, feedback, and drill-downs for a more fluid experience.

  • Accessibility – Solid color contrast, focus states, and full keyboard navigation.

  • Data-first design – Designed with real data from the start to handle edge cases gracefully.

Pricing

A tool used by sales people to simulate loan pricing when on the phone with a customer.

Animations

Whenever possible, I used subtle animations to reinforce interactions and make complex concepts easier to understand.

Tech Stack

The app was built with Ember.js, and I learned it from scratch. I consistently pushed to keep it up to date to narrow the gap with modern React practices.

There was no Storybook, no typed templates, and no frontend tests Ember.js, and I learned it from scratch. I consistently pushed to keep it up to date to narrow the gap with There was no Storybook, no typed templates, and no frontend tests — only a limited set of Selenium tests maintained by a single QA engineer.

Despite that, I contributed heavily to the codebase — becoming the 4th most active contributor at the company, behind only a few of the earliest engineers on a team of 40.

I built strong relationships across the engineering team and earned their respect by making their work look better and feel smoother.

Ticket

A way to create and manage internal issues related to a loan.

Tickets

A way to create and manage internal issues related to a loan.

Create Ticket

A way to create and manage internal issues related to a loan.

Payment Schedule

A history of all payments made for the loan

Campaigns

A way to add discounted rates to certain clients.

Less Time Required to Produce a Loan

Underwriters were able to underwrite a loan alone in just 35 minutes, which is almost unheard of in the industry. For reference, using Encompass — the industry-standard software — the same process typically takes an entire day.

Faster Loans, Bigger Margins

The time needed to produce a loan dropped significantly thanks to improved workflows and automation in Tin Man.

As a result, the company’s margin per loan skyrocketed — from under $1000 when I joined to $8,000 or more after these improvements.

Rookies Crushing It

Loan Consultants using Tinman could outperform even those with 10+ years of experience — some were hitting 10× the performance and winning awards for top results.

The Tool Behind the #1 Startup

In 2020, Better.com was named #1 on LinkedIn’s Top Startups list — hiring at a staggering pace, onboarding over 1,500 employees since March, with plans to add 7,000 more in the following 12 months.

Most of them would be using Tinman.

In 2021, Better.com topped LinkedIn’s Top Startups list again.

Quietly Critical

It wasn’t flashy, but it was essential. And for the folks using Tinman, it made a huge difference.

Style Guide

Since Ember lacked solid Storybook support, I created an internal style guide as a starting point to document the components I was building.

While it wasn’t widely used at the time, the goal was to lay a foundation that engineers and future designers could eventually refer to.