Selection Error Improvement

Problem

UX research revealed that 5.7% of users encounter a size selection error when adding a product to their cart, often overlooking the error message and mistakenly believing the item was added or that the Add to Cart button isn’t working

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 analyzed competitor error experiences to identify familiar design patterns and used those insights to explore placement, color, and style in my initial 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 recommended placing the error message near the ATC button, where users are already focused, and where similar messages are commonly positioned on other retailers' product pages.

Any required selectors will be visually highlighted using a consistent error color, making them harder for users to miss.

The ATC button will remain disabled until the user makes the required selection(s) to add the item to the cart.

Initial Assessment

Implemented Fix

Selection Error Improvement

Making an error easier to understand

Say hi via li.kailey12@gmail.com or linkedIn!