Boosting Cart Usability
The Guitar Center's Cart Experience
Background
Guitar Center is the largest US retailer of musical instruments both in stores and online through website and mobile app.
When I joined the company, it was in the midst of a major digital upgrade, including an updated logo, redefined design system, and other changes affecting the overall brand. This case study focuses on the 'Cart' redesign for the company's e-commerce website.
Timeframe
4 Months
Platforms
Web, Mobile
Classification
B2C
Platform
Use Research, Prototyping, Usability Testing, Information Architecture, Strategy
Problem
Analytics showed a significant drop-off from Cart to Checkout, a critical issue for Guitar Center's website, since e‑commerce has been the company’s primary revenue source since COVID‑19. Also, the components and patterns being used on the page were not up-to-date with current design system as well.
Goal
Redesign the cart to boost click‑through rate by improving usability, optimizing the mobile experience, and clarifying the order summary while collaborating closely with another designer handling 'Checkout' to ensure cohesive, consistent designs on both pages.
Before: Cart Page
Side Note
Guitar Center is a household name in music retail but lags in e‑commerce, sometimes falling behind on site updates due to limited resources.
Discovery & Research
Stakeholder Meeting
I began discovery by meeting stakeholders to align on business goals and obtain cart metrics so the redesign targeted the right KPI (cart abandonment percentage) and prioritized changes that would drive measurable outcomes.
Testing
I ran an unmoderated test with five participants to measure task completion rates and time-on-task, uncover user frustrations in the current experience, and collect quantitative benchmarks (difficulty ratings) I could use to compare after the redesign.
Usability Test
Group Demographic
Total Participants: 5 (2 Desktop, 3 Mobile)
Age: 18–70
Income: $30,000+
Country: United States
Shop for an electric guitar and a DJ software, add it to your cart.
Go to your cart, and enter your zip code and select a store.
Add a 24-Month Pro Coverage for the guitar.
Increase the quantity for the guitar from 1 to 3.
State how much the Pro Coverage costs for all 3 guitars.
See if there are any shipping notices that may apply for the DJ software.
Remove the DJ software from your cart.
Apply the coupon code "GCTEST" and proceed to checkout.
Interviews
I conducted user interviews to uncover needs, motivations, and pain points that analytics missed and to gather qualitative feedback about confusion and friction, producing actionable insights and user quotes we used to prioritize design changes.
"I'll add things to my cart instead of saving them on my wishlist."
User Interviews
Group Demographic
Total Participants: 5 (2 Desktop, 3 Mobile)
Age: 18–70
Income: $30,000+
Country: United States
Name three e-commerce websites where you shop at the most.
On the Cart page, are any elements (buttons, information, etc.) unclear, hard to read, or confusing?
How does the information layout and order feel for you?
Tell me about your experience changing quantities, removing items, or applying a coupon.
Do you prefer (+ / −) controls for changing quantity over a dropdown?
Based on past experiences, what makes you abandon a cart?
When you find something you like and have added it to your cart but aren’t ready to make the purchase, what do you usually do next?
Do you have any other concerns or suggestions?
Comparative Analysis
Using Baymard Institute's benchmarks, I did a comparative analysis to evaluate the Cart and Checkout experiences of top e-commerce sites in the US, identifying industry standards, best practices, and areas for improvement to optimize the Cart.
Figjam Board
Key Findings & Feedback
2/5 users disliked having to click 'Update' to apply quantity changes, noting it felt like an unnecessary extra step that interrupted their flow
3/5 users preferred input stepper (+ / −) controls for changing quantity over a dropdown for faster adjustments and instant feedback
3/5 users found difficulty finding where to apply coupon code
2/5 users mentioned that they struggled to locate and read information because it was poorly structured
2/5 users reported using the Cart page to compare products they're considering, citing convenient side‑by‑side visibility of items and totals
Users reported some buttons and links were too small and made it difficult to tap on mobile
Design & Ideation
Architecture & Layout
I began ideation by designing the Cart’s information architecture and worked closely with one of our developers to ensure no required elements were missed or overlooked on the page. Prioritizing clarity, cohesive structure, and visual hierarchy was very important. This included clear, easy‑to‑read product information, ample whitespace, and highly visible CTA buttons.
Mobile Optimization
According to the Baymard Institute, approximately 73% of online shopping is done on with a mobile device, therefore, a mobile-optimized Cart was essential to prevent lost sales. I optimized the cart by making information easy to scan on small screens, enlarging touch targets to prevent missed taps, and adding a sticky checkout button at the bottom‑right so users can start checkout from anywhere on the page.
Cross-Selling
Cross-selling products in Cart was added to enhance the shopping experience and increase average order value. This was done by introducing a Product Carousel that showcases complementary products that users can check out towards the bottom of the page.
Save Item
I added a new "Save for Later" feature, which enables users to move items they're not ready to purchase to a separate area, keeping them in their cart without cluttering the primary section of the cart. This feature allows users to easily access and reconsider these products at a later time, increasing the likelihood of future sales.
Order Summary
To ensure a seamless implementation, I've designed multiple variations of the Order Summary section to account for different scenarios. This approach enables the developers to handle various scenarios, reduces design inconsistencies, and results in a more robust cart experience.
Within the Order Summary, I've carefully laid out the information based on level of importance, ensuring that the most critical details, such as coupon code, shipping, savings, and total cost, are prominently displayed and easily accessible.
Validating
I tested the high-fidelity prototype to verify that the visual design, interaction details, and flows worked as intended with real users before development began, to catch usability issues early, validate design decisions, and reduce implementation rework.
Challenges
Sign-in Friction
After launch, we ran a test and survey on the new design to find any issues. Feedback showed users without accounts resisted signing in to use the Save for Later feature; having to sign in on each visit added friction and discouraged checkout.
At the time, our developers and I lacked bandwidth to implement changes, so I documented removing the sign‑in requirement as a priority for future updates to address the issue.
Side Note
It's also worth mentioning that there may be other reasons why users aren't continuing to checkout. Users may be using the cart as a staging area to compare products or use as a wishlist if they don't have an account.
Conclusion
Despite the unresolved 'Save for Later' feature due to constraints, the redesigned cart produced positive results for cart abandonment. The new design was A/B tested for 4 weeks before official launch and produced a positive increase of 12% (64% → 52%). This uplift increased completed purchases and improved user engagement with the cart and checkout flow, validating the design changes as drivers of business growth and informing the next technical priorities.
Actionable Learnings
I learned to work side‑by‑side with developers throughout this complex project, which accelerated execution and strengthened cross‑team collaboration—showing that continuous iteration and close partnership drive the best outcomes for both users and the business.