Select Page

The Flyout Cart

The Flyout Cart

This project started out as a proof of concept, based on an idea from one of our developers. The ultimate goal was to get rid of the cart page entirely and have everything in a flyout cart, similar to Bonobos or Amazon.

Versions 1 and 2 were very similar and cobbled together from resources I already had from other cart-based projects. We wanted to make sure that users could close the cart, edit item quantities, and see their subtotal and how close they were to free shipping.

Version 1 Flyout Cart

Version 1 was a drawer based cart. Because the cart was independent of the header, I thought it would be best if there was also a button that followed you along down the page that would allow you to access the cart at any given time.

Version 2 Flyout Cart

Version 2 was a cart that would slide down from the header. I also rearranged buttons to try and make it more obvious that users could view the full cart in addition to keep shopping.

Around the same time, we were having problems with cart abandonment. We started investigating this issue by watching Clicktale videos. It was then that we noticed that a lot of these customers would go back and forth from cart to their search or product pages, changing specific items and quantities and trying multiple promo codes.

We realized then that this Flyout Cart feature shouldn’t be a distant project. It should be done much quicker and because it shared so many features with the Add to Cart notification above, it would replace the Add to Cart notification.

We went through a couple more variations that borrowed design elements from Amazon: It currently has a wide header and a sidebar cart menu (on certain browser widths) and the content on the main page is centered in the space left below the header.

Version 3 Flyout Cart

Version 3 follows that design pretty much exactly. (We also had a discussion about whether or not we wanted users to bypass the cart and go straight to checkout. This is currently not considered in our flows, but we have worked through how this might work when we implement the flyout.)

Version 4 Flyout Cart

Version 4 was a blend of the Add to Cart notification and Version 3. Adding an item to cart meant that the flyout would appear as a popup and could be dismissed, returning the full width to the content. It also focuses the entirety of the user’s attention on the flyout and the My Account area in the header.

The finalized version we decided on was a mix of Version 1 and Version 4.

Final Version Flyout Cart

After consideration, we did decide to allow users to skip the full cart and Proceed to Checkout. However, we did realize that we would have to take special consideration for some of the alerts and messaging that a user might come across:

Process Flow for Flyout Cart

The Proceed to Checkout button will end up disabled or gone if a user has to go to the full cart to confirm shipping issues or state restricted issues.

We also decided the flyout cart should block out the rest of the content. If a user adds an item to the cart, this attention grabbing popup will notify them what was added, how much, and the subtotal of the cart. If there are other items in the cart, they will see that too. If a user clicks on the cart icon, they see the same thing, but they initiated the action.

We are planning on testing this flyout with our users in hopes that it does help with some of their bouncing back and forth behavior. If it saves them a couple seconds each time, it could amount to a decent amount of time. We also have to be careful that we’re not moving too quickly when it comes to our user base. They tend to be older and occasionally confused by large updates.



Posted on

April 23, 2017