Responsive Web · Platform Redesign · 2022
Responsive Web · Platform Redesign · 2022
Redesigning Therabody's mini cart: Enhancing usability and streamlining checkout
Redesigning Therabody's mini cart: Enhancing usability and streamlining checkout
Redesigning Therabody's mini cart: Enhancing usability and streamlining checkout
I transformed Therabody’s shopping cart into a responsive mini-cart, simplifying the user experience, increasing Average Order Value (AOV), and improving the overall shopping flow.
I transformed Therabody’s shopping cart into a responsive mini-cart, simplifying the user experience, increasing Average Order Value (AOV), and improving the overall shopping flow.
I transformed Therabody’s shopping cart into a responsive mini-cart, simplifying the user experience, increasing Average Order Value (AOV), and improving the overall shopping flow.
Problem Space
Therabody relied heavily on its eCommerce platform for revenue, but the outdated shopping cart experience created unnecessary friction. Users were redirected off the PDP after adding items to the cart, upsells were buried at the bottom of the page, and there was no visibility into shipping thresholds, leading to missed opportunities for upselling and increased cart abandonment.
Therabody relied heavily on its eCommerce platform for revenue, but the outdated shopping cart experience created unnecessary friction. Users were redirected off the PDP after adding items to the cart, upsells were buried at the bottom of the page, and there was no visibility into shipping thresholds, leading to missed opportunities for upselling and increased cart abandonment.
Therabody relied heavily on its eCommerce platform for revenue, but the outdated shopping cart experience created unnecessary friction. Users were redirected off the PDP after adding items to the cart, upsells were buried at the bottom of the page, and there was no visibility into shipping thresholds, leading to missed opportunities for upselling and increased cart abandonment.
Solution
I designed a responsive mini-cart drawer to streamline the functionality, showcase upsells prominently, and incorporate features like a shipping threshold indicator and modern payment options.
I designed a responsive mini-cart drawer to streamline the functionality, showcase upsells prominently, and incorporate features like a shipping threshold indicator and modern payment options.
I designed a responsive mini-cart drawer to streamline the functionality, showcase upsells prominently, and incorporate features like a shipping threshold indicator and modern payment options.
Impact
While exact metrics weren’t tracked post-launch, the redesign was guided by eCommerce best practices known to:
Improve usability by keeping users on the PDP.
Boost AOV by increasing upsell visibility.
Enhance user engagement through a seamless, intuitive shopping experience.
While exact metrics weren’t tracked post-launch, the redesign was guided by eCommerce best practices known to:
Improve usability by keeping users on the PDP.
Boost AOV by increasing upsell visibility.
Enhance user engagement through a seamless, intuitive shopping experience.
While exact metrics weren’t tracked post-launch, the redesign was guided by eCommerce best practices known to:
Improve usability by keeping users on the PDP.
Boost AOV by increasing upsell visibility.
Enhance user engagement through a seamless, intuitive shopping experience.
Timeframe
~1-2 months
~1-2 months
~1-2 months
~6 months
Role
Senior Product Designer
Senior Product Designer
Senior Product Designer
Team
Product Owner
Head of Digital
Outsourced Engineering
QA Engineer
Product Owner
Head of Digital
Outsourced Engineering
QA Engineer
Product Owner
Head of Digital
Outsourced Engineering
QA Engineer
Revenue
$400MM+
$400MM+
$400MM+
Company size
500+
500+
500+
STEP ONE
STEP ONE
Research & inspiration
Research & inspiration
Research & inspiration
I first audited the current cart page and identified key improvement areas:
I first audited the current cart page and identified key improvement areas:
I first audited the current cart page and identified key improvement areas:
Upsells were positions below the fold, making them easy to miss.
Upsells were positions below the fold, making them easy to miss.
Upsells were positions below the fold, making them easy to miss.
Adding items to the cart redirected users off the PDP, causing friction.
Adding items to the cart redirected users off the PDP, causing friction.
Adding items to the cart redirected users off the PDP, causing friction.
No visible indicator for free shipping eligibility.
No visible indicator for free shipping eligibility.
No visible indicator for free shipping eligibility.
No modern payment options like Affirm or Klarna, key for a pricey product.
No modern payment options like Affirm or Klarna, key for a pricey product.
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.
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.
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:
Therabody.com original cart page:
Therabody.com original cart page:
STEP TWO
Ideating and collaboration
Ideating and collaboration
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.
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.
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
STEP THREE
Handling complex use cases
Handling complex use cases
Handling complex use cases
I designed for diverse scenarios, ensuring the cart handled:
I designed for diverse scenarios, ensuring the cart handled:
I designed for diverse scenarios, ensuring the cart handled:
Default State
Default State
Included a new placement for the upsell engine to improve visibility.
Included a new placement for the upsell engine to improve visibility.
Bundles and Subscriptions
Bundles and Subscriptions
Adapted layouts for the TheraOne CBD line.
Adapted layouts for the TheraOne CBD line.
Personalized Products
Personalized Products
Supported Theragun PRO engravings.
Supported Theragun PRO engravings.
Shipping Threshold Indicator
Shipping Threshold Indicator
Encouraged users to add items to meet free shipping requirements.
Encouraged users to add items to meet free shipping requirements.
Empty Cart and Error Handling
Empty Cart and Error Handling
Designed intuitive empty cart and error messages to reduce user frustration.
Designed intuitive empty cart and error messages to reduce user frustration.
Gift with Purchase
Gift with Purchase
Adding a promo code
Adding a promo code
STEP FOUR
Engineering handoff
Engineering handoff
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 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 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.
I collaborated with the QA engineer to test responsiveness and functionality, ensuring a seamless user experience across devices.
I collaborated with the QA engineer to test responsiveness and functionality, ensuring a seamless user experience across devices.
STEP SIX
STEP SIX
Monitor post-launch and iterate
Monitor post-launch and iterate
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.
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.
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
Design principles applied
Design principles applied
Visual Clarity
Visual Clarity
Visual Clarity
Consistent hierarchy and accessibility ensured intuitive navigation.
Consistent hierarchy and accessibility ensured intuitive navigation.
Consistent hierarchy and accessibility ensured intuitive navigation.
Seamless Shopping
Seamless Shopping
Seamless Shopping
The mini-cart allowed users to browse, add items, and view upsells without leaving the PDP.
The mini-cart allowed users to browse, add items, and view upsells without leaving the PDP.
The mini-cart allowed users to browse, add items, and view upsells without leaving the PDP.
User Psychology
User Psychology
User Psychology
Anchoring effects and progressive disclosure guided users toward confident purchasing decisions.
Anchoring effects and progressive disclosure guided users toward confident purchasing decisions.
Anchoring effects and progressive disclosure guided users toward confident purchasing decisions.
Interactive Ease
Interactive Ease
Interactive Ease
Clear feedback and error prevention enhanced the shopping experience.
Clear feedback and error prevention enhanced the shopping experience.
Clear feedback and error prevention enhanced the shopping experience.
Keep reading
Keep reading
Keep reading
More examples of design that drives results.
More examples of design that drives results.
More examples of design that drives results.
Redesigning profiles to increase retention and revenue
Helped customers track entries and the impact of their donations, increasing sign ins and sign ups by over 40% and increased revenue by 580k in just two months.
Boosting Gusto's signup funnel via iterative testing
By introducing a password-free lead form and tailored content, I increased visits converting to leads by 15%, driving measurable growth for the business.
Redesigning profiles to increase retention and revenue
Helped customers track entries and the impact of their donations, increasing sign ins and sign ups by over 40% and increased revenue by 580k in just two months.
Boosting Gusto's signup funnel via iterative testing
By introducing a password-free lead form and tailored content, I increased visits converting to leads by 15%, driving measurable growth for the business.
Redesigning profiles to increase retention and revenue
Helped customers track entries and the impact of their donations, increasing sign ins and sign ups by over 40% and increased revenue by 580k in just two months.
Boosting Gusto's signup funnel via iterative testing
By introducing a password-free lead form and tailored content, I increased visits converting to leads by 15%, driving measurable growth for the business.
Redesigning profiles to increase retention and revenue
Helped customers track entries and the impact of their donations, increasing sign ins and sign ups by over 40% and increased revenue by 580k in just two months.
Boosting Gusto's signup funnel via iterative testing
By introducing a password-free lead form and tailored content, I increased visits converting to leads by 15%, driving measurable growth for the business.
Let's connect
Open to new projects, collaborations, and conversations.
© 2024 – Jessica Goldman Design
Crafting impactful design solutions with empathy and strategy.
Let's connect
Open to new projects, collaborations, and conversations.
© 2024 – Jessica Goldman Design
Crafting impactful design solutions with empathy and strategy.
Let's connect
Open to new projects, collaborations, and conversations.
© 2024 – Jessica Goldman Design
Crafting impactful design solutions with empathy and strategy.
Let's connect
Open to new projects, collaborations, and conversations.
© 2024 – Jessica Goldman Design
Crafting impactful design solutions with empathy and strategy.
Let's connect
Open to new projects, collaborations, and conversations.
© 2024 – Jessica Goldman Design
Crafting impactful design solutions with empathy and strategy.