Prototype: Fisheye Carousel

At Opendoor, we give offers on homes before we see them in person. This involves a whole lot of behind-the-scenes work, which includes looking at photos of the home.

Our photo carousel is one of our most-used pieces of UI, but it’s also one of our least efficient. So for our hack week, I tried to improve it.

Problem: Traditional carousels don’t scale very well.

We currently use a traditional carousel, like the one used by Airbnb. This has three problems for us:

  1. Inefficiency: You only get one photo per click. When you’re looking at thirty photos per home and twenty homes per day, that’s pretty slow.
  2. Inability to skip around: You can only see nine thumbnails at once. To look at any more photos beyond that, you’d have to add another click to paginate through the thumbnails.
  3. No sense of the overall set: Because you can’t see all the thumbnails in a single view, it’s hard to get a feel for the entire set of photos.

Inspiration: NYTimes Fashion Week Gallery

I thought this gallery by the New York Times was great. It solved all three problems—it was efficient, let you jump around easily, and gave you a good sense of the entire set. And it looked great, too.

After digging around the source, I saw that it used the D3 fisheye plugin to get its Cartesian distortion. I then got to using that for my prototype.

Proposal: Fisheye Carousel

For the desktop, we can display the thumbnails on hover. Then we can squash and stretch them based on the cursor’s position.

It works on the same way on mobile, too, and ends up looking a lot like iOS 9’s Photos.app.

Closing

Check out the live prototype and play around with it yourself. If you want to see my hacky code, the source is on GitHub.

PS: Thank you to Visnu helping me code this up and Connor for reading this over.

PPS: We’re hiring at Opendoor. We especially encourage women, people of colour, and people of other underrepresented groups to apply. Email me at billy at opendoor if you’re interested 🙌