Add to List Feature

Analysis of a user-centered favorite/add-to-list feature design

Project Type
Individual Project

Role
User Experience Analyst

Deliverables
Analysis and comparison of favorite and add-to-Wishlist features in Amazon, Walmart, and Macy's

Duration
3 days

What is a favorite/add-to-list feature?

While browsing products, users frequently add them to their wish lists or mark them as favorites to think about them and revisit them later before making a purchase. Providing a seamless user experience to save a product is not only crucial for a user but also the businesses because a user is most likely to buy that or a similar product later.

The Goal

Before I talk about what are the best practices for adding a product to a list, let's talk about some of the user’s goals. Why would a user like to save an item to a wish list or mark it as a favorite?

The user sees an interesting product online and doesn’t have time to purchase it right away so he saves it in a list to look at it later before he can place an order.
The user is confused about whether she should buy it.
The user wants to show it to someone else for the suggestion.
The user wants to buy it when it is available for sale in the future.
The user wants to compare its price elsewhere.
The user wants to create a list of products that he can buy together.
The user wants to save some money before he can order it later.

Whatever the reason for saving a product, the user intends to buy that product so we should design the add-to list or favorite option as intuitive as possible. A user needs to have a flawless and smooth user experience that enables him to interact with the add-to-wish list features without any interruption or problems.

Best User Practices for Saving a Product

Let us discuss how we can provide the best user experience while saving an item either in the Wishlist or a favorite list.

User a familiar user approach

The most acceptable approach for saving an item in a favorite list or a Wishlist is either using the text “add to Wishlist” or “add to list” or using a heart icon that most users are familiar with nowadays. When a user sees a heart icon, he immediately knows what it means, and he clicks on it with the assumption that it will save the item he is currently viewing. It's best to use the same familiar approach instead of using hard-to-interpret text or icons a user doesn’t know.

One-click or a two-click operation?

When a user clicks on the heart icon or clicks on the “add to list” or “add to Wishlist” text or button, one of the two things can happen.

It will save the product in a generic favorite or wish list.
It will save an item in a user-defined list.

Depending upon the user persona and the goal a user wants to achieve when he/she presses the icon/button we can choose from two practices. One is to save the product right away with one click or provide the user with one extra step; of saving the product in their preferred Wishlist. The best practice would be to provide both options, a one-click operation to save the product right away and to provide an option to save it to a specific list.

Hover and active states of the icon or button

When you hover over it, an icon should give some sort of indication that it is ready to be activated like a button that can change color or a mouse arrow that can change into a hand click to show the user this button/icon can be clicked.

When you click on it an empty heart button will be filled with color, mostly solid red or depending upon the theme and branding of a website however red is the most familiar color when it comes to a heart icon. When a heart is colorful, it means the product is already saved and the user can always find it later in his favorite list or a Wishlist.

Removing a product from the Wishlist

Removing the product should be as easy as adding a product. The icon/button should change the color back to the inactive state.

Uniform/familiar Save button interaction across all platforms

In the era of responsive websites, while designing the save/favorite/Wishlist icon/button it should look and behave the same across all platforms. Of course, the hover state on a mobile phone will not exist however a user must know how and where to look when he wants to save something on his Wishlist.

Comparison of Amazon, Walmart, and Macy's Favorite/Add to List feature

I have reviewed, tested, and compared the feature of saving a product among the three most famous online stores, Amazon, Walmart, and Macy's, and how they handled it on a desktop browser, mobile browser, and mobile app.

Amazon

Amazon doesn’t offer a uniform experience across all platforms. You can get Amazon’s best user experience via the mobile app only which offers a simple approach to saving or removing an item from a list. It also offers a separate option to “Add to List”.

Unfortunately, mobile and desktop browsers don’t offer the heart icon. The mobile browser doesn’t give the option to save into a specific list and the desktop browser doesn’t show if an item is already saved.

Amazon mobile app uses an option of a heart icon to save a product in your last Wishlist whatever it is.
The mobile app offers both a heart icon and an add to List option.
When a product is saved, a success alert is displayed with the list name.
When an item is saved the color, or the heart indicates that it is saved.
Amazon doesn't offer a heart icon in their mobile or desktop browser. It only offers a list.
Add to list option on a mobile browser is hard to find. You must look hard if you want to save an item on your list.
From a desktop browser, user can click on “add to list” to immediately save a product or click on the down arrow to choose a specific list he can save it to. This option is not available on mobile browsers though.
From a desktop browser there is no way to know if an item is already saved in your list unless you open the lists and go through the products.
From a mobile browser when you open already saved products “Add to list” option changes to “View list - Private” which shows that the item is already in a Wishlist.
To remove a product from the saved list on a mobile app just click on the heart button and the item will be removed.
When a product is removed from a saved list, a success alert is displayed.
To remove an item from a mobile or web browser you must go to your account and then Wishlists and from there you can manually remove a product.
Does not offer to save the product just after seeing the photo.

