Overview

Expedia Partner Central (EPC) is the portal for hotels to manage their listing on Expedia, including uploading listing photos. EPC’s photo feature has a completeness score called, you guessed it, the photo score. It was an effective way to encourage hotels to add the photos travelers like to see at the right resolution.

Problem statement

Unfortunately, the photo score was fairly generic and based on things that all hotels have in common, like ‘exterior’ and ‘guestrooms’. When hotels added amenities, the photo score didn’t factor that into the recommendations because, in our system, there was no connection between amenities and photos. For example, a hotel would set up their pool but the photo score didn’t update to encourage uploading a pool photo. While hotels could still add photos of any amenity on their own, they might not know to do so. 

We had good data from user research and analytics about what photos travelers like to see, but we hadn’t used that data in the photo score yet.

This project was to fix these problems by updating the photo score to be specific to each hotel based on its amenities. We added 18 conditional photo categories to the score based on our data.

As long as we were updating the photo page, there were other improvements we wanted to consider at the same time:

• I had previously designed a new version of the photos pages, but the scope was mobile-only at the time. We wanted to add these improvements to the desktop too:

  • Categorizing photos on mobile was using a tag pattern. Desktop used more cumbersome dropdowns.

  • More helpful low-resolution error (allowing photo replacement)

  • More compact photo score and a more complete missing photo list.

• Internal and user feedback had also highlighted other things that could be improved.

  • There was no help or guidance for taking good photos.

  • No easy way to see all uploaded photos.

  • Why certain photos were marked as missing wasn’t always clear.

  • No drag and drop uploading.

Users and audience

Any hotel using EPC will need to use the photo page at some point. Often the users who work for hotels aren’t particularly tech-savvy or have an eye for photography. We needed to provide as much guidance as possible. 

My role: primary UX and UI designer

I worked with the content strategist, product manager, and a team of engineers. I led the project’s UX, including clarifying the business requirements, creating wireframes, user flows, and visual designs. 

Scope and constraints

• The new design needed to retain the functionality of the existing feature, such as:

  • Photos need to be assigned to categories and subcategories.

  • Photos need to be above a certain size and file type.

  • The photo score needs to be prominent and easy to understand.

  • Photos can be assigned to one or more guestrooms.

• The design needed to be responsive (work on any screen size).

Industry research

I looked at how different sites handle uploading, categorization, labeling, tagging or grouping photos. The main sites I referred to were Instagram, Airbnb, Google Photos, Flickr, eBay, Etsy, Concur.

Some of my most interesting observations:

• Instagram’s location and hashtag search are a straightforward way of tagging photos from a near-infinite set of options.

• Airbnb has a simple photo upload that uses free-text captions instead of categories. EPC relies on structured categories and doesn’t support free-text. I also liked the tips for taking photos.

• Google Photos has albums that are a similar concept to categorization but photos are moved after being uploaded as a separate step. The gallery also has a good way of showing photo thumbnails of different aspect ratios without cropping them. 

• Flickr has a robust photo management tool that includes tagging, albums, and groups. However, the UI is targeted at expert users and seemed too complicated.

• eBay has an enormous set of categories for listings (not individual photos). I like how they handle this by asking users to ‘Describe your item’ which performs a typeahead search of available categories. There is also a way to browse the full category tree, but it is much more cumbersome.

• Etsy has a complex category structure for the entire listing (not individual photos). Users select from a long list of categories, then subcategories, then sub-subcategories. 

• Concur has an expense type selector that used a searchable list that could work for us.

V1 designs

Since I had recently finished a new mobile design, the first step was adapting that version to desktop and adding the new photo categories. The mobile design included a cleaner, one-column list of photos and an improved categorization flow that used a pill pattern instead of dropdowns. I also added more prominent links to get help with photos to the sidebar.

After reviewing the design mockup with UX peers and stakeholders a few problems were clear:

• With the new categories in amenities, the page could be really long.

• Tabs made it impossible to see all photos at once.

• Labeling still felt like it could be simpler. Scanning two lists of pills wouldn’t be very fast and seemed redundant.

• It wasn’t easy to figure out which photos were missing because they were mixed with existing photos and split between two tabs.

V2 designs

I made three big changes in this version to address problems with the previous design. 

1. The tabs were changed to show ‘Your photos’ (everything uploaded so far) and ‘What’s missing’. This made it possible to see everything uploaded in one place, and everything missing in one place. Low-resolution photos would appear in the missing tab too, providing one place to see them all at once. 

