Optimizing Cart Experience

Shopping Cart Redesign

At a Glance

I shaped the strategy and design for Guitar Center's website and app Cart in collaboration with our lead designer, resulting in a more intuitive experience that improved click-through rates to Checkout and ultimately improved the overall usability. By optimizing the Cart's mobile experience, I made it easier for mobile customers to complete their purchases.

Timeframe
5 Months
Methods
Responsive Design, Experience Design, Visual Design, Research
Platforms
Web, Mobile
Classification
B2C
Objective

What is the goal?

Leadership informed us that there's been a significant drop-off from Cart to Checkout through analytics. This was a critical problem that needed to be solved because the company's main source of revenue has been their e-commerce website ever since Covid-19. The goal was to figure out the reasons why customers aren't clicking through to checkout and explore opportunities to optimize the Cart to help boost sales.

Key Objectives

  • Increase Click-Through Rate – Boost user confidence and trust in the purchasing process

  • Opportunities for Cross-Selling – Have the ability to suggest complementary products

  • Optimize for Mobile – Ensure seamless, intuitive, and efficient experience for mobile devices

  • Improve Usability – Make it easy to apply coupons, change item quantity, add coverage, etc…

  • Refine Visual Hierarchy – Provide a clear and transparent summary of their order

For Context

Guitar Center is a household name in the musical instrument retail industry. However, the company has been slow to adapt in the digital e-commerce space, therefore the company tends to fall behind when it comes to updating pages on their website due to a lack of resources.

Before: Cart
Discovery

Research, Explore, and Understand

I started my research process by meeting with stakeholders to align on key business objectives and requirements, ensuring the redesign would meet their needs and drive meaningful outcomes.

In order to understand where the drop off and pain points were, I conducted a usability test to gather quantitative and qualitative data from users. I observed how they interacted with the cart as they answered questions and completed a set of tasks.

To guide the Cart redesign, I conducted a comparative analysis using Baymard Institute's benchmarks 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.

Key Findings

  • 70% of users prefer Input Stepper (+, –) Buttons for changing product quantity over a Dropdown or Numeric Field

  • Most common action that users perform in the Cart is removing a product they no longer want

  • Some users had a difficulty locating and reading information due to it being too small and having poor structure

  • Touch target of a few buttons were missed by a few users due to its size

  • Coupon Code Button lacked visibility, therefore users had a hard time locating it

Usability Testing
Design Audit
Ideation & Design

From Concept to Reality

After talking to stakeholders and doing the research, I had a good baseline on where I needed to start and which areas needed the most attention in order to optimize and improve the cart experience.

It was also obvious to my team and I that the entire cart page looked outdated compared to other e-commerce sites. The components and patterns used were not up-to-date with current design system as well.

Clarity and Visibility

A well-designed Cart should prioritize information clarity and readability, cohesive architecture, and visual hierarchy. This includes clear product information that's easy to read, sufficient white space, and buttons with great visibility. I redesigned the Cart with these key aspects in mind to ease the stress for customers during the purchasing process.

Information Architecture

Mobile Optimization

According to the Baymard Institute, approximately 73% of online shoppers use a mobile device to make purchases, a mobile-optimized Cart was essential to prevent frustration, cart abandonment, and lost sales. To address this, I optimized the page by making sure the information was easy to locate and read even on a smaller screen, made sure touch targets were large enough to prevent any tapping issues, and I added a sticky Checkout Button to the bottom right of the screen, making it easy for users to access checkout from anywhere on the page.

Mobile View

Save for Later

I implemented a "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.

Cross-Selling Opportunities

Leadership wanted to leverage the cart page as an opportunity to cross-sell products to enhance the shopping experience and increase average order value. To achieve this, I added a section for a Product Carousel that showcases complementary products that users can check out.

Tablet View w/ Carousel and Save for Later

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.

Order Summary Variations
Challenges

Overcoming Obstacles

After launching the redesigned cart page, the analytics team reported that we haven't met the click-through rate improvement, in relation to business goals. To investigate, our team conducted a survey to identify pain points that's preventing users from proceeding to checkout.

  • The results revealed that the Shipping Estimator was a major pain point, with users finding it frustrating to enter both state and zip code, which added unnecessary complexity to the process.

  • Users were reluctant to sign in to save items for later, as it created unnecessary effort and friction, particularly since they were required to sign in with each visit.

After launching the redesigned cart page, the analytics team reported that we haven't met the click-through rate improvement, in relation to business goals. To investigate, our team conducted a survey to identify pain points that's preventing users from proceeding to checkout.

  • The results revealed that the Shipping Estimator was a major pain point, with users finding it frustrating to enter both state and zip code, which added unnecessary complexity to the process.

  • Users were reluctant to sign in to save items for later, as it created unnecessary effort and friction, particularly since they were required to sign in with each visit.

After launching the redesigned cart page, the analytics team reported that we haven't met the click-through rate improvement, in relation to business goals. To investigate, our team conducted a survey to identify pain points that's preventing users from proceeding to checkout.

  • The results revealed that the Shipping Estimator was a major pain point, with users finding it frustrating to enter both state and zip code, which added unnecessary complexity to the process.

  • Users were reluctant to sign in to save items for later, as it created unnecessary effort and friction, particularly since they were required to sign in with each visit.

After launching the redesigned cart page, the analytics team reported that we haven't met the click-through rate improvement, in relation to business goals. To investigate, our team conducted a survey to identify pain points that's preventing users from proceeding to checkout.

  • The results revealed that the Shipping Estimator was a major pain point, with users finding it frustrating to enter both state and zip code, which added unnecessary complexity to the process.

  • Users were reluctant to sign in to save items for later, as it created unnecessary effort and friction, particularly since they were required to sign in with each visit.

After launching the redesigned cart page, the analytics team reported that we haven't met the click-through rate improvement, in relation to business goals. To investigate, our team conducted a survey to identify pain points that's preventing users from proceeding to checkout.

  • The results revealed that the Shipping Estimator was a major pain point, with users finding it frustrating to enter both state and zip code, which added unnecessary complexity to the process.

  • Users were reluctant to sign in to save items for later, as it created unnecessary effort and friction, particularly since they were required to sign in with each visit.

Recommendations

At the time, the design and dev team didn't have the bandwidth to make any updates, therefore my team documented recommendations for future improvements to address the identified issues.

To simplify the Shipping Estimator, we proposed removing the State Dropdown to reduce user friction. However, for the "Save for Later" feature, we were constrained due to stakeholder requirements, which mandate account creation for new customers, limiting our ability to make significant changes to this functionality. 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

In Closing

While we made some improvements to the Cart, our post-launch analysis revealed a couple areas that need improvement, particularly with the Shipping Estimator and "Save for Later" feature. With all the efforts put into redesigning the cart experience, cart abandonment rate from 78% to 70% (a 10% decrease) and driving business growth through improved engagement.


By continuing to prioritize user experience and addressing pain points, there's always opportunity to improve it and drive business success. In conclusion, the Cart redesign enhanced usability, reduced friction points, and increased conversions.

Actionable Learnings

Although we couldn't implement all the desired changes post-launch, our research and recommendations have laid the groundwork for future improvements. This project demonstrates the importance of ongoing iteration and refinement in the design process, as well as the need for collaboration between stakeholders to balance business goals with user needs.

Back to Top

Go Home