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.
How can we increase the conversion rate of our product detail page?
UX Designer
8 months
To redesign the product detail page to address what's causing our customers friction when making a purchasing decision.
Team
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:
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:
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:
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 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.
In order to make the most out of the 'Add to List' feature, I made a few flow recommendations.
I created a wireframe for how the temporary guest list would encourage users to sign up for an account.
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
Designed by Eileen Chi.
©2024. All rights reserved.