The Property Card, rebuilt

The redesigned property cards live in the search feed: a basic card showing photo, price, beds, baths, and address, and a premium showcase card adding a monthly cost estimate, price-drop signal, and personalized detail chips. — **The system, shipped and in the feed.** The basic card and the premium showcase tier, side by side in real search results. Same skeleton, different density: the showcase card earns its richer treatment with a monthly estimate, a price-drop signal, and personalization chips, while the basic card stays clean and fast. One system, tiered by listing type. (Fictional listing data.)

Context

The property card is the atom of Zillow. It appears in search results, maps, collections, emails, and recommendations: over a billion views a year. When the atom is wrong, everything built from it is wrong, and after years of accretion, it was carrying too much: inconsistent hierarchy across surfaces, legal text competing with photography, and no principled way to add the new capabilities the business needed.

I led the rebuild with a team of four under my direction: a senior designer, a design systems engineer, a design technologist, and a content strategist. The work took nearly a year of testing and revision before we had a recommendation that held up across every surface.

What we built

The new system thoughtfully integrates a lot of competing demands into one coherent card:

Core home facts piped from MLS data, with the legal disclaimers real estate requires, handled as first-class design constraints, not afterthoughts
Larger image areas and new rich-media ingress points
AI-driven personalization and new mini map cards
A rebuilt information hierarchy that survives every surface the card lives on
Dynamic next-best-action buttons that adapt to the surface and the user's phase of journey
A more accessible save button

Before and after of the Zillow property card. The before shows a flat hierarchy with a single static photo and small heart icon. The after shows a media carousel, monthly cost estimate, price-drop indicator, personalized detail chips, a larger save target, and demoted broker attribution. — **Before / after.** The new card carries far more capability without feeling heavier: carousel dots mark the rich-media ingress, price gains a monthly estimate and trend signal, and the personalization chips (community, amenities, HOA) surface what matters to *this* shopper. Meanwhile the hierarchy got quieter where it should: legal attribution demoted to a whisper, and the save action grown into a real touch target. More information, less noise.

Anatomy diagram of the new property card, mapping every element to a logic group: marketing details, unique listing types, must-know statuses, legal requirements gated by MLS rules, personalization fields including AI-generated insights and future smart elements, core actions, financing states, and dwelling types. — **The card as a rules system, not a layout.** Every element belongs to a logic group with display conditions: legal marks appear only where the local MLS requires them, financing states are triggered by user actions, and the personalization group reserves slots for AI-generated insights and “future smart elements”: extension points designed for capabilities that didn’t exist yet. This is what made one card survive every surface.

Prototype flow of the premium card media experience: main photo, then video that expands to a full-screen vertical media stream, links to the home details page, a SkyTour aerial view, and agent contact as the final carousel position with a contact form. — **The rich-media journey, prototyped end to end.** Photo, then video, then a full-screen vertical stream borrowed from social patterns, through SkyTour, and only at the very end, after a shopper has demonstrated deep interest, an agent contact. This placement was the deliberate resolution to the agent-faces debate below: media first, people at the moment they’re wanted. (Personas and contact details shown are prototype placeholders.)

The decision I'm proudest of

The business wanted agent faces on the card as a form of advertising. I rejected it, and made the case well enough that the rejection stuck.

The argument was about trust economics. The card's value to users is that it reads as neutral information about a home. Putting a salesperson's face on it converts an information surface into an ad unit, and users can feel that conversion instantly. Whatever short-term lead revenue it generated would be paid for out of the trust that makes the surface valuable in the first place. On a card seen a billion times a year, a small per-impression trust cost compounds into an enormous one.

But a pure "no" wasn't the end of the design. The card's job during search is triage (rapid, low-friction evaluation), and an agent face has no business interrupting that. Where an agent does belong is at the end of an engaged media journey: after a shopper has swiped through photos, video, and a SkyTour, demonstrating real interest, agent contact becomes a service rather than an ad. So I designed exactly that: the final position of the premium media flow above. The business kept its path to leads, users kept a neutral triage surface, and the agent shows up at the one moment they're genuinely wanted. That's what made the rejection stick: I didn't just remove the idea, I relocated it to where it created value instead of spending trust.

I also killed concepts of my own that added too much complexity. The discipline has to cut in both directions, or it's not discipline; it's just taste enforcement.

Two rejected card explorations on mobile: a full-bleed direction where the photo runs edge to edge with no card container, and a flat inset direction with minimal card chrome. — **Two of the directions we killed.** Full-bleed and flat-inset explorations: beautiful media presentation, but both dissolve the card’s object-ness. Zillow’s brand system wants cards to read as big, chunky, graspable things, and that isn’t just brand vanity: during triage, distinct objects are what make a billion scans a year scannable. Gorgeous lost to right.

A tested dynamic card concept: a minimal default state showing only price, basic facts, and address, and a hover state that reveals the media carousel, monthly cost, personalization chips, and more actions. — **And one killed by evidence, not judgment.** A dynamic concept: minimal card by default, full detail on hover. We over-optimized for simplicity, and users told us so. Nobody wants to pay a hover to scan; information you have to summon isn’t simple, it’s taxed. We caught this because our design technologist built the concept into a live sandbox for realistic research, a year before vibe-coding tools made interactive prototypes cheap. Testing real behavior, not reactions to pictures, is what let user data overrule our own taste.

Outcome

The system is shipping and testing iteratively. The redesigned save button alone drove a 3% increase in home saves, a core engagement metric, and the larger photography and rich-media ingress produced meaningful engagement lifts. The two quarters since these changes began landing have been Zillow's best earnings to date; the card is one input among many, but it is the company's most-viewed surface, and it's now pulling in the right direction.

The senior designer on my team now owns implementation with product and engineering, a deliberate handoff that grew her scope while freeing me for the next high-stakes problem.

And the system got a constitution. In partnership with my content strategist and the design systems team, I authored a 30-page governance document for the Property Preview System, anchored by five principles we call CLASS: Clarity, Look & Feel, Accessibility, Structure, and Scalability. It earned C-suite buy-in as persistent governance for property cards going forward, which means the thinking survives me, my team, and whatever reorg comes next. A redesign improves a surface once; governance keeps it improved.

The governance documentation cover for the Property Preview System, authored by Andrea Salad, alongside the CLASS principles: Clarity, Look and Feel, Accessibility, Structure, and Scalability, each with working definitions. — **The constitution and its five articles.** Thirty pages of governance, endorsed by the C-suite as the persistent standard for the card. CLASS gives every future decision a shared test. Note Scalability’s definition: “flexible to adjusting needs well into the future.” The extension slots in the anatomy above are that principle, enforced.

What I'd do differentlyThis work sat on a shelf longer than it should have, because as a designer on a product-led team I didn't yet understand how to get systems work prioritized and built. I eventually got it moving by convincing the design systems team to adopt it as a component change, but the real lesson was learning to treat prioritization as part of the design problem, not something that happens to the design afterward. I now build the path-to-ship into the work from day one.