Guitar Center Product Detail Page

The Guitar Center e-commerce site required redesign to consolidate the currently separate desktop and mobile experiences. I joined the PDP project that has been in progress for 6 months, and within the 9 months I was at Guitar Center, we were able to get stakeholder buy-in for our design and into production.

Problem

How can we increase the conversion rate of our product detail page?

Role

UX Designer

Time

8 months

Solution

To redesign the product detail page to address what's causing our customers friction when making a purchasing decision.

Team

  • Jason Wade (UX Director)
  • Keith French (Sr. UX)
  • Arman Akbari (PM)
  • Narayani Kashyap (PM)

Background

When I joined Guitar Center, the team was already in the middle of redesigning the product detail page as part of their website optimization roadmap. Initial research on the overall customer journey had already been done, but key features had yet to be redesigned. I onboarded quickly, and familiarized myself with the Guitar Center processes and styles, as well as general ecommerce UX best practice guidelines through Baymard and NNG reports.

For this project, I researched and designed several key features of product detail page, including the store locater, stock availability, and wish list functionality. I also worked collaboratively with our senior UX designer, Keith, on the page styles, prototype, and production hand-offs. For the features I took lead in, I created the user research, synthesis, and wireframes.

Research

Due to strict timelines and owning multiple key features, I had to split between doing qualitative user research and market research of various industry of e-commerce websites that share that have physical stores that do both pickup and delivery. I also did best practice research using Baymard and NNG UX guidelines. To better understand how Guitar Center customers interact with our site, we did evaluative usability tests on the store picker and PDP.

I created and ran unmoderated evaluative usability tests through UserTesting. I synthesized research sessions by listening to each session and coding the interviews by comments and sentiments using tags on the Usertesting platform.

Three main insights:

  1.  Participants had a hard time distinguishing between items that can be shipped and items available in store.
  2. The highest priority information for participants buying for pickup is the item availability, distance from them, and store hours.
  3. Their willingness to travel for an item is dependent on the value of an item (ie. 100 miles for a limited quantity guitar vs 20 miles for accessories).
guitar-center-delivery-load

Participants were confused about the in-store availability because the shipping and delivery information took up to 10s to load.

Store Locater

Product  Page

Based on the findings from the user research, and our stakeholder reviews, I created hi-fidelity wireframes.

Three key features of the new layout includes:

  1. A clear indicator of their current store.
  2. A way to change the pickup location based on where they lived.
  3. A way to filter out and show only stores that had the item available.
guitar-center-store-locater-new-1

Global

  1. The ability to set a store as home store, which can let users filter inventory by store.
  2. Prioritize store address and directions.
  3. Show which stores are currently open.
High fidelity mockups of the Guitar Center global store locator, and the global store locator with store details expanded.

Product Availability

For product availability, I conducted multiple interviews and reviews with the business stakeholders because they had a deeper knowledge about product codes, which dictate everything from availability to special delivery circumstances. With this information, I was able to design a system that covered all of the various instances.


Three key features of the new layout includes:

  1. Standardize availability language, instead of using 'In Stock' for delivery and 'Available' for pickup.
  2. Give availability for both shipping and pickup before the 'Add to Cart' button.
Stock-availability-2
Stock-availability-–-1
Stock-availability-–-2
Stock-availability-–-3
Stock-availability-–-4
Stock-availability-–-5
Stock-availability-–-6

Add to List

Although the wishlist feature was not considered the priority for the PDP, because it's core functionality lived under accounts, I included it as part of the customer's purchasing journey. It would be developed in phase 2 of the website redesign, along with other accounts feature.

UX Audit

The initial 'Add to List' feature did not fit with the browsing flow of the product detail page. It was also gated behind an account creation, which lowered the customer's likelihood of using it.

Add-to-List-old

User Flow

In order to make the most out of the 'Add to List' feature, I made a few flow recommendations.

  1. Stop gating users when they want to save an item to a list.
  2. Create a temporary list that allows users preferences to be saved via cookie.
  3. Encourage users to create accounts if they wish to save or share lists.
Task flow showing a decision tree for the add to list function.

Wireframe

I created a wireframe for how the temporary guest list would encourage users to sign up for an account.

Wishlist-Guest-User-Default-List

Outcome

The new PDP has been implemented and is already started showing great results. The success of the PDP and new design system allowed other key projects, such as the new header to move forward. The following are a few key analytics a month after implementation:

+12.8%

Conversion Rate

+19.6%

Revenue Per Visit

+5.9%

Average order value post discount

Previous
Local Edition – Website Redesign
Next
Guitar Center Gift Cards

Designed by Eileen Chi.
©2024. All rights reserved.