Home Equity & Home Refinance

Two complex financial features, one shared underlying challenge: how do you take a calculation that normally requires a spreadsheet, a broker, or a call to the bank — and turn it into something anyone can understand in seconds, right inside the app.

Home Equity helps users see how much value they've already "unlocked" in their home and what they can do with it (a loan, a line of credit, a cash-out refinance). Home Refinance asks the opposite question: "is today's rate better than what you're paying, and is switching worth it?" Both came out of the same kind of briefing and follow the exact same product flow, which I treated as an opportunity — solve the pattern once, apply it twice, with its own identity in each case.

This project skipped a brainstorming phase entirely — it went straight from the briefing (business and requirements documentation) into lo-fi, then hi-fi, two sprints for each stage. That changed how I worked: instead of exploring broadly before converging, the work became continuous translation and refinement, with frequent checkpoints alongside the team (PM, engineering, content) to validate state logic, copy, and technical feasibility before moving to the next phase. Final handoff documented every screen state, data variant, and edge case — not just the happy path.

With no room for wide conceptual exploration, UX focus narrowed to one question per screen: what does this person need to understand first, and what can wait?

Both products enter the app through the same pattern:

Home (or the relevant tab) → contextual entry card → dedicated L2 product page

The entry card is never generic. In Home Refinance, for instance, it lives inside the loans dashboard and delivers the insight up front — "today's rates are lower than yours, here's what that means" — with the new estimated rate and monthly savings already visible, no tap required just to decide whether it's worth exploring further. In Home Equity, the card only shows up when it's earned: it's hidden if no property is linked yet, changes state while equity is being calculated, and only becomes its full version once there's enough data. The screen never promises something it can't yet deliver.

The L2 page is where the complexity gets organized: the result comes first (visual, prominent), the explanation second, the action third.

The L2 opens with a dark green header and a circular gauge visualizing the relationship between home value, loan balance, and available equity — a ratio that would take a full sentence to explain in text, but reads as a shape in under a second. The three supporting numbers (equity, loan balance, home value) sit below in secondary hierarchy: users don't need them to get the headline, only to confirm it.

Next, a "borrowing power" card translates the abstract number into something actionable — how much the user could potentially borrow — followed by three product options (home equity loan, HELOC, cash-out refinance), each with a short, plain-language line explaining when that product makes sense, with no credit jargon. Educational cards close out the screen for anyone who wants to learn more before acting, without forcing that reading on anyone who already knows what they want.

Here the real UX challenge wasn't visual, it was trust: to calculate a new rate, the product needs credit data, which is usually the moment users get nervous. Instead of a cold form, I designed an activation bottom sheet that reframes the ask as a benefit — "let's grab your mortgage details via credit tracking" — with an inline "why do we need this?" link for anyone who wants detail, and a reassurance line right under the primary button ("your information is always protected") for anyone who just wants to confirm it's safe and move on.

After activation, the rate comparison follows the same logic as Home Equity: result first (current rate vs. new rate, estimated monthly savings), details second (lender, term, remaining balance). Less common situations — more than one mortgage linked, an unusually long lender name, a higher rate instead of a lower one — were designed as first-class variants, not exceptions bolted on afterward.

The throughline across both projects is the same UX principle: never make the user do the math. Whenever there was a choice between showing a raw number and showing a ready-made conclusion, the conclusion won — "your rate could drop to 6.2%, about $148/month in savings" communicates more, faster, than an amortization table ever could. Visualizations (the equity gauge, the loan trend chart) carry the weight that text usually has to, and the interface only steps down into the next level of detail once the user shows interest — never before.

Each product was documented with its full set of states: default page, next-step tip, loan paid off, low equity (under 15%), calculation error, legal disclaimers, and — in Refinance's case — pending credit activation, activated with no open mortgage, and a higher rate than the user's current one. Mapping these states as early as lo-fi avoided rework at the hi-fi stage and gave engineering a complete spec before the first sprint of visual build even started.