Upgrading the Cart Functionality
Correcting a Broken Purchasing Experience
Improving the add-to-cart functionality to streamline the purchasing process for wholesale and bulk B2B shoppers.
Project Overview
This project aimed to improve the add-to-cart experience on Original Favorites’ website for wholesale, B2B customers. The old design redirected users to the cart after each item added, disrupting the shopping flow. I supported the UX design by collaborating with developers and founders to introduce a slide-out cart, allowing users to stay on the page while confirming additions, reducing friction and streamlining the experience.
Duration: 6 weeks
Role: Staff UX/UI Designer
Tools Used: Figma, Hotjar, Miro, Slack, Google Analytics, Google Forms
My Design Process
Empathize
Step 1: Research
The Problem -
Understanding the Issue at Hand -
For wholesale buyers, shopping typically involves adding multiple SKUs in different sizes and colors. However, each time a product was added to the cart, users were redirected to a full cart page. This:
Broke the browsing flow
Made it difficult to build larger orders
Increased time-to-checkout
Resulted in missed or duplicated items due to confusion
Internal feedback and Hotjar recordings reinforced the frustration users experienced with this workflow.
Goals -
Create a more intuitive, seamless add-to-cart experience
Allow users to stay in their browsing context
Reduce interaction steps and eliminate redundant page loads
Increase conversion and cart size
We began by looking at both user behavior and team feedback.
Session recordings showed users clicking back and forth between the product and cart pages repeatedly.
Interviews with 5 B2B customers confirmed this experience was both inefficient and mentally taxing.
Analytics revealed a high bounce rate on the cart page when it was triggered unintentionally.
Customer service records showed a consistent irritation with the limitation of the add to cart functionality.
-
Interrupted Shopping Flow: Our users found the redirection after adding each item disruptive and annoying.
-
Desire for Seamless Experience: Our B2B customers preferred staying on the product page to continue browsing and adding items.
-
Outdated Experience: Our users voiced that the disrupted experience felt outdated and felt like it was broken part of the website.
Step 2: Ideation & Exploration
Ideate
User Flow -
Three primary design concepts emerged:
Modal confirmation
Sticky cart bar
Slide-out drawer
Ideation -
Model Confirmation
Description:
This approach triggers a pop-up modal at the center of the screen each time a product is added. The modal includes a short confirmation message and offers two options: “Go to Cart” or “Continue Shopping.”
Pros:
Clear visual feedback that confirms the action
Familiar to most users
Offers a direct path to checkout
Cons:
Interrupts browsing flow
Requires manual dismissal before continuing
Can feel repetitive when adding multiple items
Disruptive on smaller mobile screens
Sticky Cart Bar
Description:
A persistent horizontal bar appears at the bottom of the screen after an item is added. It shows a cart summary, including subtotal and item count, and includes a checkout button or link to the full cart.
Pros:
Less disruptive than a modal
Keeps checkout accessible without leaving the page
Responsive and mobile-friendly
Cons:
Limited space to show meaningful cart details
May be too subtle for some users to notice
Doesn’t show which specific item was added
Could conflict visually with other page elements
Slide-out Drawer
Description:
A cart drawer slides in from the right side of the screen (or bottom on mobile) after a product is added. It shows the item just added, the full contents of the cart, the subtotal, and provides a prominent checkout CTA. Users can close the drawer to continue shopping.
Pros:
Maintains product browsing context
Offers immediate access to full cart details
Scalable for additional features like quantity adjustments or bundles
Feels modern and intuitive
Cons:
Slightly more complex to implement
Requires thoughtful mobile design and accessibility support
Needs testing to avoid overwhelming the user visually
Decision Matrix -
Conclusion -
The slide-out drawer emerged as the strongest solution, it offers clarity without interruption, scales with user needs, and provides a better balance between feedback and flow. It aligned well with both user expectations and business goals, especially for customers adding many items in a single session.
