Goldilocks Browse

In this shelf example, the user can navigate by changing the width and height. The plot shows all of the height-width combos available.

Inspiration

When I'm shopping, sometimes I know exactly what I want, and there are so many products out there that I am sure it exists somewhere. This inspired me to create a better way to search through existing products to find exactly what I wanted and get that satisfaction of receiving a custom-made item, without the time and cost of having something custom made.

What it does

Goldilocks browse shows a set of products that are all very similar, but differ in a few key attributes. The interface shows one item at a time. The user can then move through the products by indicating that they like the product but want it to be taller, shorter, wider, rounder, etc. for predefined key attributes of a product. The result is a view that looks like a stop-motion film as one product is replaced with the next.

How I built it

The project involved building the data set of scaled, attributed product images and building the web interface. I gathered silhouette photographs and product attributes from Wayfair.com and processed them with Inkscape and Python scripts. I built the proof-of-concept web interface using a slideshow image viewer as a starting point.

Challenges I ran into

The most interesting part of this project was coming up with a way to define the product "nearest neighbors" in the parameter space of key attributes in such a way that a user could navigate through it. In the end, I generated tables with one row per product and columns for product ID's of products that there were slightly-smaller and slightly-bigger along each attribute, as calculated with a Python script.

For the visual display to have the stop-motion film look I was going for, I needed images of products with white backgrounds and from identical angles. In the future, it would be ideal to use 3D models of products to render out silhouette shots from identical angles and distances.

Accomplishments that I'm proud of

Getting three product examples up and running: industrial-style shelves, cylindrical glassware, and white plates. The white plates are particularly interesting because I used a "roundness" parameter to sort plates that range from circular to square.

What I learned

This way of browsing can be very effective, but you need around 50 items to make it look good. It is the key attributes are orthogonal to one another -- in other words, that there are enough products so that you can change one attribute without also changing another attribute.

What's next for Goldilocks Browse

Next up is automation for scaling this up to many products. Automate the identification of groups of products that can be displayed in this type of widget. Automatically scrape the silhouette shots and skip products that do not have white background silhouette shots. It would be exciting to try a really densely populated product class with more than two key attributes.