Research and design system for an agentic mortgage platform

A research template, and a library drifting from its code

I joined the team building the pilot product for an agentic AI platform: US mortgage origination for mid-sized lenders. Two things were in the way.

The research followed a standard template of users, goals, journeys and pain points. And the design library was a fragmented MUI implementation, with design and code drifting apart and no handoff framework. I took on the design system beyond my brief.

Mortgage is rule layers, not journeys

The template could not show which rule system a requirement belongs to, or who owns a decision at each stage. So I sorted every requirement into four layers.

1. Federal lawNon-negotiable. The product cannot let anyone bypass it.
2. Agency guidelineSet by agencies such as Fannie Mae and Freddie Mac. Not law, but standard.
3. Lender overlayA stricter rule one lender adds on top of the agencies.
4. Internal policyMostly how a lender works, not whether a loan is allowed.

Take debt-to-income. Agency guidelines allow up to 50%, depending on automated underwriting. Many lenders cap at 45%, so the 45% is a lender overlay. Move the borrower's figure to see which rule decides.

The product must store the two thresholds separately, so it can say which rule said no. This explainer is redrawn from my research board. See the original board

Competitor analysis ran through an AI framework I wrote. It told the model what to capture, when to synthesise, and what it must not infer, such as demographic guesses not grounded in the interface.

Rebuild on a base the AI could build from

I moved the design system to shadcn/ui, instead of repairing the MUI library already in use. Its component structure is one an AI can build from, which was the platform's objective. Token names were kept identical in design and code.

A proof of concept through the platform's AI build flow came first.

One token system on four axes

I built 30 to 40 custom components and repurposed shadcn's own for the rest. The tokens carry four axes: primitives, brand, mode and density, from comfortable to ultra compact.

80 to 85% built, and notes for stages that never started

By the time I left, 95% of existing components were migrated. The later design stages never started. My research left notes for them, and they are notes, not a design: a loan officer would see "near the DTI limit", not "DTI 47.36%".

No product screens are mine. The components they were built from are. I was not the design lead, and product direction was not my decision.

Also: Ekam, a design method that runs with AI, Multi-location digital presence platform. Every role, team and date.