In September 2017, I created a series of Google Chrome browser extensions to explore a set of design variables for how we display images on our Things to Do search results listings.

We had recently tested two variants of our search results listings, one with "slim listings" which took up less vertical space and one with large images, both with otherwise identical content. The slim listings had higher conversion, while the larger images had a higher visual appeal score. Our hypothesis was that the conversion difference was due to showing more listings per mobile screen size on the slim listings vs. the large image listings. My challenge was to see how we could improve our images while keeping the listing height the same.

I came up with several ideas for how to improve the images, but because the types of images we have vary so much by activity and by destination, I wanted to be able to see the impact these ideas would have on many different activities. Rather than mocking up all these variants in Sketch, it made sense as a problem to solve through programming.

My concepts were:

• Improve how we crop our images
  • Crop our images to show the center of the image
  • Crop our images intelligently using the Google Vision API to detect items of interest within the image and crop around those
• Increase the width of our images on the listings
• Show the whole image without cropping, instead scaling it to fit inside the image container on each listing
• Set the image as the background of each listing, and scale it to fit the container, and move the text on top of the image (This would require more work to ensure it is accessible).

I created four Chrome extensions which implemented my image improvement concepts in real time on our live site; for any destination search results page.

Next, I used my Chrome extensions to explore the impacts of each of these image improvement concepts (and combinations of them) on the search results pages for many different destinations.

I used the Chrome extensions to visualize each of the concepts for eight of our top destinations to get a good subset of the types of images we have. I then took screenshots so I could compare them side by side. Next, I rated whether each image was a good representation of the original uncropped image, and compared which method provided the best results.

Using these Chrome extensions, I was quickly able to visualize these different image concepts across a large subset of our destination search result pages, and make a decision about which ones to move forward with. Having an interactive demo also helped when working with my product manager and engineers to decide the merits and relative tradeoffs of each concept.

Through this project, I took a design problem and came up with a way to explore the variables programatically through code. I learned a lot about how our pages are constructed, as well as gained more experience writing more complex Chrome extensions than I had in the past. I also learned about the capabilities of the Google Vision API and how to use them.