Peapod.com bills itself as “America’s leading internet grocer,” allowing its users to do their weekly shopping without having to step foot outside their door. Designed to mimic the store shopping experience, users “browse” the online aisles for typical grocery store goods and add purchases to their digital cart before scheduling either a home delivery or a store pickup. While many aspects of the website are clearly designed, there are several problems with the interface that damage the user’s experience of the site.
Problem: Need to click into several sub-aisles to find items
The name of the “Browse Aisles” tab implies that the online experience will be similar to that of exploring the aisles in a physical grocery store. The user therefore has a mental model in place that expects the website to function in the same way they browse in person. On Peapod, however, selecting one of the aisles in the menu on the left does not display all of the items for sale, but instead returns only a few featured items. In order to see more, the user is required to click into further and further subcategories. For instance, if I want to buy a banana, I can’t simply go into the Produce section and scroll down until I find what I’m looking for. Instead, I need to select Produce, then Fresh Fruit, and then Bananas to find my desired item.
Because the user already has the mental model of a physical grocery store in mind, they expect to see the entirety of the aisle after one click. This is both a problem of visibility because it is not clear what needs to be done to see all the items and a problem of mapping because it goes against one’s expectations.
Solution: By default, show all items within each aisle
In order to correct this flaw, Peapod can use natural mapping to mimic the cultural conventions already in the mind of the user. When browsing the digital aisles, users should be able to select one of the broad categories typical of a grocery store (produce, canned goods, deli, etc.) and then scroll through a display of all the items as if they are walking down a physical aisle. The option can still be available to narrow down into more precise categories, but it should not be the default view.
Problem: There are too many ways to add an item to your cart
Peapod also gives users too many ways to buy an item. Hitting the buy button, clicking the up arrow, and typing in a quantity all add the item(s) to your cart.
Although allowing for several methods of adding to the cart may seem like a good idea, the lack of constraints actually adds to the user’s confusion. When there is more than one way of doing something, there are more chances of the user making a mistake or misunderstanding the action.
Solution: Make the buy button the only way to purchase
Instead, take advantage of the power of constraints and require the user to click the “Buy” button alone to add the item to the shopping cart.
Problem: Not enough feedback when adding an item to the cart
Furthermore, once an item has been selected and added to the cart, there is not clear enough feedback that the intended action has been accomplished. While the screen does give some feedback (a shopping cart icon appears next to the selected item once the system has processed the action), it is easy to miss as the cart icon is not a clear enough cultural symbol and the buy button doesn’t change.
Solution: Replace the Buy button with a clear message once the item is added
Something as simple as a green check mark replacing the Buy button once the item is added will provide the user with a much clearer message. FreshDirect, a competing digital grocer, also has a much more effective design:
First, the button is more clearly labeled. “Add to Cart” states the action that will be taken once the button is clicked. Secondly, once clicked, the “Add to Cart” button changes color and returns the text “Added”. It is clear that you have successfully accomplished your task.
Problem: Deleting an item from the cart is an irreversible action
Finally, if a user clicks the down arrow in the shopping cart to decrease the quantity to zero, the item is consequently removed from the cart completely. There is no way to undo this action.
If this was an accidental selection or the user later changes their mind, they must instead navigate off their current screen, relocate the item, and add it back to the cart. Good design requires the elimination of irreversible actions as users can be expected to make any and all possible mistakes.
Solution: Give the user the option to undo by replacing the item with an undo button
Instead of allowing users to remove items through the down arrow, a delete button should be added next to each item in the cart. If the delete button is chosen, the item should be removed and replaced with an “Undo” button that would allow the user to replace the removed item in the cart in case of error.