Frequently Bought Together

Overall, by providing Frequently bought together's panel on the product detail page, the revenue increases over $110,000 and product view & click engagements total increase over 5%.

.

Client Macy’s

Year 2019

Type UX, Interaction

Overview

Make it easier for customers to encourage purchasing one or more complementary products. Customers can add additional products into their cart along with the base product.

Role

As a designer, I was charged with the task to expand our legacy frequently bought together feature from product detail page. By working closely with cross-functional teams, I was tasked to redesign the old feature, catching up to new standards, redesign visuals.

macy-sj.png
 
 

The Challenge

 
 
 
 

The first version of the design was created based on business requirements which customer can view this panel on product that only has one option. The product was then improved by adding and changing new functionalities.

Customers are not able to see the cross-selling recommendation if the product has multiple options. It made this product complicated and hard to use. as a result, the tasks performed by users became time consuming and unnecessarily prolonged by clicking back and forward.

 
 
 

Solution

 
 

Applying an evidence-based methodology that involves users throughout design process in order to design a solution that is easier to understand and get cross selling recommendation without disturbing shopping journey.

 
 
 
fbt-wb (1).png

Understand the Business Goals

The first step is to understand which metrics will have the most impact on the bottom line of the business

Gather knowledge from your business stakeholders:

  • What are the most important metrics for the business/product?

  • What are the business values of the new product/feature?

 
 

Current Design

    Show only one recommendation
      Excluding Gift with purchase and purchase with purchase (The product is eligible for getting a discount with purchase)
    Show products with only one UPC (Universal Product Code / Options)
      Customers are not able to select or change the options. Based on the algorithm, Macy's suggests the default option.

fbt-current.png
 

Target Audience

Macy’s target audiences are females aged between 30-50 and most of them are fashionable spender and trendsetters.

Market-study-2.jpg
 
 
 
fbt-wb2 (1).png
 

Quick sketch wireframe based on discussion with team

  • How can we present the item’s option information?

  • What if the item has two different options ( Color, Size) ?

  • What if customer wants to change the different option?

  • What if the item doesn’t have different option?

 
theme1.png
theme2.png
gwp.png
 

Testing Results

 

Which "frequently bought together" item design best matches a customer’s mental models?

Senario: You are looking for [X item] and while reading the product's description, you found 'frequently bought together' section.

  • What would you do when you see the recommendation where you don't know much information?
  • If there is different color, but we are suggesting based on what people bought, what would you do?

    •  

    Product Detail Page

  • Customers want to see the simple product detail.
  • Customers recognize the color is 'Red'.
  • Customers click the photo of recommendation, text, chevron to see the product detail.

    • Change the recommendation's option

  • Customers want to see the simple description before changing the product's option.
  • Customers want to get the recommendation if our recommendation is the same brand or has an algorithm.
  • Customers who know the product can simply click the add to bag button. If not, they will want to see the details.

    • The method to present the gift

  • Customers want to see the exact photo of the gifts.
  • If there are more than one gift option, they will not be able to check different options.
  • What if customers don't want to add the gift?

    •  
    fbt-cl.png
    Screen Shot 2020-05-12 at 4.08.00 PM.png
    fbt-cl.png
    fbt-wb2.png
    fbt-2nd.png
    fbt-wb.png

    Iterations

     

    Throughout the iteration, I tried how can I design that customers are not losing their shopping journey.they have to scroll down to check the currently viewing product information. Customers said the panel’s positioning is confused. I tried to minimize the panel’s height by using the collapse, and based on customers feedback which they want to see the description, I tried to show the simple description by using drawer element. 

    Throughout the redesign, we took a strategic approach towards ensuring that our design solutions were more inclusive than our competitors while staying aligned with the information our customers were expecting from the Macy's frequently bought together.

     

    Interaction explorations

    e-1
    F1 – 22.png
    Amazon-Killer – 17.png
    PDP Template - Basic - Mobile – 84.png
    PDP Template - Basic - Mobile – 85.png
    iPhone X-XS – 48.png
     
     
    Artboard – 3.png

    Next Steps

    The product couldn't go to the product review yet it's still discovery stage! In the meantime, the next steps should be to conduct more usability testing to improve the concept and design. Also, collaborate with developers in implementing designs and other teams for building cohesive design.

    Add more user-friendly, and user-centered design for the best shopping journey!