Walmart

Walmart offers the uniform function of saving a product in the favorite list or a specific list on a mobile app, mobile, and desktop browsers. The feature works at its best and is no doubt centered around a user.

The best thing about it that only a few stores offer is to save an item even before opening It. Sometimes you search for an item, you see a photo and want to save it right away but as soon you click on the heart icon the product page opens, and then you must click on the heart icon again to finally save your item. Walmart has surpassed that step, you can simply tap the heart button on a photo, and it will be saved automatically.

Walmart mobile app, mobile, and desktop browsers use an option of a heart icon to save a product in your last Wishlist whatever it is.
Both options are available to save a product, a favorite icon, and add to list option across all platforms.
When a product is saved the color or the heart turns blue to show it is saved.
When a product is saved, a success alert is displayed with the list name.

Add to list option is very easy to find and gives you the option to save the item on a specific list.

When you save a product using an add-to-list option, the heart color, stays active to show the item is on your wishlist.
To remove a product from a list just click the heart button and the product will be removed.

When a product is removed from a saved list, a success alert is displayed.
If you do not want to open a product, from the search results just tap the heart icon on top of the photo and the product will be saved without reloading the page.

Macy's

Macy’s favorite and Wishlist feature is broken and doesn’t work as expected which gives a bad user experience. These critical errors will prevent the user from saving items for future purchases thus hurting the business as well as the reliability of the website.

Macy’s mobile app, mobile, and desktop browsers use an option of a heart icon to save a product.
On the browser when you click a heart icon, it's a 3-click operation to save the product, click on the heart, choose a list of your choice, and click the close window.

There is no separate option for “Add to list” like Amazon and Walmart.
On the mobile app, when you save a product, the color of the heart turns red.
On the mobile or desktop browser when you save a product the color or the heart doesn’t change, which seems like a bug.
On the browser, when you click on the heart to remove an already saved product, it opens the list to save the item, not to remove it. You need to go to the lists from the Account to remove the product.
On the mobile app, when the heart is clicked, it instantly saves the item without opening the lists.
When a product is saved, a success alert is displayed with the list name on all platforms.
When a product is removed from the favorite list, a success alert is not displayed on the mobile app and the browsers.
On the mobile app, in the search results, the heart icon is displayed with every product to save it without opening. It saves and shows alerts for both adding or removing the product.
The favorite button on the mobile app doesn’t always work and gives an error “Failed to modify favorites”.

Conclusion

Considering the above findings, we can say that Walmart is a clear winner for the feature of favorite or add to list feature. I have broken down all the positive and negative points in the form of a table.

**Table:** The user experience and friendliness score
Favorite/Wishlist	Amazon	Walmart	Macy's
Positive Features	8	9	5
Negative Features	2	0	6
Total Score	6	9	-1

Mobile App Favorite Feature side by side

Amazon Mobile App	Walmart Mobile App	Macys Mobile App

Flawless operation on the mobile app	Flawless operation on the mobile app	No sucess alert when the item is removed from favorites

Add to List Feature

Analysis of a user-centered favorite/add-to-list feature design

What is a favorite/add-to-list feature?

The Goal

Before I talk about what are the best practices for adding a product to a list, let's talk about some of the user’s goals. Why would a user like to save an item to a wish list or mark it as a favorite?

The user sees an interesting product online and doesn’t have time to purchase it right away so he saves it in a list to look at it later before he can place an order.

The user is confused about whether she should buy it.

The user wants to show it to someone else for the suggestion.

The user wants to buy it when it is available for sale in the future.

The user wants to compare its price elsewhere.

The user wants to create a list of products that he can buy together.

The user wants to save some money before he can order it later.

Best User Practices for Saving a Product

Let us discuss how we can provide the best user experience while saving an item either in the Wishlist or a favorite list.

User a familiar user approach

One-click or a two-click operation?

