Redesigning Therabody's mini cart: Enhancing usability and streamlining checkout

STEP ONE

Research & inspiration

I first audited the current cart page and identified key improvement areas:

Upsells were positions below the fold, making them easy to miss.

Adding items to the cart redirected users off the PDP, causing friction.

No visible indicator for free shipping eligibility.

No modern payment options like Affirm or Klarna, key for a pricey product.

I conducted a competitive analysis of leading eCommerce sites to gather inspiration and identify best practices. These examples informed my vision for a streamlined, high-performing cart experience.

Therabody.com original cart page:

STEP TWO

Ideating and collaboration

I facilitated critique sessions with stakeholders to gather feedback and prioritize solutions. From these sessions, I iterated on multiple layouts that directly addressed key pain points, such as upsell visibility and cart usability.

I developed a phased implementation plan that delivered immediate wins, like improved cross-sell placement, while laying the groundwork for future enhancements, such as dynamic bundling options.

STEP THREE

Handling complex use cases

I designed for diverse scenarios, ensuring the cart handled:

Default State

Included a new placement for the upsell engine to improve visibility.

Bundles and Subscriptions

Adapted layouts for the TheraOne CBD line.

Personalized Products

Supported Theragun PRO engravings.

Shipping Threshold Indicator

Encouraged users to add items to meet free shipping requirements.

Empty Cart and Error Handling

Designed intuitive empty cart and error messages to reduce user frustration.

Gift with Purchase

Adding a promo code

STEP FOUR

Engineering handoff

I created annotated designs in Figma, documenting all edge cases, interactions, and repeated components to ensure a smooth handoff. To streamline development, I organized the cart redesign almost as a mini design system, enabling engineers to scale the solution efficiently.

I collaborated with the QA engineer to test responsiveness and functionality, ensuring a seamless user experience across devices.

STEP SIX

Monitor post-launch and iterate

Post-launch data revealed that some users accidentally removed items from their cart instead of closing the cart drawer. To address this, I:

• Moved the close button to the right and changed it to an “X” icon.
• Adjusted the remove button’s placement and styling to avoid confusion.
• Updated item totals for clarity, reducing cognitive load.

These changes were implemented quickly and significantly improved the cart's usability.

Design principles applied