Background

When shopping online for home categories like Mattresses & Vanities, customers tend to be less concerned with how a product may visually appear and more concerned with how a product’s features suit their needs.

We saw from previous qualitative and quantitative testing that these categories benefit from a “list view” browsing experience v.s. our standard grid view. Due largely in part to list view has product features shown, while grid does not. This treatment is fairly standard across most comparable e-retailers but we believed this treatment could be improved. We wanted to get learnings about how presentation of this information affects users’ ability to evaluate between products, since we didn’t have a conventional compare tool in place (yet!).

Hypothesis

We believe that drawing more attention to product features for those customers browsing home categories like Mattresses & Vanities will make it easier to evaluate products. We’ll know this is true when bounce/exit decreases and purchase rate increases.

Results

When we tested the new experience we found bounce rate decreased by over 4%, exit rate decreased by 1% and purchase rate increased by +1.60% - translating in $47 million annualized incremental revenue.

deliverables

• Competitive Research

• Usability Testing (Remote, Unmoderated)

• Wireframes

• Visual Design

Platforms

• Web (Responsive)

• iOS (iPad Only)

Going in, some people on the team had initial assumptions about the best way to present these product features. With that in mind, I regrouped with the team to discuss the treatments they found most effective. To help support those assumptions, I conducted a AB Preference study on Usertesting.com.

Based off of our target demographic, I screened 5 users by the following criteria:

• Age: 35 - 65+ years old

• Household Income: $40K - $150K+

• Country: USA

The main goal of the study was to understand how users digested the information based on the different visual treatments.

Findings

• Most users were drawn to the product features within the row of "color blocks" than the bulleted list.

• Users didn't immediately understand what certain attributes meant which lead to hesitation. 

• In the cases where a mix of icons and text were used, users struggled to decipher the icons.

I ran another a remote, unmoderated usability study on Usertesting.com to explore how users would naturally find more information about product features they don’t understand and user’s expectations when they interact with the product attribute block.

Findings

• Overall, the study showed that users don’t intuitively want to interact with the ‘Color Blocks’ if they need more information.

• If they needed more information, they’d likely look to the attribute filters at the top of the page, click into the product itself or look elsewhere (i.e. Google).

• When prompted to look at the info within the blocks, users seemed to understand the attribute title but not consistently understand the attribute option. 

Based on 12 e-commerce competitors, I identified a handful of common conventions for how they display listings for product categories like Mattresses and Vanities. This provided a baseline for where we stand in the competitive landscape for these categories. Informing how large of a risk moving away from the typical conventions can be.

Before creating new content, we want to first take a look at the handful of attribute content types (i.e. Visual Filters, Filter Descriptions, VizCon etc.) we have today. We understand that some filter attributes are self explanatory naturally, therefore we won't need further context attributed to them.

I worked closely with my content strategist, Joe, on this audit.

I facilitated a cross functional design studio with Product Management, Design, Engineering and Site Merchandising to better understand the challenges associated with our customer problem. We sketched through a few rounds of ideation and refined along the way. At the end, we shared all our ideas and upvoted the strongest directions for further refinement.

Tech constraints

In the backend, the Mattress attributes are listed in bullet form as strings of text. The engineers had to create a special function that split the text from the semicolon.

Because of technical limitations, we cannot show the same top 4 attributes across each class. The result was that the code will look at the first product that is loaded on the page and use its first 4 attributes as the 4 attributes for comparison for the rest of the page. So in super-filtered pages with very specific products, the attributes for comparison are actually different than those on the main page.

Data attributes were fundamentally missing, leading to gaps in the comparison boxes

Test & Validate

Web Analytics

For customers who were shown the new experience, the following metrics were affected:

• Product purchase rate (CVR) increased by +1.60%

• Product view rate increased by +2.34%

• Page bounce rate decreased by -4.19%

• Page exit rate decreased by - 0.98%
  

All visitor types in the new experience saw a significant increase in CVR and a significant decrease in bounce rate. Most notably new and returning visitors had a better experience with the new design.

• For new visitors: CVR +3.39% , bounce rate -4.82%

• For returning visitors: CVR +3.20% , bounce rate -4.86%

Number of products viewed per session rose by +1.66%.

• Our hypothesis is that the experience encouraged customers to stay on site (evidenced by the decreasing for bounce and exit rate) and explore more products as they were able to easily scan more products.

Exit rate was significantly down by +3.93% on Tablet.

• Our hypothesis here is that the exit rate decreased more pronouncedly on Tablet as the screen size for Tablet is typically smaller, and the slimmer card will allow customers to scan more products without having to scroll too much.