Shopping Cart Experience
The team at Spreetail.com was formed to build a home & garden eCommerce platform that rivaled the best online shopping experiences in the market – an imperative part of which was an easy-to-use, helpful and robust shopping cart experience.
I worked on the project as the lead product designer collaborating closely with product managers, designers, and user researchers. The work was created while at Spreetail in 2019.
problem statement & GOALS
The initial cart was designed for a low level of development effort in order to support an aggressive launch plan, and thus after competitive and heuristic analysis and referencing cart research studies (Baymard Institute’s, Checkout UX), we decided to revisit the experience to address two issues:
Confirmation when a user added an item to cart was jarring and made assumptions about user next steps.
The cart paradigm was limited in real estate, making features that users expected to find in cart difficult to support.
The hypothesis was that by improving user flow and increasing the amount of details we were able to surface to users pre-checkout, we would make a more seamless and effectual shopping experience, in turn positively affecting conversion and average order value – two of our primary metrics of success.
Left: Mobile layout of notification when item is successfully added to cart.
Right: Desktop layout of detailed cart view once user has applied a promotion code.
Less disruptive confirmations
On the current site, the full cart appears to serve as confirmation when a user adds an item to cart. The result is a slightly jarring experience that assumes users want to review their cart after adding an item.
We wanted to explore how separating the function of confirmation and cart review could create a less disruptive shopping experience and to understand what information users expected to see in confirmation versus in their full cart details.
The proposed solution was a confirmation that appeared in proximity to the cart icon and displayed for a set amount of time, then dismissed. From the confirmation, users were given the option to navigate into cart or manually dismiss.
BEFORE: The full cart details panel served as confirmation when an item was successfully added.
AFTER: Cart confirmation was limited to a small notification and a success state of the Add to Cart button in order to present options for users.
A more robust cart experience
Research found that users expect certain information in cart that our experience did not provide, such as full order details like estimated tax and promotional discounts. We also knew that the ability to feature cross-sell and up-sell items in cart would be highly anticipated once our merchant team was ready to support it from an assortment perspective.
Moving cart onto a landing page gave us the flexibility to surface the baseline information users needed to make a well-informed decision, while also surfacing those relevant product suggestions.
21% of users abandon because they cannot see or calculate total order cost up-front
- Baymard Institute, 41 Cart Abandonment Rate Statistics
enhanced Product Cards
We aimed to improve details for each selected product, as research found that cart was used by many as a way to compare products during the decision-making phase.
“25% of test subjects consistently added multiple products (often of the same type) to their cart … to store and compare them in the cart later on.”
- Baymard Institute, Cart as a Comparison Tool – Guideline #620 (report not publicly available)
This meant enlarging product imagery and including rating and discount details (when applied), as well as estimated delivery times. It also meant providing a combined subtotal for each item when buying multiples.
Product cards were expanded to include product details like ratings, estimated delivery, line item subtotals for multiples, and discount details.
curating in cart
Perhaps the most promising in terms of tracking toward goals was adding up-sell and cross-sell to cart. Our exploration included two pieces of related vision work in order to inform more solidified requirements around this future enhancement:
suggesting auxiliary items relevant to a selected item
suggesting similar items to recently visited items
An auxiliary product card displayed in context of an item in cart.
Similar or related items other shoppers had purchased.
Evaluating the concept
In individual remote, moderated sessions, we asked users to move through a flow in order to evaluate expected functions, content discoverability, and the comprehension of information. We set up the premise that the user was shopping for multiple products in order to assess whether behaviors around navigation would shift when shopping for their first versus last item.
In cart, we wanted to understand whether users would find suggested items intrusive or be confused as to whether the suggested item was added to their cart. We also wanted to understand how helpful these suggestions were at this step in the journey.
key takeaways
Users had varied, habitual preferences for where to go after adding an item to cart.
All users were comfortable with pared back product information in the confirmation.
Some users expressed a desire for more assertive language to “continue shopping” in the confirmation.
Users responded positively to highly relevant suggested items, but found other suggested item less compelling.
Some users sought a subtotal line item displaying the full amount of their promotional discount.
Measuring success
These enhancements were not ultimately built (by nature of a very sudden change in organizational direction), but testing results supported use of the new paradigm and we identified opportunities to refine the solution prior to development. In turn, this work also helped to inform a roadmap for future expansion of the purchase experience, including feature areas like cross-sell and up-sell and the ability to save items for later.