Get Inspiration from our recommendation (Excluded: Apperal, Big tickets, Collections)

Product Design
Primary Metrics
Secondary Metrics
ATB per visior, order
Retail E-commerce
UX Study

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%.


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. Expanding the frequently bought together panel from a single option to a product which provides multiple options. Excluding Collection, Big Tickets, and Apparel.

As a UX designer, working closely with a product manager, engineers, ux researchers and marketing teams, my role in this project is to create an intuitive, user-friendly shopping journey based on research and iterations.

Design Process

Frequently Bought Together



As a customer, I like the recommendation, but I think they have different options such as color or size, how can I find them? What is the recommended algorithm?

How are we going to present, If there are different Color or Size Options recommended.

Business Goal

Product Goal

Customers should be provided 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. Thus, for a sustained positive user experience, a user centric approach, rather than a company centric approach, should be followed when it comes to cross- selling and up-selling.


Target Audience

Our target audience are customers who are both utilitarian and leisure 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 largely consisting of 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 able to select or change the options.
  • Based on the algorithm, Macy's suggests the default option.


Based on research - Hypothesis

  • 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 inclined to purchase both the original and related product.
  • This results will increase AOV (average order value), product/order ATB (add to bag) conversation, ATB's visitor & purchase conversion.

Solution Questions? (Theme A / B)

Can we apply the Pick up and Pick up filter?

  • Have a rough line item to look at carrying facets and session signals across the 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 an availability check.

Will include services/Insurance (e.g AppleCare)

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

Gift with Purchase

  • How can we offer our gift to customers more effectively?

Concept - Sketch - Wireframe - Rapid Testing - Iterations


Design Sketch

Expanding multiple UPC Level (Options)

  • Currently, Frequently bought together only provides the product with one option. To increase the revenue, Macy's provides these panels with products that have multiple options.

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

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


Theme A
  • Do customers want to see a recommendation detail? If yes, which information do they want to see?
  • Where do they click to see the product detail page?
  • Do customers recognize the selected color text? If yes, do they understand there are different options?

Theme B
  • Do customers want to interact within this panel? If Yes, how do they want to interact?
  • Do customers recognize the selected color text? If yes, do they want to change the option?
  • Do they want to see the color options? Or do they want to check out the product description as well?

Gift with Purchase
  • If customers are eligible for gifts with purchases, which option is more effective for them?
  • Do they want to see the photo of the gift?
  • Do they want to choose the gift options?

User-testing plan

Which "frequently bought together" item design best matches a customer’s 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 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?

What do customers expect to see in the recommendation product?
Do customers expect to change the option depending on the product?
If customers like the recommendation, what would you do?
If customers don't like the recommendation, what would you do?
Do customers want to see the recommendation product's detail? If yes, do they want to see the 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 adding it to their wishlist?

Initial Iteration / Rapid Testing

Theme A - Result
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.
Theme B - Result
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.
Gift with Purchase
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?

Rapid Testing - Insights

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 a discount?

University student - The Student

I want to see the detail even it has long description

Stylist - The fashionable spender

Initial Iteration / Synthesis

UI Design
  • View more information icon (Chevron / Hyperlink / dots)
  • Customers acknowledge the function of the carousel to check out the product's full description.
  • Buy Together sounds cheaper : Macy's currently doesn't provide bundle sales. If both items are eligible for promotions, how could we show?

Summary of user testing
  • 5/5 Customers check out the product detail as their next step.
  • 0/5 Customers try or attempt to change the different options.
  • Customers want to view simple descriptions (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 have already bought together.
  • “Add to Bag” button with the total price makes customers confused.

UX Solution


Customers not only will easily catch the information, but they will also see the exact photo of the product that they would get when they make a purchase. They also can deselect the gift, but selected checkbox is going to be default.


If current Macy' is not providing live updates, having sub-title as color or size could possibly confuse customers. -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 checkboxes for customers, I would recommend having different opacity or remove deselected items.


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

Can we make an alternate state CTA(Call to Action) option or change copy from “buy both” to “buy current product that customers are viewing and view the recommendation product"?

  • Giving several options on the product detail page may discourage customers from continuing on their shopping journey.

The Design

Recommendation Panel on Product Detail Page

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

Taking a mobile-first approach because designing pages for smaller screens first (focusing on the really important features and simple solutions) usually comes easier.

Design changes

Feasible Design

Single option -> Multiple option

Expanding this panel to the product has multiple options.

Call to Action

Clear Button

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

Check Box

selected / unselected

Having different opacity between selected and deselected products, customers can easily define which product is selected.

This item

Currently viewing item

Having this item tag, customers know the product they are currently viewing.

Responsible Design

What I've learned

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

Unfortunately, the product couldn't go to the product review yet it's still discovery stage! I really enjoyed the chance to work at the Macy' tech company with some truly amazing people! Having real experience by working and learning close with different teams was a great opportunity for getting to know a lot about both the fashion industry and e-commerce UX. THANK YOU!