Originally, the only notification that you added an item to the cart was the number changing in the top left corner:
In the grand scheme of things, it’s not very noticeable:
It defies a lot of basic principles of usability. During usability testing, we found that our customers would add an item three or four times because they thought the website was failing. They only directed their attention to the number change when the facilitator told them about it.
The developers added a quick fix to try and alleviate the issues we saw during testing:
The “1 Item(s) Added to Cart” appears when a user clicks on Add to Cart. It’s a lot better than just changing the number near the cart, but it’s not perfect. It’s not in the user’s line of sight when they click on Add to Cart. It’s still missed during testing, but not nearly as much as the old version.
The next step to the Add to Cart notification was to make it more noticeable and more helpful to the user:
- Tell the user which product they added to the cart
- Tell the user their cart subtotal
- Allow the user to close the notification themselves
Item 1 was important if a user added a product to the cart from a search result page or a category page:
There are multiple items a user can add to the cart from each page, so it’s a good idea to confirm with the customer that they added the item they wanted to.
Item 2 was important because a user might be trying to hit a certain budget or trying to get to the free shipping amount. The subtotal isn’t available immediately on the page, so the notification would give them that information without forcing the user to the cart page.
And then item 3 was important because there was so much information available on this new notification, we didn’t want the notification to close by itself. We wanted to give the customer multiple ways to continue shopping and also multiple ways to finish their shopping experience.
With these three items in mind, I created 6 variations:
Version 1 was the simplest and hit each of the necessary items. It could be used on both mobile devices and desktop devices. However, it would be placed in the top left corner again as a slide-down menu. It ran the risk of being missed again (but it would be much harder because it should reach all the way down to most Add to Cart buttons).
Version 2 would be a modal window. It would appear on desktop versions and gray out the rest of the page. It would be impossible to miss, but it would disrupt the user’s workflow. We would also have to create a second version for our mobile devices (or use version 1 above).
Version 3 started including product recommendations. After talking to another department about one of their initiatives, I started creating versions of the desktop and mobile notifications that included those same recommendations.
In the previous version, I was concerned that the product was getting lost in comparison to the product recommendation. Version 4 has a much larger primary product.
The increased product size in the previous version was unnecessary. The whole point was just to confirm that the customer had selected the correct product. It didn’t need to be that big. Version 5 goes back to Version 2 and adds a selection of recommended products. Again, it still needed a redesigned mobile version.
Ultimately we decided on Version 6, for all screen sizes:
Version 6 fits on mobile devices and also on desktop devices (sliding down from beneath the menu area). It follows all of the necessary requirements. And it adds in the product recommendations using a style that is currently in use on the website, thereby minimizing development work on that feature.
However, while testing another feature and while working on a proof of concept for another idea, we realized that this wasn’t the exact experience we wanted to give our customers. This realization lead to the following project: The Flyout Cart.