Design is never done
How we improved Airbnb's Product Detail Page through a number of small iterations over the course of a year.
The Problem
In early 2017, we identified a number of redundancies and inconsistencies, as well as legacy UI, on Airbnb’s Product Detail Page (PDP). Our team wanted to test new designs to remove these redundancies, ensure consistency across verticals and update our front end with our new Design Language System. But how could we update one of Airbnb’s most important pages without hurting conversions, or ideally even improve them?
The Project
After a long audit and brainstorming session, I worked closely with Jonathan Rahmani and the rest of the team, splitting each idea into over 30 small experiments that we would test over the year. The day to day progress appeared slow, but with persistence, we were able to ship most of the experiments with positive results. After a year of working on the page, the improvement was significant. Here are some examples of the projects I worked on:
Reducing redundancies
Airbnb’s PDP had two “The Space” sections full of redundant content taking up a lot of precious vertical space and leading to additional information processing for potential guests. I proposed a new simplified design by eliminating redundant content and rearranging the rest into more appropriate sections. I also proposed removing the “About this listing” title and switching the listing description icons for a smaller and bolder set to gain even more vertical space. After many iterations, we were able to launch the experiment with a small improvement in conversions and a considerable reduction of potential guests’ cognitive load.
Reducing redundancy before and after
Sleeping arrangements
The research team showed us guests were interested in knowing the bed size and distribution but the relevant information was too far down the page and unnoticeable. We tested highlighting the sleeping arrangement section with a new design to add clarity and promoted it above the rest of the sections. This change had a direct positive impact on bookings.
Sleeping arrangements before and after
Map size
Location context is a key feature on Airbnb’s PDP, but before there was a huge map at the bottom of the page blocking the booking component further down the page. The hypothesis we tested was that we could reduce the map size without affecting the experience or conversions. That way it would enable the booking component to remain in the sidebar. The experiment was successful and we launched it to the whole user base.
Map size before and after
Booking component
The booking component, a critical piece of Airbnb’s PDP, used legacy UI components. I proposed a new design using components and style guidelines from our Design Language System. After a number of iterations and tests, we were able to successfully launch it to 100% of the user base. This change improved visual quality, brought consistency and updated the technology behind each component.
Book component before and after
Share & save
Guests were having issues accessing the share and save buttons on screens with a low height. I proposed a new design to elevate these two actions and achieve consistency with how our native apps work. The experiment was a big success: guests started sharing and saving more homes!
Share & save before and after
me at