Cards System.
How we improved Airbnb's listing card consistency across multiple inventories and mediums.
The problem.
Airbnb's search results had different card shapes depending on the vertical — Homes and Experiences. The result was a fragmented experience and extra complexity whenever inventories were mixed. Cards didn't follow a common system or style.
Brian Chesky, Airbnb's CEO, personally asked our team to solve it. He wanted consistency across verticals, and an editorial feel aligned with Airbnb's brand initiatives.
The project.
I worked with Taido Nakajima from the Trips team on a consistent, robust card system that could support homes, experiences, and beyond. Over six months we proposed nearly 30 versions of the system to an ever-growing team. Brian Chesky himself was involved in the final rounds of review.
These little cards have more impressions than our Superbowl ad. — Brian Chesky
We wanted to do it right.
Across surfaces.
The system had to work across Homes, Experiences, and every mobile context — each with its own density and hierarchy needs. Below are the final proposals for each surface, with the original state on the left.
Into the system.
Once the card system was approved, I worked with Pablo Caro to incorporate it into our Design Language System and components library — specs, tokens, and variants. During this process I realized I loved working on design systems.
Shipped to everyone.
We ran the new card system as an experiment and, after a few iterations, launched it to 100% of our user base. This was, by a wide margin, the most impactful project I've worked on.
Wiki is a super talented, thorough, and passionate designer. I had the pleasure to work alongside him while he helped us expand the Design System at Airbnb. — Former Airbnb designer