Role

Conducted an end-to-end redesign process to help customers make their flooring product purchases efficiently.

Responsibility

Identified design opportunities; crafted design concepts; rapidly iterated through usability testing

Impact

Led to a 4%⬆ in conversion rate and 28%⬇ in customer support contacts

Team

UX lead worked with a Product Manager and 2 Software Engineers

OVERVIEW

Revamp a new flooring shopping experience for gym owners

Rogue Fitness aimed to reimagine the flooring shopping experience for gym owners. A longstanding product shouldn’t mean an outdated interface. I redesigned the Regupol roll flooring product page, streamlining customer navigation to select suitable flooring efficiently. Additionally, I crafted a scalable UX framework across multiple different flooring product pages to ensure a cohesive and consistent shopping experience.

BUSINESS BACKGROUND

Major usability issues and feature flaws resulted in customer dissatisfaction and degraded roll flooring shopping experience

Regupol roll flooring is a top-selling product at Rogue Fitness. In recent years, however, the customer service team has been overwhelmed with inquiries and complaints about product selection and shopping experience. In response, Rogue planned to relaunch the roll flooring product to provide an intuitive shopping experience, aiming to enhance customer satisfaction and make the customer service process more efficient.

CHALLENGE

How might we facilitate customer success in flooring purchases and establish a framework across various flooring products to provide a relatable experience?

With continuous enhancements to the Regupol roll flooring, the unchanged product page of a decade faces several usability issues, leading to a degraded shopping experience. How might we revitalize the flooring shopping experience that empowers customers to make optimal decisions, ensures successful purchases, and develops a unified UX framework across various flooring products for a consistent experience?

RESEARCH

Uncovering Major Usability Issues

With initial business insights and project goals, I conducted a UX audit on the current roll flooring product page and identified 4 main usability issues.

Key Findings

Non-Responsive Product Imagery

The media area failed to update in response to changes in product attribute selections within the purchase area.

Overloaded Attribute Swatches

Each swatch tried to display multiple attributes - thickness, color, and color percentage, leading to visual clutter.

Lack of Distinction between Main and Add-on Products

Main flooring options and add-ons/accessories were ambiguously grouped together under a single "Options" section, lacking clear separation.

Poorly Structured and Unclear Product Descriptions

Color and thickness options were disorganized, with confusing terminology and detailed information obscured under the Product Description tab.

Understanding customer goals and pain points

To gain deeper user insights, I collaborated with customer service to gather feedback on the roll flooring shopping experience. It turns out there are two main user groups: home gym owners and commercial gym owners. Using insights from 23 phone interviews and customer feedback, I created 2 personas representing their perspectives and pain points.

Main Pain Points

How do other online flooring retailers manage their product pages?

Then, I initiated market research, diving into 5 direct and indirect competitors to see how they set up their flooring product pages. Key takeaways from this analysis were:

1. Utilize color or text swatches UI for material thickness and color presentation

2. Incorporate a room size-based flooring calculator to estimate the required quantity

3. Integrate an accessories list in the purchase area

4. Transparent display of price per square foot, delivery time, and total price

5. Upload high-resolution and multiple angles images and videos in the media area

6. Highlight key features of the roll or tiles under the product description area

DESIGN OPPORTUNITY

Boosting discoverability and usability for efficient customer navigation

Based on my research insights, it pointed towards 4 design opportunities to help customers navigate to their ideal flooring more smoothly and efficiently.

1. Optimizing Product Attributes Display

2. Incorporating a Room Size-Based Flooring Calculator

3. Enhancing the readability of Product Information and specifications

4. Clarifying Presentation of Accessories and Add-on Items

IDEATION

Organize and lay out key page features

Before starting the design of the mock-ups, I collaborated with the product manager to define and solidify the high-level structure of all key features required for the product page.

Subsequently, I crafted low-fidelity wireframes and initiated discussions with stakeholders to ensure the design aligned with business goals.

DESIGN AND ITERATIONS

Refine final designs through an iterative process

