Problem
It’s hard to know when an item’s size or color is available when sizes are displayed as a dropdown. It frustrates users to click on a color selection and then check the dropdown for availability. How can we reduce frustration and increase usability?
Solution
Expose all options as buttons; this will allow users to see what’s available quickly. Replace color swatch options with actual product images to better show customers the different color way options.
Research
Using a prototype to test the feature's usability, we found that users liked to be able to see all the different product options at once. The only feedback we received was that the selected button state was a bit thin, and they recommended that it be increased for better visibility.
A/B/C Testing Results
We performed an A/B/C test showing current state vs showing sizes as buttons only vs showing sizes and images the colors. The size-only variation performed as well, but the winner of the test was the variation with both size and color having new selectors:
• Conversion: +1.67% at 90% SS
• User conversion: +1.53% at 90% SS
• RPS: +1.28% at 90% SS
• Add to Cart Rate: +4.77% at 99% SS
• User conversion: +1.53% at 90% SS
• RPS: +1.28% at 90% SS
• Add to Cart Rate: +4.77% at 99% SS
