The photo viewer is the most important surface of Airbnb’s core product. In fact, 100% of guests who complete a booking have opened and viewed that listing’s photos.
Out of many issues identified, 3 stood out as clear problems for guests and the business:
For people browsing Stays and Experiences on Airbnb, viewing photos is a frustrating experience due to inconsistent UI and small photos.
Maintaining five different photo viewer code bases is time consuming, expensive, and prevents the business from innovating across all photo viewers.
We unearthed useful insights through usage data, inventory analysis, and user research:
With my PM and team, I sketching out a number of different interaction model concepts for desktop, moweb, iOS, and Android.
Together, we discussed pros and cons of each direction, and quickly converged on a hybrid model that would best serve guests' needs while also supporting the requirements of Airbnb's different tiers of inventory.
Finally, I prototyped a few different desktop and mobile concepts and my team and I ran light concept testing on each.
My team and I rolled out changes as milestone-experiments:
The first milestone release focused on improvements in how we used screen space on desktop.
By rearranging the layout of the desktop photo viewer, we were able to display vertical photos 40-60% larger and horizontal photos to display 30-50% larger.
Next, I led the effort to make the photo viewer work across all Airbnb tiers: Marketplace, Plus, Luxe, Hotels, Experiences, and Adventures.
Finally, the third release improved entry points to the photo viewer across all tiers.
Along with final visual design, I built prototypes in Principle for Mobile and Desktop.
These helped demonstrate how interactions looked and felt, and were also a resource for our engineers.
The project was a success on all fronts.