Select Page

mini-Cart / MAP

CHALLENGE
If users want to remove an item from their cart, they must navigate away from the shopping experience to the cart, remove the item, then hit the back button and scroll back to where they left off.

ACTION
Performed competitive analysis across three sites with differing cart solutions. Designed, tested, and iterated prototypes for a cart modal that would show users the items in their cart and allow them to remove items without navigating away from the shopping experience.

RESULT
Original designs were to replace add to cart notification with Quick Cart experience to allow users to remove items (such as MAP items for which they did not like the price). This part of the design died at implementation due to system and development process limitations. However, users were still able to more quickly access their cart and remove items if needed. Quick cart did also increase Average Order Value by 2.3% and reduced friction to checkout, allowing users to bypass the cart page.

Minmum advertised price (map)

Binding Contracts
Several products in the company’s catalog were bound by pricing contracts that kept Academy from displaying a price lower than specified in the contract. The existing solution for this was a message that read “See in Cart”. This hurt the shopping experience, frustrated users, and hurt the business. So we set out to find solutions.

Emphasis on BINDING
After much ideating, it was determined that there weren’t many options for getting around the contract, and violation could lose the supplier contract.

Ultimately, we settled on a two-pronged approach:

  • Re-wording the price messaging on the product grid to include the Minimum Advertised Price in order to give the customer a ballpark
  • Lowering the effort of seeing the price of an item, via a mini-cart with a remove function (existing functionality directed users to the cart page, and previous mini-cart functionality did not offer a remove option).

MAP Solution
Testing showed that idea number 3 most clearly communicated to users that “our price” was lower than the “compare at” price (MAP price).

The MAP contracts were very specific and made it difficult to explicitly communicate that the sale price was cheaper than the advertised price. 

Mini-cart competitive analysis

Competitive User Testing
Since a mini-cart is nothing new in e-comm, I tested two promising competitor mini-carts against Academy’s cart page redirect, Bonobos.com and Target.com.

Overwhelmingly, users preferred the minicart experience over being directed away from the shopping experience to a cart page. However, users were split when it came to stopping at the cart page before checkout or bypassing the cart page and going direct to checkout.

Ultimately, we decided to offer users the option to bypass checkout or go to the cart page.

Bonobos.com

Bonobos.com utilizes a slide-out modal for the mini-cart, which is triggered for an add-to-cart confirmation modal as well. Users liked this interaction, and it felt the most similar to a real world shopping experience. 

Target.com

Target.com used a more traditional mini-cart experience, which users also liked. However, there was a certain segment of users that wanted to see their cart rooted in a separate page before moving into checkout.

mini-cart design

MVP
Phase 1 design offered users product information, a simple sub-total, ability to remove items, and checkout options (Paypal was a last minute request from business).

Phase 2
Phase 2 would offer users shipping and tax info (very important to users) and ability to change item quantity.

Add-to-Cart Confirmation Modal Re-skin
Using the mini-cart as a replacement for the confirmation modal was rejected by IT, so I ended up re-skinning the confirmation modal at the last minute. The option to remove an item from the add-to-cart confirmation modal was also a hard “no” from IT. Keeping the confirmation modal, however, allowed us to fit in a cross sell widget, which brought in $150k week (became CEO’s favorite new feature).

Next step is to get an add-to-cart button on the cross sell products.

Result

Post-implementation user testing feedback was positive.

Allowing users to check their cart without being navigated away from the shopping experience increased Average Order Value by 2.3%.

“Oh, that’s actually not what I was expecting when I clicked the cart icon, but this is better. Very handy… I like that it keeps me on the page”

– Mobile Academy Shopper

2.3%

Average Order Value Increase