Overview

Garden of Life sought our expertise to solve a UX challenge when encountering unexpected out of stock items while navigating through the cart and checkout pages. Our team was tasked with solving multiple scenarios.

I was responsible to spearhead this UX challenge by conducting competitor research, creating multiple wireframes for various scenarios, and performing quality assurance testing.

This experience enabled me to lead a team of developers, gain insights from research, conduct user testing, and address challenges by applying design and UX best practices directly.

Scenario #1: All Products are Out of Stock on the Cart Page

When users navigate to the cart page, they may encounter that some or all of the products they've added are now marked as out of stock. This occurs when other users have already purchased those items, leading to a decrease in available stock when revisiting the cart page.

I created a solution to inform users about out of stock products using a modal, which includes details and a ‘Continue Shopping’ button. I specifically included this button to redirect users to the ‘All Products’ category page, encouraging them to explore and add more items to their cart instead of simply dismissing the modal with an ‘Ok’ button.

Scenario #2: Updated Product Quantity on the Checkout Page

A second scenario was thought out where there might not be enough quantity available for a product initially added to the cart, upon reaching the checkout page.

To address this, I designed a solution where a modal informs the user about any changes in product quantities.

If the user initially added only one quantity of a specific product but it's no longer in stock, the product will be automatically removed when the user taps on the 'Continue Checkout' button.

Scenario #3: Updated Product Quantity with Discount on the Checkout Page

A third scenario involved adjusting the product quantity on the checkout page with an applied discount. I chose to maintain design consistency while refining the wording to ensure clarity for users regarding any changes.

Scenario #4: Updated Product Quantity Removes Free Shipping

In a fourth scenario, free shipping is removed for the user if updating one or more product quantities causes the total order price to fall below $25.

I chose to display this messaging in red to draw the user’s attention to understand why free shipping is no longer available. This helps prevent confusion when they proceed to the payment section.

Scenario #5: Invalid Coupon on the Checkout Page

The final scenario involved an invalid coupon. This message would appear in red after informing users about any updated product quantities.