Guitar Center Product Detail Page

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.

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).

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

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.

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.

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.

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

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.

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: