DealStage

TL;DR

• Inherited a funded but stalled redesign of a legacy app and shipped a build-ready new front-end plus a documented design system.
• The hard part wasn't drawing screens — it was getting a direction committed to. Unblocked it by pivoting to an AI-driven workflow: three directions built in Claude Design to lock the decision, then a Claude Code prototype to hit the deadline.
• Delivered two build-ready files — an interactive prototype and a design system — that define DealSage's new interface.

Executive Summary

The Challenge

The app worked, but looked like Microsoft Access circa 2000. Design hours were approved; the hard part was everything around the work.

• No committed direction. Early on there were no clear requirements. With the product lead defining what to build, I owned how it looked and worked — translating rough, requirement-light ideas into designed screens, getting them signed off, and building them out in Figma.
• The decision-maker was unavailable. A new CTO came on and championed the redesign — but he was heads-down on a backend migration, so every attempt to lock a visual direction kept slipping.

Plenty of design was happening. What was missing was a decision.

The Solution

• Switched approach to unblock the decision. Figma iterations weren't landing a call with this CTO. So instead of running more rounds, I built three distinct directions in Claude Design (an AI design tool) for him to react to rather than critique in the abstract. A few iterations later, we locked one.
• Switched tools to beat the deadline. With a direction agreed and time short, I moved off Figma into a Claude Code prototype (AI-assisted coding) — far faster to iterate on and apply feedback to. I took the agreed direction, wired in a component library (shadcn/ui), and iterated relentlessly — more prototype versions than I could count — until the new front-end existed as a working product, not a mockup.
• Shipped a foundation, not just screens. The output was two build-ready deliverables: an interactive prototype and a documented design system engineers can build straight from.

Key Decisions

1. Made a text-heavy deal navigable with scroll-spy

   Problem

   A single deal is a wall of information — seven risk areas plus the counterparty.

   Decision

   Kept it as one long workspace with a left rail that tracks scroll position and jumps you anywhere, instead of splitting it across tabs. Proposed it; the stakeholder was sold on the spot.

   Where

   Deal view

2. Made every AI finding traceable to its source

   Problem

   The product's output is AI-generated risk analysis, and no one senior acts on a verdict they can't check.

   Decision

   Each finding carries its severity, evidence count, and named sources — findings you can trace, not summaries you have to trust.

   Where

   Risk findings

3. Turned deal setup into a guided six-step wizard

   Problem

   One intimidating form for deal setup.

   Decision

   Six-step wizard — architecture, your details, co-investors, counterparty, context, review.

   Where

   Deal setup

4. Muted the risk palette so it reads as judgment, not alarm

   Problem

   Long interactions with a lot of semantic colours create cognitive overload.

   Decision

   Desaturated tones, with saturated colour reserved for meters and status dots, never text.

   Where

   Visual system / risk palette

5. Designed one layout for two readers

   Problem

   The firm hadn't yet decided whether the General Counsel (reads top-to-bottom for the bottom line) or the analyst (drills into specifics) comes first.

   Decision

   One layout serving both readers.

   Where

   Deal view layout

Outcome

• A stalled redesign got a committed direction and a build-ready front-end.
• Made a text- and data-dense product approachable for first-time users, not just power users — validated by positive pilot-customer feedback and buy-in from stakeholders who'd been skeptical of the redesign.
• Shipped a documented design system the team can extend without me.
• Replaced a dated interface with a modern design language for the product.
• The client was happy with the outcome, and specifically valued how the AI-driven approach turned a stalled redesign around quickly.

What I Took From It

When Figma iterations weren't landing a decision, I switched approaches — three AI-built directions the CTO could react to, and we locked one. The habit I kept: match the process to the person and the deadline, not the other way around.