From Browsing to Buying: A/B Testing Color Swatches on Category Pages
Background
Color swatches play a pivotal role in user decision-making for e-commerce platforms, especially in industries like fashion and retail where color choice significantly impacts purchase decisions. I tested color swatches to observe user interaction with these elements and assess how effectively they support decision-making. Key objectives included evaluating whether users could easily locate available color options and understanding their preferences when selecting swatches—whether they preferred immediate redirection to the product page or viewing the corresponding color within the current page. These insights aimed to refine the design and flow to better align with user needs and behaviors.
Research Plan
Methods & Tools
I chose unmoderated usability testing for this phase of research to gather insights from a broader, more diverse audience in a natural setting. This method allowed participants to interact with the product on their own time, providing authentic feedback without the presence of a moderator potentially influencing their behaviors or responses. By using unmoderated tests, I was able to collect a large volume of data quickly, giving a clearer picture of how users engage with the product in real-world scenarios. This approach was particularly effective in identifying usability issues that might not surface in more controlled environments, ensuring the design would perform well at scale.
The tools used for this process included utilizing UserZoom testing software. Participants were provided a desktop link to the control and the test environment, with 10 current and/or potential Hollister shoppers utilizing our demographic and screener criteria.
Control
Test
Script Example
(Randomized to eliminate any bias or order effects)
Imagine you are shopping for New Arrivals. Take a moment to browse the products.
Control:
What are your first impressions of the product information being displayed? What, if anything, do you wish was available?
Without clicking on a product, explain where you would look at available product colors.
How easy was this information to find?
(1-Extremely difficult 5-Extremely easy)
How clear do you find the product color information to be?
(1-Not at all clear to 5-Extremely clear)
What are your thoughts on how the colors are being displayed? Is this how you would expect to see it? Why or why not?
Now, select a product in the color of your choosing.
Is this what you expected to happen? Why or why not?
What, if anything, would you expect?
What, if anything, did you find helpful or useful? Not helpful or useful?
Test:
What are your first impressions of the product information being displayed? What, if anything, do you wish was available?
Without clicking on a product, explain where you would look at available product colors.
How easy was this information to find?
(1-Extremely difficult 5-Extremely easy)
How clear do you find the product color information to be?
(1-Not at all clear to 5-Extremely clear)
What are your thoughts on how the colors are being displayed? Is this how you would expect to see it? Why or why not?
Now, select a product in the color of your choosing from the available color icons.
Is this what you expected to happen? Why or why not?
What, if anything, would you expect?
What, if anything, did you find helpful or useful? Not helpful or useful?
Process & Findings
Process
Take notes while watching recordings
I will take notes while watching recordings, highlighting important themes or participant quotes, as well as relevant non-verbal cues, like pauses or emotional tones.
Familiarize myself with the Data
Before diving into analysis, I read through the transcripts a few times to get a sense of the general flow and main ideas.
Initial Coding
Now I’ll go through my notes and mark anything that stands out. The goal here is to capture key points without worrying too much about categorizing them yet.
Group Themes
After initial coding, I’ll start grouping similar themes together. For example, themes related to frustrations, motivations, or pain points can be grouped into broader categories.
I’ll use the participants’ own words, highlighting quotes or phrases related to themes.
Identify Findings
Next, I’ll define themes clearly to ensure they are well-defined and distinct, providing clear explanations of what each theme represents and how it relates to the user experience.
I will also reference Baymard Institute if there are relevant guidelines and findings from their research.
Actionable Insights
Finally, I use the themes to tell a cohesive story about the users’ experiences, and present them in a way that stakeholders can easily understand.
I’ll also ensure the themes lead to actionable insights that can guide design improvements, helping to solve user pain points or enhance positive experiences.
Sample of Findings
It is recommended to display color swatches on grid pages, as all participants preferred the color swatches experience, feeling it was easier to locate and made it quicker to browse color options.
Relevant User Quotes
“I was expecting to hover over the colors. I would be shown the different colors and what is available. I guess I would click colors but I'm afraid it will take me to the next page. Yeah it does that, so yeah this is not what I was expecting. This is disappointing, I would like to see color options just by hovering over it and if I want to click I don't want to view this page I just want to see the color options so this is disappointing.”
It is recommended to allow users to select color swatches on grid without being redirected to the product page, as all participants expected that upon selecting a color swatch the image would display the corresponding color without redirecting them to the product page.
Relevant User Quotes
“The less clicking I have to do the quicker I can get my shopping done. I really like being able to see all the colors on display, at least the first 6 and then you just have to hover. I don't know, you can't click it, if you click it takes you to the full display. But you can hover. I would definitely just kind of hover over it. This is the most convenient way. I can decide here which one I want before even clicking on it. It's very convenient. Sometimes I wish I could click and have it stay on that color. But when I click it takes me to the full product display. it would be nice to just select a color like that.”
Baymard Recommendations
Referencing Baymard guidelines in my work as a UX researcher strengthens both my professional credibility and the value I bring to stakeholders. These guidelines are rooted in comprehensive, data-driven research on user behavior across e-commerce platforms, ensuring that my design recommendations are grounded in proven best practices. By applying these well-established standards, I can communicate more effectively with stakeholders, offering them a clear, research-backed rationale for design decisions. This not only fosters trust and alignment but also promotes informed, evidence-based discussions, helping to drive better product outcomes and continuous optimization across the design process.
Recommendation 1:
Always Have Thumbnails for All Items in Product Lists And Search Results
Issue:
Users generally dismiss products that they can’t properly judge by scanning items in product lists and search results
Missing thumbnails can reduce user trust in the site
Advice:
Always provide thumbnails for all items in product lists and search results
Creative representations can be used for products without obvious visuals, avoiding blank spaces or placeholder images
Recommendation 2:
Adjust Thumbnails to Reflect Applied “Color” Filters
Issue:
Users rely heavily on thumbnails to decide whether to visit a product page
If thumbnails don’t reflect a color preference specified by an applied filter, users may ignore potentially suitable products
Advice:
Change thumbnails to match colors specified in filter choices
Matching thumbnails to the chosen color in filters confirms item availability and allows for accurate item comparison
Doing so is a convention that users have come to rely on
Additionally, it’s critical to also implement product variations as single list items to appropriately adjust thumbnails to the color variations filtered for
Impact & Outcome
By effectively communicating research insights and collaborating closely with my squad and key stakeholders, we identified the need for improved color swatch functionality. This led to the decision to incorporate color swatches into the product grid. The change provided users with a more intuitive way to view available color options, enhancing their overall shopping experience. As a result, this update contributed to an increase in $* million (confidential information redacted) in operational margin, reflecting higher engagement and conversion rates, validating the value of user-centric design improvements for both the business and the customer.