0

The morning-light on Elm

MustWants

Wren scores a house, then a licensed agent takes the tour.

MustWants: Wren scoring The morning-light on Elm, 91 percent

Founding designer on a real-estate product that treats a home as a compatibility match. Wren asks what you need versus what would be nice. Tested with 198 agents and 14 buyers. Not shipped.

Role
Founding Designer · Research through UI, brand and prototype
Year
2024-2025
Duration
9 months research · 6 months design (team of 7, 1 designer)
Tools
Figma · Cursor · Lovable · Miro · Jira

From intake to a licensed tour

Five product beats, in source order. Each one returns later as evidence.

  1. Wren asking about budget during intake, with the answer already understood
    Intake
    Budget, understood in conversation.
  2. It's a Match: the Morning-Light Corner Unit at 91 percent
    Match
    Ninety-one percent, and she asks before assuming.
  3. The date: the house describing its own mornings, unprompted
    The date
    The house answers. Wren is gone.
  4. Compatibility report: daily routines 94, layout 88, neighborhood 79
    The report
    Four dimensions, and they disagree.
  5. Handoff to Sona Ellison, licensed in NC, with Wren retiring
    The handoff
    Sona is licensed in NC. Wren stops here.

MustWants started as listings for military families: relocate on orders, to a city they have never seen, on a deadline. A house that fails one requirement fails. Opened to the public, the deadline vanished and the same loop remained. Fall for a house in thirty seconds, find a dealbreaker, leave. Three to four and a half months. Eight to ten homes.

  • …each preference was a metaphor for each other’s personalities.

Listing agent, research interview · 198 agents and 14 buyers over nine months

Three faces standing in for the research programme: 198 agents and 14 buyers over nine months. Anonymised on the record; here so the numbers aren’t blank.

  • A day trader we interviewed as part of the research programmeDay Trader
  • A project manager we interviewed as part of the research programmeProject Manager
  • A real-estate professional we interviewed as part of the research programmeReal Estate

Preferences arrived as one flat list. Everyone got the same seven questions, in the same order. A score that cannot say no is not a score.

V1 intake step four: transport mode, arrival time and an ideal-commute slider, marked 4 of 7
Everyone got the same seven questions, in the same order.
V1 results feed showing three homes, each badged one hundred percent match
Three homes. Three perfect matches.

V1 audit · what the product shipped before the reframe

If the form is the problem, make it a chat. It knew one fact ("Got it! 2 Bedrooms works perfectly!") and was already flattering. That is the 100% badge in language. The gradient painted over the house you came to look at. And it was still a form: five equal boxes, nothing branching. The pattern was never the problem.

Abandoned direction: a gradient wash obscuring the property behind feature bullets and inventory counts
Abandoned direction: a chat intake with flattering copy and five equal option boxes

Abandoned directions · cut before Wren

Four moods from layered gradients: napping, thinking, speaking, and a match state that blooms past her edges then sets into marble. Every control is flat and still, so she is the only thing that breathes. Her scale tracks her authority.

Wren · match
Splash screen: Wren at full presence introducing herself as the matchmaker
Full presence. The most she ever occupies.
Home feed with Wren reduced to a small strip above two new matches
A strip in the feed. Her work is done and her size says so.
Empty state with Wren occupying the whole screen
And the whole screen again, when there is nothing to show.

Wren’s scale ladder: full presence, strip, empty state

Say three bedrooms and Wren asks who is in them. Say one and she never asks. Guessing family status is what fair housing law exists to prevent. The cost is the progress ring: a tree has no denominator.

Wren · thinking
Wren asking about budget in conversation and understanding the answer without a form field
Intake as conversation, not questionnaire.
Wren asking what would make you fall for a place, with selectable qualities
What would make you fall for a place, asked in those words.
Wren asking who the third bedroom is for rather than assuming
The branch. She could guess, and says so.

Open the intake prototype

Intake as conversation · asks rather than infers

A home clears every essential or it gets no number. Extras become the score. Inventory collapses live as each essential lands, which gives Wren the line that defines her: that is five essentials and four homes left. Which would you actually walk away over?

Wren · speaking
Wren pushing back after five essentials reduce the available homes to four
She disagrees with you, using nothing but the truth about inventory.
Intake summary listing essentials as gates and extras as a count, with no percentage
Gates above, score below, and no percentage. A percentage would only drift toward 100.

Two data types, one honest arithmetic

Wren leaves the screen and the house answers in the first person. Quiet. By seven the sun is through my east windows, and the kitchen goes gold. Asked for dealbreakers: parking is tight, and my windows are single-pane. It is the only voice that volunteers its own weaknesses.

Wren · napping
Match deck card labelled the morning romantic, Corner Unit on Elm
One card, one line, one reason.
On a date: the house describing its own mornings and then its own faults
Wren is absent here. That absence is the design decision.

Open the date prototype

First-person listing voice · the house as source

Four dimensions, scored independently: routines 94, layout 88, neighbourhood 79. The 79 is the most valuable number on the screen, rendered at full weight. Softening bad news is the instinct that badged three homes at 100%.

Wren · thinking
Compatibility report at 91 percent overall with neighbourhood scoring lowest at 79
Ninety-one overall, and it still tells you where it is weakest.

Independent dimensions, honest weakest link

