Understand

Context

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.

Problem Definition

Out of many issues identified, 3 stood out as clear problems for guests and the business:

• Frustrating guest experience – Every one of Airbnb’s tiers had a completely different photo viewer (Marketplace, Plus, Luxe, Hotels, Experiences and Adventures).
  
• Small photos – Poor use of desktop screen space meant vertical photos displayed at half the size of horizontal photos. On Plus and Luxe, many photos could not be enlarged.
• High engineering costs – Five completely different photo viewer code bases were expensive to maintain for the business.

User problem:

For people browsing Stays and Experiences on Airbnb, viewing photos is a frustrating experience due to inconsistent UI and small photos.

Business problem:

Maintaining five different photo viewer code bases is time consuming, expensive, and prevents the business from innovating across all photo viewers.

Discovery

Highlights

We unearthed useful insights through usage data, inventory analysis, and user research:

• In Airbnb’s global inventory of listings, 1 in 5 photos are vertical. However due to poor use of screen space on desktop, vertical photos appeared at half of the size of horizontal photos.
• Most guests mainly browse Airbnb on desktop and mobile. Just 5% used tablet (medium) breakpoint.
• Most people use Left, Right, and Esc keys to navigate.
• Participants reflexively swipe left or right on full-width images, even without UI affordances like arrows or pips.
  

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.

Validate + Iterate

My team and I rolled out changes as milestone-experiments:

M1 — Layout improvements

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.

M2 — Cross-tier support

Next, I led the effort to make the photo viewer work across all Airbnb tiers: Marketplace, Plus, Luxe, Hotels, Experiences, and Adventures.

M3 — Entry point improvements

Finally, the third release improved entry points to the photo viewer across all tiers.