The world of owning home furnishings is similar to owning clothes: Nobody wants to see someone else wearing the same dress. Wayfair has a zillion couches in many different colors, designs, and styles to choose from, and we expanded that reach even further when we created our Custom Upholstery Experience.
In the brick-and-mortar furniture store world, Custom Upholstery is the concept of customizing the fabric of a couch. In most furniture stores, couches are displayed in one fabric, but there are actually a variety of fabrics available that the couch can be upholstered with. All it takes is sifting through a rack of fabric swatches to find the perfect style for you.
At Wayfair, we have sought to unlock this feature in a way that would appeal to customers shopping online. Today, you are able to click on a variety of products that will have what we call the “Custom Upholstery Experience”. This feature allows the customer to customize their couch in a number of different ways, depending on the couch itself. For example, a couch could have one fabric for the body, a different fabric for the pillows, and a third, different fabric for the trim! Beyond that, some couches also allow you to customize the types of nails that appear on the couch’s arm (called a “nailhead”), or the types of legs on the couch. Combine this with potentially having over 200 fabric options, and this makes for a zillion possibilities!
In the online space, the largest hurdle with Custom Upholstery is building trust between ourselves and the customer: They need to be confident in the fact that what they see on the screen is what they will receive on their doorstep. To build this confidence, the customer needs to see all possible combinations of body fabric, pillow fabric, trim fabric, nailheads, and legs. For us, that potentially means storing, showing, and loading one image for every single possible combination of options. That’s a lot of images, and we realized from the outset that it wasn’t efficient. Instead of creating one image for each different combination, we created transparent images for each different individual option, and layered them on top of each other to create the final “image” – a stack of transparent images layered on top of each other.
A Zillion Images for a Zillion Couches
We wanted to enable this experience for hundreds of Custom Upholstery products. As you can imagine, the prerequisite to making Custom Upholstery possible is images – a lot of images. Before this feature even hits the Storefront team’s plate to build out the customer experience, the Product Media team helped generate all the required images. To give you sense of the scale, we started creating PNG (transparent) images less than a year ago, and have generated more than 150,000 images since. This means we can’t possibly create the images by hand - having someone using a tool like Adobe Photoshop to manually change the color for each image would be very tedious and inefficient at best. So, how did we do it?
The short answer: 3D models. The process was a little long, however, and went something like this:
- Talented artists created complex 3D models. The 3D models only take into account the shape of the couch.
- We created a pipeline for automatically ingesting the 3D models and generating an initial set of images from them. These images were not used for the onsite experience – they were just used for QA'ing the model itself.
- We built web tools to display these images, and once displayed, another set of folks QA’ed and ultimately signed off on the model.
- More artists are then involved in creating 3D materials and textures. These artists are rendering the different types of materials and differentiating what they might look like. For example, linen looks very different from velvet!
- We then decided which images we need – that is, what are the most important options, colors, and materials to support – and built a web tool to ingest data about the types of fabric, and which pieces of the couch those fabrics can be applied to. The tool validates this data, ensuring all looks good before starting to generate the images.
- Another robust pipeline was created for combining the inputs from steps 1, 4 and 5, and 3D software is used to generate the transparent PNG images that represent the different pieces of a couch, plus the different material types and colors that are possible. The combination of materials and colors make a fabric option for the customer.
- A second web tool was built to do the final QA on these images, and once those were approved, they were good to go live for the onsite experience.
As we moved onto building the onsite customer experience, there was a whole different set of issues to tackle. Retrieving the transparent PNG image for each option and layering them on top of each other was almost the easy part! Our initial MVP launch completed this work on the client-side.
Growing Pains
As sales were growing, and Wayfair’s Custom Upholstery Experience was becoming more popular, we realized two things: We hadn’t done a good job with speed or consistency. While monitoring our page performance, we noticed slower page performance with the Custom Upholstery Experience versus a regular product – while we had expected this, due to the much heavier image component, we had also noticed customers were leaving the page before interacting with the feature. Furthermore, we noticed that once they added a customized couch to cart, customers were not necessarily continuing on to purchase that product. Having only used the customized image on the product page, we realized that customers may have been losing confidence in the product they thought they were buying. A large part of keeping customer confidence high after a product has been added to cart is maintaining the correct image in the cart and throughout the checkout process; the customer needs to be reassured that the product they think they’re buying is still the one they’ll be receiving.
As a feature improvement, we chose to move the custom image generation logic to the server-side, lightening our client-side load and improving our load times. This also helped unlock our ability to save images, if it made sense to. For example, we did not want to save an image anytime a customer tried a different color combination, but we did want to save an image anytime a customer added a customized couch to cart. We made the assumption that if a customer added a customized couch to cart, then this couch’s image would need to be shown in multiple subsequent locations as the customer moved through the checkout funnel – meaning the saved image would be reused further down the line. From this assumption, we decided that when a customer hit “Add to Cart”, it was safe to save all the layered transparent images into one final image that would be associated with that set of option combinations. Then, when a customer went to their cart and looked at the image, the code there would pull the saved image for their specific option combination, rather than regenerating a new layered transparent image on the client-side.
No Pain, No Gain
All of this hard work is definitely making a difference. We are continuing to add more and more Custom Upholstery products to the site, increasing the count by over 80% than our original options from the beginning of the year. On average, customers who order Custom Upholstery products spend twice as much on their order than other customers. Our Custom Upholstery page is also more performant now and loads faster than a few of our key competitors in the same space.
There are always performance improvements to be made, and we are currently working on pushing even more consistency of our custom images throughout the checkout funnel. With our initial MVP out the door, we were able to get data on how customers interact with the feature, and make both big and small iterative improvements on the feature to serve as wide of a customer base as possible.
Today, we have only unlocked this feature on one small subset of couches – we are looking at extending to couches that change in a different, yet significant way (e.g. sectional couches that change orientation, left or right facing), and extending to different categories of products that could use this level of customization. There are so many possibilities in the customization world, and we have only begun to unlock them all.