2. V1 divided the gallery into sections based on every photo category, which could be as many as 18 plus each room type. Since each section would usually only have one or two photos, this leads to a lot of wasted space and a very long page. Each room type still needed its own section to clearly understand which photo is assigned to which room, but other than that the other categories could be consolidated into an ‘Amenities’ section or an ‘Activities’ section. This led to a denser and shorter gallery page that was easier to scan.

3. In the upload flow, I added a typeahead search feature to make categorization easier. Before, users had to select a category, then a subcategory but a search meant users just started typing and selected the most appropriate result. Since only subcategories would appear in the typeahead results, selecting one would mean the user is done with the categorization step.

Stakeholders and UX peers agreed that this was going in the right direction, but still had room for improvement. The main issues were: 

• In the ‘What’s missing’ tab, it wasn’t clear which room photos were missing. To save space, I made the thumbnails smaller, but this meant that there wasn’t room for a label. Since the photo score has requirements for specific photos (like the bathroom, the view, or the kitchen) it needs to be more obvious. 

• The categorizing view was cluttered and potentially overwhelming. If the search was the best way to categorize photos, then the list of categories would just be a distraction.  

• The content score in the right column showed the property amenity, room amenity, and policy scores as well as the photo score. It would be better if it just focused on photos since the other areas of the content score aren’t actionable from this page. 

V3 designs

With the next version, I continued to explore improvements to the gallery.

• On the ‘what’s missing’ tab, I explored options to list each missing room photo.

• Explored photo grid options. The square-cropped thumbnails were the easiest to implement but had the drawback of not showing the full photo. I liked the way Google Photos showed different aspect ratios without cropping.

• I removed the irrelevant content score sections from the right column so only the photo score is shown.

I also improved the upload flow by removing the full list of categories. This led to a simpler flow for cases where the category was unknown. Working with the content strategist, we decided a better word for the action of categorization would be ‘label’. For the purpose of this case study, I’ll refer to them as ‘categories’ and ‘subcategories’ but the UI refers to them as ‘labels’.

Again, after reviewing we felt this design wasn’t quite finished. A few things that didn’t seem right were:

• The photo score in the right column and the ‘What’s missing’ tab were both trying to tell the user the same thing but in slightly different ways. 

• For hotels that are missing photos, what’s missing is the most important thing on the page. Neither the ‘What’s missing’ tab or the photo score was standing out enough for how important they are.

• With the tab layout, there was no good way to see both what’s missing and what has already been uploaded. 

• For the different thumbnail explorations, my preference was the version without cropping, but this added engineering scope so was put off for now. We agreed to go ahead with the smallest cropped square thumbnail version. 

V4 designs

The big epiphany with this version was that two tabs weren’t going to be helpful for the user. If we abandoned that pattern and figured out how to fit all the important information into one view we would have a much better experience. To achieve this, I combined the photo score and missing photos into one section and moved it above the gallery to give it more prominence. Since the list could be very long in some cases, I made it expandable but collapsed by default. 

As I was designing this, more help resources became available so I updated the help in the right column to include these.

When a user clicks one of the missing photo buttons, we know they are most likely uploading a photo in that category. I wanted to find a way to use that information to make the flow easier. My idea to achieve this was to bring the list below the search field with a few key differences.

• Instead of listing categories, list subcategories so if the user chooses one, there are no further steps.

• If the user clicks a missing photo, change the list to subcategories related to what they clicked. 

• The list would be ordered by popularity so that it is more likely that the subcategory the user needs is near the top.

• Shorten the list to the top 6 instead of trying to list all subcategories.

As a fallback, if the user didn’t use the search or find the subcategory in the list, I kept the browse functionality but the hope was that no user would need to use it.

With this version, I was ready to move to the next step; engineer handoff. The problems we set out to solve had been addressed and I couldn’t see any further improvements (without increasing the scope). Stakeholders and peers were also on board with this version. 

Outcomes and lessons

Outcomes

• Photo uploads increased 50% month-over-month.

• The more relevant photo score encouraged hotels to upload the photos travelers care about.

• The easier to use flow allowed hotels to spend less time uploading photos.

• Having amenities and photos better aligned paved the way for future improvements, such as enabling photo upload from the amenity edit pages. 

What I learned

• Throughout this project, I asked peers for feedback regularly and found it incredibly helpful in choosing the best direction and solving problems. 

• I started the project with the assumption that we would continue to use tabs. This turned out to not be the best option, which reinforced to me the value of questioning every assumption.  

• Working on previous projects, I would sometimes use fake hotel information or filler text instead of real data. For this project, I decided to find a real hotel and use real photos instead of making up everything. This allowed me to feel confident the design would work in the real world.