Both partners complete intake separately and never see each other's answers. Whoever reveals first otherwise sets the frame. Scores are never blended. A home that is 95 for one and 45 for the other is not a 70.

Wren · thinking
Two completed intakes surfacing a single conflict, garden versus garage, with twelve homes matching both
Twelve have both. Three hundred and forty have one. That is a decision, not an argument.

Open the two-buyer prototype

Twelve have both. Three hundred and forty have one.

Wren at her smallest size anywhere in the product: my part is done, say hi to Sona, she knows this block. The agent card is deliberately not clay. Every Wren surface carries that colour, so using it here would imply she wrote the introduction. She did not. Saturday, 2:30.

Wren · napping
Handoff to Sona Ellison, licensed in North Carolina, with Wren retiring to a small strip
Sona is licensed in NC and knows the block. Wren shrinks the moment introductions land.
Tour booked for Saturday at 2:30 with Sona Ellison
The appointment. Saturday, 2:30.

Licensed human at the point of consequence

Measured across the research programme: 198 agents and 14 buyers over nine months, not from shipped telemetry. I pivoted from listings for military families to a compatibility match, ran brand and concept in parallel, and prototyped in the browser so Wren shipped to engineering as a running component. I did not own the matching model, the roadmap, or the agent network.

  1. 40%reduction in search time against a 3–4.5 month baseline
  2. 35%increase in active interaction with recommendations
  3. 20%faster agent offer submissions

What isn’t solved

Wren has no screen-reader story yet: her state is carried by colour and motion alone. Reduced-motion coverage is incomplete. Two states in the contract are specced and unbuilt. And a home that misses one scalar essential by two minutes is invisible when it should surface as a near-miss.

9 months research · 6 months design · team of 7, 1 designer

  • Clay: brand…—:1 on canvas
  • Canvas…—:1 on canvas
  • Board…—:1 on canvas
  • Chalk: text…—:1 on canvas
  • Compatibility…—:1 on canvas
  • Caution…—:1 on canvas
  • Match marble…—:1 on canvas
  • Thinking…—:1 on canvas

MustWants’ design language

A warm clay reserved entirely for Wren and a dusty teal reserved entirely for compatibility, on a near-black canvas that lets photography carry every other colour, plus one amber for the moments the product has to tell you something you don’t want to hear.

Read live from the running stylesheet · --art-mw-* · checking 23 tokens…

Brand & ground

--art-mw-brandClay: Wren, and nothing else…
--art-mw-canvasCanvas: the contrast baseline…
--art-mw-boardBoard: ground behind the device…
--art-mw-surfaceSurface: cards, bubbles, the house’s voice…
--art-mw-raisedRaised: inputs, sheets…
--art-mw-textChalk: primary text…
--art-mw-dimDim: secondary text…

Semantic accents

--art-mw-fitCompatibility: and nothing else…
--art-mw-cautionCaution: honest low scores…
--art-mw-selectSelect: selection state only…
--art-mw-edgeEdge: interactive boundaries…
--art-mw-lineLine: decorative separation…

Wren’s body

--art-mw-orb-warmOrb core: resting highlight…
--art-mw-orb-emberOrb outer: warm stop…
--art-mw-thinkThinking bloom…
--art-mw-marbleMatch: polished marble…

Shape & motion

--art-mw-r-chipChips, inner elements…
--art-mw-r-cardCards, message bubbles…
--art-mw-r-sheetSheets, device frame…
--art-mw-r-pillButtons, badges, Wren…
--art-mw-ease-breathCharacter loops only…
--art-mw-ease-snapAll interface transitions…
--art-mw-ease-overshootWren’s bloom and match…

Typefaces

Display · Playfair DisplayWhat do you need in a partner, and what would just be nice?Editorial voice: Wren’s prompts and the case study’s H1s.
UI · InterMusts gate. Wants score.Everything the product speaks in: inputs, chips, captions.

System principles

One colour, one job

The teal marked match quality, selection state, and the user’s own messages: three unrelated meanings on one signal, so none of them read. Now `--art-mw-fit` marks compatibility and nothing else.

Filled means tappable

One hairline token was serving as both decorative separator and interactive border. At 1.23:1 it was invisible as an affordance. Interactive boundaries now clear 4:1; hairline means display only.

Wren runs on her own clock

Interface motion is 170–400ms. Her loops run 900ms to 4.2 seconds, deliberately outside that band. On a button’s clock she reads as a loading spinner rather than something alive.

The contract, four ways out

Reading live values from the stylesheet…

Written for humans and machines

Every token above is declared once in tokens-art.css, mirrored in Design.md, and read live on this page so the exhibit cannot drift from the running stylesheet. The same contract is what the case study renders against.

ContractDesign.md · globals.cssAgentsFigma · Cursor · LovableGatevalidate-design-system.shNo driftbuild fails if any of us drifts

  1. COMPATIBILITY PLATFORM

    Buyers test a house as a match before a licensed tour.

    Tested with 198 agents and 14 buyers over nine months. Not shipped. Matching model, roadmap, and agent network were out of scope.

    View presentation
Paul Banks

Charlotte, NC · Remote

Paul Banks

Principal Product Designer

After 16+ years shipping product interfaces, I now design the surfaces where people and agents share a task: prompts, confidence, and the checkpoint where a human still decides.

Get in touchDownload resumeSee my brand-voice work →