Get Inspiration from our recommendation (Excluded: Apperal, Big tickets, Collections)
TBD, AOV, RPV
ATB per visior, order
Adobe XD, Invision
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.
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.
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 product includes this feature, and which products are available. We decided to exclude the collection, Big Tickets, and apparel.
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.
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.
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?
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?
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?
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?
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!
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
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.
GIFT AS THIRD RECOMMENDATION
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.
SIMPLE MULTIPLE OPTION INDICATOR
If current Macy's.com 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.
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.
Single option -> Multiple option
Expanding this panel to the product has multiple options.
Call to Action
Preventing any confusion for customers about price and amount of selected products, I designed the button with seperate price text.
selected / unselected
Having different opacity between selected and deselected products, customers can easily define which product is selected.
Currently viewing item
Having this item tag, customers know the product they are currently viewing.
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's.com 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!