Informed by 4 rounds of design reviews and 2 rounds of internal usability testing involving cross-functional teams, I went through many explorations and iterations to fine-tune the designs for Regupol Aktiv Roll flooring product page in response to feedback.

Final Roll Flooring Product Page

In the design refinement stage, the purchase area, major attention from stakeholders was directed toward the purchase area, especially in terms of the product attribute selection and roll quantity calculation processes.

The optimized user flow became:

A customer lands on the page → Selects the desired roll thickness → Chooses the roll color percentage → Picks the specific roll color → Calculates the number of rolls needed → Selects the calculated roll option → Chooses accessories if required → Adds the rolls and accessories to the cart

Iteration 1

Enhance Flexibility in Color Selection

Problem

How can I improve flexibility and visualization in the color selection process without limiting available options?

Solution

In the initial design, customers selected the mat color first, then the color percentages. However, internal testing showed that this sequence was limiting, making it harder to access the full color palette and visualize the final product. To fix this, I switched the process to the final design. Now, customers choose a color percentage, then color from the full palette. If they pick a color not in the selected percentage, it adjusts automatically. This change simplifies the process, offering better flexibility and less confusion.

Iteration 2

Refine Roll Quantity Calculation

Problem

How can I effectively present the calculated quantity of rolls required based on room size without adding confounding steps?

Solution

During our internal group interviews, I discovered that line items under the radio groups - which were intended to allow for quantity adjustment - were confusing. Users found them redundant and were uncertain about how many rolls they needed. Based on this, I refined a simplified approach of removing these line items and sticking to the radio groups only. This facilitates a faster and more straightforward way to determine the necessary quantity of rolls for purchase.

PROTOTYPE

Crafting an interactive prototype for usability testing and stakeholder reviews

I converted the high-fidelity mock-up of the roll flooring product page into an interactive prototype, setting the stage for usability testings and detailed presentations to stakeholders. Check out the final version here:

UX FRAMEWORK

Establish a scalable flooring product page framework

While crafting the design for the Regupol roll flooring product page, I aimed to create a scalable design solution that could be reused for other flooring products. Leveraging this framework, I successfully designed and launched the newly introduced Regupol tile products with minor adjustments.

Adapted Design 1

Regupol Roll Product Page → Regupol Interlocking Tile Product Page

1. Attribute Selection

In the design transition from roll to the interlocking tile product page, I maintained consistency in the use of text swatches for color percentages and color swatches for fleck color. Due to fewer colors available in interlocking tiles, I made minor adjustments by reducing some fleck color swatches.

2. Flooring Quantity

Considering the challenge of irregular home shapes needing varying amounts of center, border, and corner interlocking tiles. I bypassed the calculator and used the roll page's quantity stepper for tile selection, simplifying the purchase process.

Adapted Design 2

Regupol Roll Product Page → Regupol AktivPro(2x2) Tile Product Page

1. Attribute Selection

Given that the 2x2 tiles offer more color percentages, I kept the design consistent by adding more color percentage text swatches while maintaining the fleck color representation as in the roll page.

2. Flooring Quantity

Since 2x2 tiles only use a total square feet calculator, I adopted the square footage calculator from the roll page, eliminating the "Calculate Rolls by:" swatches and retaining the same steppers for add-ons/accessories.

RESULTS

Successful Launch of Both Roll and Tile Flooring Product Pages

The Regupol roll flooring product page was successfully launched on June 27th, 2023, followed by the launch of the Regupol tile flooring product page on July 18th. Early indicators suggest both products are performing well.

For the roll flooring product, our team has seen an increase in the conversion rate by 3% and a decrease in customer contacts rate by 28%. As for the newly introduced tile flooring product page, initial data reveals a bounce rate of 41% and a conversion rate of 3%.

NEXT STEPS

Continuous monitoring of mobile and tablet analytics

Continuously monitor the analytics data from current mobile and tablet devices and assess key user behaviors to ensure optimal responsiveness across various devices. Analyze this data to gather insights that guide further enhancements and adjustments.

Conduct A/B testing

I recently listed A/B Testing ideas and plan to compare performance metrics across different versions with e-com and data teams so that we can make data-driven decisions about which options work best.