Visual Recommendations

Providing customers with product recommendations based on their visual preferences

Visual recommendations is a way for customers to refine product recommendations to be more relevant based on the specific features of a product that they are interested in.

I worked with the Visual Machine Learning and Product Recommendations teams during this process.

MY ROLE

Lead designer through end-to-end process - consisting of ideation, UX design, user testing, delivery

MY TEAM

Product manager
Developers and machine learning engineers
Creative designer
UX researcher

Problem

As one of the retail giants in the nation, Macy's carries a sizeable number of products in its online inventory. With such a wide range of products, a long-existing pain point for customers has been how overwhelming it can be to try and locate a product that fits their wants and needs.

On top of that, one of Macy's initiatives in 2019 was to expand the number of products that they carry in their online inventory, specifically with products shipped directly from other brands and vendors. With the product selection set to grow over the year, the problem of customers finding it difficult to find products looked to become more pronounced.

How can we help customers find relevant products based on their preferences more efficiently?

The Concept

Our team's goal was to create a solution around how we could open up the specificity of products' visual features to customers so that they could refine recommendations based on what they were looking for. We created two principles that the product should follow:

1. Simplicity

For customers to provide feedback about what they were looking for, the solution would have to be non-disruptive and easy to understand. It was necessary to avoid creating an experience with too many interactions.

2.  Reflection in User Engagement

For customers to stay immersed in the experience, recommendations would need to reflect their feedback.

I created a product discovery user flow to see where a feature that assists customers in finding a product based on their preferences would be valuable.

We considered two pages as opportunities for integrating this feature into product recommendations:

• Product Detail Page
  Customers on this page have already expressed interest in a product. Oftentimes, they use recommendations to discover similar items based on that initial product.
  
  

• 'More Like This' Similar Items Page
  

  Customers navigate to this page with the intention of browsing similar items based on an anchor product. Providing the option to refine these recommendations fit naturally in the mental model.

Because the 'More Like This' page needed foundational work to create a back-end infrastructure for the feature, we decided to build and test the MVP on the Product Detail Page.

The existing product detail page preceding the feature.

The existing More Like This link and results page preceding the feature.

Design Explorations

As a team, we explored three initial ideas regarding how customers can refine product recommendations based on their preferences. I ended up exploring option 3 further, in which customers can select the product features that they liked in relation to the product they were looking at, via chips.

We were hesitant on the direction of the other two concepts -- Option 1 required too much thinking from the customer, and Option 2's use of icons may have been difficult to understand across all of the various product types that Macy's carries, not to mention their scalability.

User Research

I worked with our UX researcher to conduct several studies on the usability of the design. We tested variations of the chips pattern and the messaging to the user in the context of the product detail page. From the studies, we drew out two key insights:

1. Having all of the attribute chips unselected by default was the most understandable.

2. Users described the feature as 'filters' to see similar items.  

Default Selection State of Chips

Customer Understanding of Copy

Final Design

I incorporated the feedback from user research into creating the final designs. During this process, I worked with my creative partner to define the states of the chip component.

For the first phase of this MVP, we decided to set the default state of the chips as a combination of selected and unselected, as our merchant partners gave their insight that customers pay attention to different facets depending on what type of item they're shopping for (e.g. style is a bigger factor than color for dresses).

Outcome

The Visual Facets feature was launched in July 2019 - we tested the feature across several product types and saw a significant lift in our KPI's. Based on these results, we scaled the feature across women's boots, women's coats, handbags, and watches.

Next Steps

We plan to scale this feature across more product categories, revisit the styling and default state of the chips, and expand on the experience on the 'More Like This' page.

Takeaways

This was a fun and collaborative, yet challenging project to work on. It involved working with multiple stakeholders with a level of increased emphasis on engineering than in previous projects due to the translation of machine learning into the user experience. In addition to that, there was a need to hone in on the visual and content details. From the process, I had a few takeaways: 

Bring research into the fold early in the process

Because of the technical complexity of this project and the constant algorithm changes, having research there through that process would have increased clarity as well as provided the space for research to offer insights early on or initiate studies.

Collaborate closely with engineering

Because the crux of the feature's recommendations relied on the algorithms, design and engineering had a close relationship. What appeared to be the best customer experience factored into the algorithm design and vice versa.

Know when to use the strength of research and data to drive decisions

The complex nature of this project naturally resulted in differing viewpoints - the key turning points came when we had user feedback to validate hypotheses, and bring everyone on the same page.