WAYFAIR WEB CLIPPER
A chrome extension built to help interior designers source items and manage projects.
USER NEED
Interior Designers are some of Wayfair’s most loyal customers. Not only do they source products on our site, they also rely on our Lists feature to save and share items with their clients.
However, most interior designers don’t buy exclusively from Wayfair. Knowing this, our team decided to build a tool that would allow users to save any product, from any site they’re shopping on, directly to Wayfair.
In addition, we wanted to leverage our Visual Search algorithm to provide designers with similar options that they can buy on Wayfair, using their professional membership discount.
Finally, we knew we needed to design a tool that could integrate seamlessly with Wayfair's forthcoming project management software for Interior Designers, Arlow Studios.
COMPETITIVE AUDIT
I performed a heuristic analysis of seven direct and indirect competitors, in order to get a sense of commonalities between feature sets and get a feel for the tools interior designers are currently using.
From the competitive audit, I discovered that the best clipper tools were able to scrape the page for information, and automatically pull in attributes like name, brand and price. This saves interior designers a lot of manual data entry, especially on popular sites like West Elm and Pottery Barn, where price is buried down the page
I also learned that most tools provide a number of additional information entry fields to suit interior designer’s needs. These fields can be used for things like dimensions, weight, shipping information, or custom notes. I reviewed these field ideas at length with interior designers, to make sure that we were allowing them to capture the information that’s actually most important to them.
Finally, during the audit, I noticed that some clippers overlaid the page in a way that made it difficult for users to view the information that they were trying to collect. To fix this, I wanted to make sure that the clipper would be responsive with the page it opened on, and push content over rather than overlay the page.
DESIGN
Using our competitive heuristic as a starting point, I launched into several rounds of design, testing and redesign. At every stage, my team and I tested our work with real interior designers. View the final product in action below:
This was the first chrome extension that Wayfair had ever built, and it proved to be a very challenging project for our development team. CSS conflicts with the sites it interacted with, positioning the “Save” button in the correct part of the image, and technical difficulties around scraping data (we’re still working on that part) led to a fair bit of carryover. However, thanks to the hard work and a lot of code research, my team was able to launch a working MVP.
TESTING & REDESIGN
Because this was Wayfair’s first-ever Chrome Extension, we knew we had to provide a fully polished, easy to learn, and simple to use product. To ensure usability, I partnered with Sam Schwamm on our User Research team. Together, we wrote and executed five live moderated user testing sessions with interior designers from around the country.
We asked our users to run through their first time using the tool- from downloading the extension to clipping their first product. And, as with all good usability tests, we uncovered some exciting and surprising things.
This user testing session provided three key areas to work on: improve user on-boarding to make first use a breeze, improve usability by playing into existing use patterns, and improve error messaging, so that when problems do arise, they're easy to fix.
In response to user testing, we developed a post-download page, that the user is redirected to after downloading the extension. This page gives a quick overview of how the tool can be used, and provides images for the user to try clipping. We are also constantly updating our "Frequently Asked Questions" section as more questions come in.
We also took a second look at our empty states and error states. We realized that the empty state, when no photo had been added yet, would be a great place to remind users how to save an item, so we added a line of copy with quick instructions.
Finally, we took time to clarify required fields. Because the save button is sticky to the bottom of the drawer, there are cases where a user who failed to enter required fields, might be scrolled down the page when they try to save an item. In this case, we decided to auto-scroll the user to the required section, and highlight that section in red.