Get Inspiration from our recommendation - Product Design

Product Design
Macy's Inc.
3 Months - 2019
Retail E-commerce
Adobe XD, Figma

Make it easier for customers to encorage to purchase one or more complementary products. Customers can add additional products right to their cart along with the base product.

As a UX designer, My role in this project is by analyzing users' behavior, goals, motivations, and need. Research leads to understanding the problems and identifying solutions. It allows improving and figures out how to engage users to change their consumption habits. Collaborating with Product Manager, Designers and Developers to create intuitive, user-friendly software.

Design Process

Business Goal

This recommendation has one main goal: Increase average order value. 'Frequently Bought Together' suggestions aim to up-sell and cross-sell customers by providing product suggestions based on the items in their shopping cart or below products they're currently looking at on-site.

The merchant controls which products include this feature, and Which Products are available. We decided to exclude the collection, Big Ticket such as furniture, and apperal.

Product Goal

I dentify with a high degree of confidence products that are frequently bought together

  • Exclude matches with low support level/purchase frequency
  • Only one set of related products will be shown

Only provide recommendations for a related product(s) when we have a high degree of confidence in the match

  • Goal is to instill confidence in customers that these items are truly frequently bought together and not that Macy's is 'pushing' an additional product

Customers should be provide with a streamlinked UX that allows them to quickly and easily add the related item

  • The frequently bought together recommendations should not detract from a customer purchasing the original product
  • The frequently bought related item should not be a replacement for the original product

Cross selling is considered to be aggressive sales behavior and in most cases customers find it irritating and annoying In the long run this technique can alienate the customers. Therefore, for sustained positive user experience, a user centric approach rather than a company centric approach must be followed when it comes to cross- selling and up selling.


As a customer, I want to know when two(or more) products are frequently bought togeteher so that I can easily buy both.
I like the recommendation, but I think they have different options such as color or size, how can I find them? what's the algorithm of recommendation?

Target Audience

Our target audience ir customers who are both uilitarian and lesiure shoppers. With its core target group of middle-class women between the ages of 16 and 34, Macy’s quality products at reasonable prices attract a clientele of largely busy people – either engaged at work or out enjoying the social scenes with friends.


Current Design

Show only one product 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 albe to select or change the options
  • Based on algorithm, Macy's suggests default option.

2020 Macy's Discoverly / Selection team meeting

Can we apply the Pick up and Pick up filter?

  • Have a rought line item to look at carrying facets and session signals across shopping funnel. - will discuss

Do we include the Big ticket on Frequently bought together - (e.g mattress, furniture)

  • Currently, Big ticket should be excluded because it needs a zip code lookup for availability check.

Will include services/Insurance (e.g AppleCare, WNM)

  • Will these be featured on Product Detail Page in 2020?

Research Questions

Which "frequently bought together" items design best matches customers mental models?


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 which you don't know much information
  • If there is different color, but we are suggesting based on what people bought, what would you do?

What do customers expect to see recommendation product?
Do customers expect to change the option depending on the product?
If customers like the recommendation, how would you do?
If customers don't like the recommendation, how would you do?
Do customers want to see the recommendation product's detail? if yes, do they want to see whole information?
How many customers know there is the frequently bought together feature?
What do customers think about 'frequently bought together' copy?
Do customers consider to add in wishlist?

Concept - User Testing - UX Feedback & UI Change


  • We believe that customers want to know when there are accessories/related items that are frequently bought together with a product.
  • If we provide a streamlined way for customers to add both items to their cart
  • Then customers will be more inlcined to purchase both the original and related product
  • Resulting in increased AOV(average order value), product/order ATB(add to bag) conversation, ATB's visitor & purchase conversion.

Design Explorations

Expanding multi UPC Level (Options)

  • If there are different Color or Size Options, how are we going to present?

Including "Gift With Purchase" and "Purchase With Purchase"

  • Do customers want to see the photo of gift?
  • Do customers want to view the detail about the promotion?

Rapid Testing - Learning

Gift with Purchase

  • 5/5 customers prefer to see the image of the gift
  • Customers also want to see if there is different option for gift. Current website, free gift is automatically added in your bag, therefore customers can change the option in their bag
  • Customers click the photo or text to view more detail

UI Design

  • Customers barely catch the function of three dots (view more information)
  • Customers acknowledge the function of carousel to check out the product's full description
  • Buy Together sounds cheaper : Macy's currently doesn't provide bundle sale. If both items are eligible for promotions, how could we show?

User Flow

  • 5/5 Customers check out the product detail as their next step
  • 0/5 Customers try or attemp to change the different options
  • Customers want to view simple description(Need to bring back - quick view?)
  • If customers don't have information of the recommendation item, customers want to see the rate of how many people already bought together
  • Add to bag button with total price makes customers confused

Rapid Testing - Synthesis


This is not how I buy make-up products

The Student

This doesn't tell me anything about promocode detail!

Account - The housewife

Red text looks cheap! Buy two and get discount?

University student - The Student

I want to see the detail even it has long desription

University student - The Student

Feasible Design Update

Minimize vertical height (particularly for mobile - perhaps a collapsed vs expanded state?) while also allowing customer to see multi UPC lever info if they're interested?

Can we make alternate state CTA(Call to Action) option or change copy from buy both to buy anchor and view recommendation product?

  • Giving several options on product detail page may causes customers to lost their shopping journey.

UX Solution


Customers not only easy to catch the information, but also they can see the exact photo of product which they would get when they make a purchase


If current Macy' is not providing live update, having sub-title as color or size could possibly make customers to get confused. -Consider the live update feature based on customers' selection for the next iterations

Select vs Deselect

In order to make a difference between selected and deselected checkbox for customers, I would recommend to have different opacity or remove deselected item.

Based on rapid testing - Ideation

The Design

Recommendation panel on Product Detail Page

Frequently Bought Together panel on the single product page, I wanted to make sure to recommend the product which can give consideration to customers without losing their shopping journey. Also, I minimized the height for mobile web.

Desigining a mobile-first apporach, designing pages for smaller screen first (focusing on the really important features and simple solutions) usually comes easier.

What I designed

Feasible Design

Single UPC -> Multi UPC

Macy's currently has 'frequently bought together'panel on product detail page. by expanding to the multi upc, we'll provide the upc level on cross-selling panel

Call to Action

Clear Button

To prevent any confusion for customers about price and amount of selected products, I designed the button with seperate price text

Check Box

selected / unselected

By having different opacity between selected and deselected product, customers can easily define the product they want to get

This item

Currently viewing item

By having this item tag, customers know the item they are currently viewing

What I've learned

I loved creating this product, especially for mobile, since I found it more challenging - mainly becase of the small screen size, I needed to figure out what is the most important feature in this product. Also working with engineer team, product manager and merchandise team, I realized again how important the communication is.

Unfortually, the product couldn't go to the product review, I really enjoyed the change to work on Macy' tech company with some truly amazing people! Having real experience by working and learning close with different team was great opportuinity for getting to know a lot about both the fashion industry and e-commerce UX. THANK YOU!