Scroll to see the full matrix →
Context
At the start of this project, we had new business needs and capabilities that needed a place to live on our property cards. Once we clearly documented the problems and aligned on future goals with leadership, I led the rebuild with a team of five amazing colleagues under my direction: a senior designer, a design systems engineer, a design technologist, a content strategist and a principal researcher. We worked across many orgs and consulted with legal, the brand team, and had regular meetings with our head of design to keep this work at the highest levels of quality and visibility. The work took nearly a year of testing and revision before we had a recommendation that held up across every surface, and the work paid off with a comprehensive system being implemented and governance that will outlive this project alone.
Defining the problems
Before proposing anything, I wanted the existing problems clearly defined. I knew we were about to do a whole lot more than just “make room for new business needs.” Here’s what we found during the audit of every surface and every platform on Zillow that shows a property card:
Extensive cross-platform audit
Cataloged every surface the card appears on and every variant running in production: search, map, collections, saved homes, email, recommendations, partner placements.
What it found: Inconsistencies across platforms because design system components aren’t being used properly — no one owns governance and quality standards.
Behavioral data audit
I worked with analytics to see where action actually went: what got tapped, how engagement differed by surface and listing type.
What it found: The photo carousel received high engagement and positive metrics, and the save action was our #1 signal of intent — yet both elements were missing from key surfaces.
Constraint mapping with partners
Interviewed every team whose data lands on the card: legal and MLS compliance, ads, personalization, brand, and engineering leads across the Search team.
What it found: There were a lot of hard constraints that varied by market, and a big issue with the flex badge logic.
Best practices evaluation
We used mixed methods of tenets and traps and heuristics, and had our IA team evaluate the hierarchy.
What it found: The visuals were inconsistent and not up to our quality bar, our information hierarchy did not reflect the user’s mental model, and there was no space for new features.
Reframing the work
What started as “redesign the property card” turned into a journey-based, all-surface and platform system creation project. I created a vision of how the card could reflect what we understand about a user over time, and how we can tie in our business offerings at the right moments, including emerging technology. This vision earned stakeholder and leadership buy-in. It also started some great conversations with our engineers.
Exploring all design directions
We explored hundreds of combinations of visual stylings, badgings, buttons, hierarchy, sizes, and more. We leveraged foundational research to give us a new hierarchy based on card sorting and prioritizing jobs to be done.
Testing in Zillow sandbox environments
Our design technologist built the leading concepts into a live sandbox, a year before vibe-coding tools made interactive prototypes easy. That let us put working cards in front of people and watch what they did with them: how fast they could tell two homes apart, which one they chose to open, what they thought a label meant, and what they made of more ambitious concepts like progressive disclosure on hover or dwell.
Pushing back for our users
The business wanted agent faces on the card as a form of advertising on premium listings, but I knew that this would not serve our customers’ primary goal of understanding if a home they found fits their needs. They want to see the details and the media, not a stranger’s face. As an alternative, I proposed a premium card that had a large agent card and contact button at the very end of the photo carousel. The premium listing team agreed to this proposal and were even more excited at the other solutions we brought to the table with videos and rich media in the cards.
What we built
The Property Preview System is now part of Zillow’s design system. It is being launched and built incrementally as new technology becomes available and as time allows:
- Larger image areas and new rich-media ingress points
- AI-driven personalization
- 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 and more menu
- Space for price or affordability details
The rigor underneath
A card that has to work on every surface, in every market, for every listing type and in every phase of the journey required a lot of systems thinking and content strategy. Here, we’ve documented the high level anatomy of a basic card:
Documentation
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, and was adopted as-is by the design systems team.
Outcomes
Visual refresh was successful
All cards on Zillow now align with the new brand guidelines. We only saw positive metric changes.
Fragmentation > defined system
Guidance and hierarchy established, final designs and docs delivered to DS engineers, C-suite approved.
Adoption and incremental changes in flight
Product teams are building and A/B testing sensitive elements incrementally, like multimedia and multi-unit cards.