Scroll to Browse

Inspiration

Scrolling on browse pages is taxing on the eye, since your eyes have to jump between multiple columns of products. If you only care about the imagery at first, why not show those images in the same spot as you scroll? Initially we wanted to solve this problem by limiting the amount of products shown on a page, but we realized that would play against Wayfair's strength of having a wide selection. Instead, we focused on how to show more products to a customer, faster and easier.

What it does

This feature replaces the product grid on Superbrowse with a single large image card. As you scroll, the next product image appears in place of the last one (or you can scroll the other direction to go back to previous products).

How we built it

We added a React component on top of the superbrowse page to replace the product grid.

Challenges we ran into

Getting the page styled like we wanted to was tough, so it would have been good to have a CSS developer on the team. Initially we had hoped to intercept the scroll event which turned out to be impossible, so we had to resort to CSS tricks to make the page look like it wasn't scrolling.

Accomplishments that we're proud of

We're happy with the way that we managed to preload images so they appear instantly when you switch to the next one. Initially, we had to wait for the browser to load the next image after you swapped, so it felt slow.

What we learned

React is easy to work with and the homebase components are great. Image resizing is still kind of tricky with our new image components.

What's next for Scroll to Browse

When the user pauses on a product for more than a second, we want to load in the PDP details around the image. This would essentially combine our Superbrowse and PDP pages into a seamless and delightful experience.

Built With

• react