Select Page

Add to cart from grid

Some users already know what they want from the website, but are forced to go to the product details page in order to get their item.

Hypothesis: Allowing users to add simple SKU items (like a baseball) to the cart directly from the grid page via an add-to-cart button and multi-SKU items (like apparel) via a diff selection modal will reduce friction for users, thus improving the shopping experience, and ultimately lead to increased conversion or AOV.

User call-outs from other tests indicated a basic appetite for and add-to-cart button on the product grid, and the design requirements were fairly small,  so I ran a competitive evaluation, built a clickable prototype, then we ran competitive analysis against the proposed design. We were short on bandwidth at the time, so we contracted out the competitive user testing to  They compared to, offering a similar solution, and, offering a different solution. The test gave us an understanding of user sentiment and answered a few questions we had about the proposed design.

Clickable prototype testing showed readiness for implementation. The project was put into the roadmap, then postponed and ultimately shelved in the face of  BOPIS and subsequent re-platforming decisions. 


There are two basic interactions: adding a simple SKU and building a complex SKU. The flow also had to account for products like gift cards, and bundles.

Simple SKUs
So, if a user wanted to add something like a baseball to their cart, which has no selection options, then the user would simply receive a confirmation that the item was added – no problem.

Complex SKUs
However, if the user wanted to add a pair of gym shorts, then the user would be presented with a modal asking for size and color selections.

A couple areas that posed challenges were things like our complex availability/fulfillment states, SKU types, and how to communicate these limitations on the product grid without negatively impacting sales for particular categories.

Ultimately, it was decided that buttons for items with limited availability or fulfillment would read “view details” and direct the user to the Product Details Page (PDP). Changing the color of the buttons for these items was decided against for fear of weighting products differently. While we knew a simple messaging change was not a completely adequate amount of affordances for users, it was the best compromise of business goals and user needs.

Updating the Flow for BOPIS
This project ended up overlapping with the BOPIS project, and eventually the flow diagram had to be updated. In addition to our already complex SKU types, and fulfillment/availability states, I had to add the “pickup” fulfillment option and decide on fulfillment method defaults, which ended up being based on the user’s filtering preferences (did they filter for pickup?).


Competitive Analysis
We knew from incidental callouts in other tests that this was an enhancement welcomed by users, checking for user appetite was not a priority in preliminary research as understanding how other retailers are implementing and figuring out the best implementation strategy.

I put together a quick report examining add-to-cart functionality across 7 retailers and shared it with the team.

We ran a couple iterative tests during design until I was able to get the designs into a clickable prototype. Then we contracted out a competitive usability test to to see how my proposed design stood up to the competition.

Happy to say that the design actually beat out


While the clickable prototypes were well received by users, Add to Cart from Grid was designed in tandem with the BOPIS project, which was an ambitious undertaking to begin with. With the BOPIS failure to launch and subsequent re-platforming, the project was de-prioritized and ultimately shelved. However, the latest update is that it is back in the roadmap and due for launch sometime in late 2018 or early 2019.