When a user clicks on the heart icon or clicks on the “add to list” or “add to Wishlist” text or button, one of the two things can happen.

It will save the product in a generic favorite or wish list.

It will save an item in a user-defined list.

Hover and active states of the icon or button

Removing a product from the Wishlist

Removing the product should be as easy as adding a product. The icon/button should change the color back to the inactive state.

Uniform/familiar Save button interaction across all platforms

Comparison of Amazon, Walmart, and Macy's Favorite/Add to List feature

I have reviewed, tested, and compared the feature of saving a product among the three most famous online stores, Amazon, Walmart, and Macy's, and how they handled it on a desktop browser, mobile browser, and mobile app.

Amazon

Amazon doesn’t offer a uniform experience across all platforms. You can get Amazon’s best user experience via the mobile app only which offers a simple approach to saving or removing an item from a list. It also offers a separate option to “Add to List”.

Unfortunately, mobile and desktop browsers don’t offer the heart icon. The mobile browser doesn’t give the option to save into a specific list and the desktop browser doesn’t show if an item is already saved.

Amazon mobile app uses an option of a heart icon to save a product in your last Wishlist whatever it is.

The mobile app offers both a heart icon and an add to List option.

When a product is saved, a success alert is displayed with the list name.

When an item is saved the color, or the heart indicates that it is saved.

Amazon doesn't offer a heart icon in their mobile or desktop browser. It only offers a list.

Add to list option on a mobile browser is hard to find. You must look hard if you want to save an item on your list.

From a desktop browser, user can click on “add to list” to immediately save a product or click on the down arrow to choose a specific list he can save it to. This option is not available on mobile browsers though.

From a desktop browser there is no way to know if an item is already saved in your list unless you open the lists and go through the products.

From a mobile browser when you open already saved products “Add to list” option changes to “View list - Private” which shows that the item is already in a Wishlist.

To remove a product from the saved list on a mobile app just click on the heart button and the item will be removed.

When a product is removed from a saved list, a success alert is displayed.

To remove an item from a mobile or web browser you must go to your account and then Wishlists and from there you can manually remove a product.

Does not offer to save the product just after seeing the photo.

Walmart

Walmart offers the uniform function of saving a product in the favorite list or a specific list on a mobile app, mobile, and desktop browsers. The feature works at its best and is no doubt centered around a user.

Walmart mobile app, mobile, and desktop browsers use an option of a heart icon to save a product in your last Wishlist whatever it is.

Both options are available to save a product, a favorite icon, and add to list option across all platforms.

When a product is saved the color or the heart turns blue to show it is saved.

When a product is saved, a success alert is displayed with the list name.

Add to list option is very easy to find and gives you the option to save the item on a specific list.

When you save a product using an add-to-list option, the heart color, stays active to show the item is on your wishlist.

To remove a product from a list just click the heart button and the product will be removed.

When a product is removed from a saved list, a success alert is displayed.

If you do not want to open a product, from the search results just tap the heart icon on top of the photo and the product will be saved without reloading the page.

Macy's

Macy’s favorite and Wishlist feature is broken and doesn’t work as expected which gives a bad user experience. These critical errors will prevent the user from saving items for future purchases thus hurting the business as well as the reliability of the website.

Macy’s mobile app, mobile, and desktop browsers use an option of a heart icon to save a product.

On the browser when you click a heart icon, it's a 3-click operation to save the product, click on the heart, choose a list of your choice, and click the close window.

There is no separate option for “Add to list” like Amazon and Walmart.

On the mobile app, when you save a product, the color of the heart turns red.

On the mobile or desktop browser when you save a product the color or the heart doesn’t change, which seems like a bug.

On the browser, when you click on the heart to remove an already saved product, it opens the list to save the item, not to remove it. You need to go to the lists from the Account to remove the product.

On the mobile app, when the heart is clicked, it instantly saves the item without opening the lists.

When a product is saved, a success alert is displayed with the list name on all platforms.

When a product is removed from the favorite list, a success alert is not displayed on the mobile app and the browsers.

On the mobile app, in the search results, the heart icon is displayed with every product to save it without opening. It saves and shows alerts for both adding or removing the product.

The favorite button on the mobile app doesn’t always work and gives an error “Failed to modify favorites”.

Conclusion

Considering the above findings, we can say that Walmart is a clear winner for the feature of favorite or add to list feature. I have broken down all the positive and negative points in the form of a table.

Mobile App Favorite Feature side by side