From Browsing to Buying: A/B Testing Color Swatches on Category Pages

Background

Role: Lead UX Researcher

Timeframe: 2 months

Team: Product Manager, Designer, Developers

Overview:
Color swatches are a critical feature on e-commerce platforms, particularly in retail where color is a major driver of purchase decisions. These small but significant interface elements allow users to explore product variations and influence their buying confidence. This research focused on testing how users interact with color swatches, aiming to identify usability challenges and preferences. By understanding user behaviors, the goal was to refine the design of color swatches to better support decision-making and enhance the overall shopping experience.

Problem Statement:
Users often face challenges when interacting with color swatches on e-commerce platforms, potentially leading to frustration or abandoned purchases. Key issues include difficulty locating available color options and a lack of clarity in how swatches behave when selected. Additionally, it is unclear whether users prefer immediate redirection to a product page upon selecting a swatch or staying on the current page to view the selected color. Without addressing these usability concerns, e-commerce platforms risk undermining the user's decision-making process and overall satisfaction.

Research Objectives:

1. Evaluate how easily users can locate and identify available color options in a product listing.

2. Understand user preferences regarding interaction with color swatches, including whether they favor immediate redirection to a product page or viewing the selected color within the current page.

3. Identify pain points in the design and usability of color swatches that hinder decision-making.

4. Provide actionable recommendations for improving the design and flow of color swatches to align with user expectations and behaviors.

Effective Stakeholder Communication & Research Process

1. Research Request & Alignment

The research process begins when I receive a request from a stakeholder, often a Product Manager (PM), Designer, or other key collaborator. Instead of immediately drafting a test plan, I first set up a meeting with the PM to align on the core business problem driving the request. This discussion helps uncover the "why" behind the research, ensuring that we are solving a real user problem rather than just validating an assumption. By digging deeper, I often refine the request to better address the user’s needs while also aligning with business objectives.

Key questions I ask during this phase:

• What assumptions exist about the problem?

• Who are the users in this project?

• How does this project align with company/business goals?

• What research / knowledge do you already possess on this topic?

• What are the success metrics or key outcomes?

• Are there any known constraints or business considerations?

This collaborative discussion allows me to move forward with clarity, ensuring that the research effort is both impactful and aligned with business goals.

2. Determining Methodology & Developing the Test Plan

Once the research objectives are clear, I draft a test plan that outlines the methodology, participant criteria, and research script. I meet with relevant stakeholders—including PMs, Designers, and sometimes Engineers—to review the test plan and determine whether the chosen approach is the best fit for the problem.

In this stage, I consider:

• Methodology selection: Does this require qualitative insights (e.g., moderated usability tests, interviews) or quantitative validation (e.g., surveys, A/B testing)?

• Script refinement: Are the questions structured to avoid bias and extract meaningful insights?

• Participant criteria: Are we targeting the right users for the study?

By involving stakeholders early in the test plan review, I ensure buy-in from the team, reducing the risk of misalignment later on. This collaborative approach also helps teams feel more invested in the research process.

3. Research Execution & Delivering Actionable Insights

Once the study is completed, I synthesize the findings into clear, actionable insights. Rather than delivering a one-size-fits-all report, I tailor my deliverables based on stakeholder needs.

I provide insights in one of the following formats:

• Detailed reports for teams that prefer in-depth documentation.

• Concise decks with high-level takeaways for leadership or fast-moving teams.

• Live walkthroughs or workshops to engage teams and facilitate discussion.

In my final share-out, I go beyond just presenting findings—I tie insights back to business goals, offering clear recommendations that help drive decision-making. Additionally, I ensure that leadership is aligned by summarizing key insights in executive-friendly formats, highlighting critical impact areas.

By structuring my research process in this way, I ensure that my work not only provides valuable user insights but also directly informs strategic business decisions.

Research Plan

Methods & Tools

For this phase of research, I selected unmoderated usability testing to gather insights from a broader, more diverse audience in a natural setting. This method allowed participants to interact with the product at their own convenience, ensuring authentic feedback without potential moderator influence. The approach enabled the collection of a high volume of data quickly, providing a comprehensive understanding of how users engage with the product in real-world scenarios.

Unmoderated testing proved particularly effective for uncovering usability challenges that might not surface in controlled environments, ensuring the design could scale successfully.

To facilitate this research, I utilized UserZoom testing software, providing participants with desktop links to both the control and test environments. The study included 10 current or potential Hollister shoppers who were carefully selected based on demographic and screener criteria.

Control and Test Setup

Control Group Tasks

Participants were asked to:

• Browse the New Arrivals section and share their first impressions of the displayed product information.

• Locate available product colors without clicking on a product and evaluate the clarity and accessibility of the information.

• Select a product in their chosen color and describe whether the interaction met their expectations.

Test Group Tasks

The test group received similar instructions but interacted with an updated design that featured color swatches on the product grid. Participants provided feedback on:

• The usability and clarity of the new color swatch feature.

• Their expectations when selecting a color swatch and whether the design aligned with their mental model.

• Additional functionality they found helpful or areas where they encountered confusion.

To eliminate potential bias, tasks were randomized for both groups.

Script Example

Imagine you are shopping for New Arrivals. Take a moment to browse the products.

• Participants were guided through tasks with prompts like:

  • "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 to find available product colors. How easy was this information to find? (1-Extremely difficult, 5-Extremely easy)."

  • "After selecting a color swatch, is this what you expected to happen? Why or why not?"

  • What, if anything, did you find helpful or useful? Not helpful or useful?

Process & Findings

Process

1. Observing Recordings
   I reviewed participant sessions, taking detailed notes to highlight key themes, participant quotes, and non-verbal cues like pauses or tones of frustration.

2. Data Familiarization
   Transcripts and notes were reviewed multiple times to identify patterns and gain a thorough understanding of participant behaviors.

3. Initial Coding
   Key points from the data were marked for significance, focusing on recurring pain points, motivations, and feedback.

4. Thematic Grouping
   Related themes were grouped into broader categories such as frustrations, usability gaps, and feature preferences, with direct quotes to support findings.

5. Actionable Insights
   Final themes were refined and presented to stakeholders in a way that highlighted user pain points, unmet needs, and opportunities for improvement. Baymard Institute guidelines were referenced where applicable to validate recommendations.

Sample Findings

Key Insight 1: Display Color Swatches on Grid Pages

Participants overwhelmingly preferred color swatches on grid pages, finding them more intuitive and quicker for browsing.

User Quote:
"I really like being able to see all the colors on display. It’s convenient to hover over the options and decide which one I want before clicking. I wish I could select the color without being redirected to the product page."

Key Insight 2: Allow Color Selection Without Redirecting to Product Pages

Participants expected to select a color swatch and see the corresponding image update on the grid without being taken to a different page.

User Quote:
"The less clicking I have to do, the faster I can shop. If I could just select a color and see the update without leaving the grid, that would save so much time."

Baymard Recommendations Applied

• Thumbnail Accuracy: Ensure product thumbnails reflect the selected color to build trust and facilitate comparison.

• Interactive Color Swatches: Enable users to interact with swatches directly on the grid to streamline their experience and reduce friction.

Impact & Outcome

This case study demonstrates the value of user-centered research in driving business outcomes while enhancing the customer experience.

By effectively communicating research findings and collaborating with cross-functional teams, we implemented color swatches on the product grid. This enhancement provided users with a more intuitive way to browse and select color options.

The changes directly resulted in: