Airbnb

Photo Viewer

In this project, I led a redesign of Airbnb’s photo viewer across desktop web, mobile web, iOS, and Android.
Challenge
How might we create a unified photo viewer experience that helps guests easily get an overview of listing photos or view photos in detail?
My Role
UX Design, Research, Interaction Design, Prototyping, Usability Testing, Visual Design
Year
2020
Timeline
3 months
Tools
Figma, Principle
No items found.
No items found.
01

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.
No items found.
02

Gain Confidence

Ideation

Sketching ideas

I began by sketching out different concepts for desktop and mobile. I chose two promising directions and prototyped these with Principle which I then ran light usability testing on.

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.

No items found.
03

Polish

Designs & Prototypes

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.

No items found.
No items found.
04

Results

The project was a success on all fronts.

  • Successful launch – New photo viewer platform for all types of inventory at Airbnb, globally.
  • Reduced costs – Vastly reduced eng maintenance costs by consolidating 5 photo viewer code bases into 1
  • Larger photos – Horizontal and Vertical photos can now be shown 40% and 60% larger respectively
  • Shorter time to book – Slight decrease in time from launching gallery to tapping book
  • Improved guest experience – User research confirmed that guests found it easier to use.
  • No hit to guardrail metrics – No reduction in perfect stays rate (5-star stays with no support tickets)
  • No hit to usage metrics – No decrease in overall number of photo viewers and views per viewer