Communicating out of stock items
I was the design lead on this project but received really helpful feedback from peers along the way. I collaborated with my Product Manager, and 1 Content Strategist on this project.
This project lasted for 2 Sprints which was 4 weeks. Due to the nature of the feature, there was a lot of alignment required to move forward. I had to loop in about a lot of designers as I was piloting this test, and it is to be adopted by other teams in the coming sprints.
Picture this
Similarly, due to the number of items Wayfair has in its inventory, they do not, as of now, have any way to hide out of stock items and these items will show up in product recommendations as you see in this example, we are recommending a product but it is Out of Stock. This is a large customer problem, and gives you a 10,000 feet view of the context. Since this is an algorithmic issue, we can not solve it quickly.
Discovery
This is what I consider one of the most important phases because during this time I go from knowing nothing about my users to learning all about their needs, contexts, and requirements. So firstly, what I did was to align with stakeholders that is my PM, this alignment involved defining the project timeline based on my bandwidth and defining success metrics for the Analytics team.
Research
Based on old research insights, I looked at competitors that were specifically mentioned by users during touchpoint interviews. We estimated about 4 weeks for this project. It was considered a low effort high-impact project, so with that, there were bandwidth constraints, and the design ask wasn’t big enough to warrant a research study. So, with that in mind, I still wanted to understand user’s problems and complaints about our experience. I went back to tons of old research that have been conducted, and I was really able to learn a lot about what users struggle with when they shop on Wayfair.
Ideation
With all my research and common themes noted from experiences, I wanted to test out a text treatment for Out of Stock. But that wasn’t the only thing I considered. I decided to particularly start mocking up some text treatments because:
The Flag in example 1 above the image, is to be used by the Sales team only, so I could not use that design. Moreover, users complained it was easy to miss.
The badges (example 2) have multiple purposes on the website, so it could get overwhelming for users to see so many indicators on one product card
Roadblocks and Pivots
ASSUMPTIONS
A lot of the feedback I got was that the text treatment although solves the visual clutter, might be too subtle. I assumed that similar to some of our competitors we can apply the text to call out of Out of Stock. But I realized that Wayfair’s website in general is not as clean as others because it essentially is a place people come to for cheap deals on good quality products. Some of the competitors I looked at served a high-end market, and might not need to show so much information as the users care more about style than the price. So that was some really helpful feedback that I got very early on.
LOCALIZATION
Another interesting insight was to consider the german website. Wayfair has a strong presence in Germany and all our designs are supposed to be compatible with the german language. So some of my initial mocks as you can see when applied to the german site, were no longer viable since german words have longer character counts. Some of the mocks I made had to be discarded due to this inconsistency.
BALANCING BUSINESS AND USER NEEDS
Another consideration I needed to make after the first round of mockups, was balancing business and user needs. From a customer standpoint, introducing whitespace and reducing clutter seemed correct, but that meant reducing the number of products above the fold, and that reduces the opportunity to purchase products as they don’t appear on the screen unless you scroll.
Accessibility Guidelines
A final step in the process was making sure my design is accessible. To do this, I followed a checklist created by the accessibility team and incorporated all guidelines that apply to my design.
A quick example of that here, is ensuring that all touch targets on the mobile website are at least 48 by 48 pixels. The design on the left was not following that guideline for the checkbox, so I introduced some whitespace to make sure users don’t accidentally click on the image which would initiate an action they did not intend do.
Takeaways
ALIGNING WITH MULTIPLE STAKEHOLDERS
As mentioned earlier, since a lot of my work affected other workflows, it was crucial for me to constantly update stakeholders about my designs. There were multiple rounds of critiques both synchronous and asynchronous. And I found some really organized ways and tools to conduct design critiques which I will definitely be taking forward with me!
BALANCING BUSINESS AND USER NEEDS
As designers, we represent the users, but our stakeholders can bring in clear business perspectives. There are nuances that will help you strike the right balance between both needs and there will be trade-offs along the way, so as a designer, I have to prioritize that beforehand.