UX research revealed that users frequently miss the size selection error message on the product description page after attempting to add an item to their cart without selecting a size. This leads users to think they’ve successfully added the product into cart when it wasn’t or think the Add to Cart button isn’t functioning.
5.7% of the users who add a product to cart encounter a size selection error. On average, visitors who experience errors have 4 errors per visit.
Opportunity
If the error experience is more visually apparent and contextual in placement, then we can better guide users to recognize the error, understand how to resolve it, and successfully complete the add-to-cart action.
Solution
I reviewed competitors to identify current error experiences and uncover design patterns that users are already familiar with. Building on these insights, I explored ideas around placement, color, and style to create a more intuitive experience. Below is the first round of design iterations:
With feedback from the UX team, I pulled the strongest elements from different concepts to create a final version we all felt confident about. It included the following features—and went on to win against the control in an A/B test. 🎉
Error Message Competitor Analysis Heat Map
Recommended placement based on competitor analysis
I suggested repositioning the error message near the ATC button since users are already focused on that area when adding to cart.
Additionally, this recommended placement aligns with the common positioning of error messages on other retailers' product description pages.
Any required selections, such as size, would be visually emphasized—especially on mobile, where the error message might be out of view.
The ATC button will remain disabled until the user makes the required selection(s) to add the item to the cart.
Outcome
This improved error experience launched in October 2023 🚀
