Elevating Product Discovery
The Guitar Center App
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 their e-commerce app redesign that's part of the brand upgrade.
Timeframe
3–4 Months
Platform
Native App
Classification
B2C
Platform
Use Research, Information Architecture, Interaction Design, Prototyping, Usability Testing
Problem
The app had been stuck in a time warp since its launch nearly five years earlier and was starting to fall behind modern e‑commerce standards and no longer satisfying customers' needs. Leadership also reported that sales via the Guitar Center app were declining.
Goal
Redesign the shopping experience for the app, including navigation, product listing pages, and product detail pages, in collaboration with other designers, with a modern, intuitive UI and updated brand elements to improve usability and boost in-app purchases.
Before: Product Browsing Flow
Side Note
The project arrived with about a 3‑month deadline and required building new app-ready components because the existing design system couldn't be used.
Discovery & Research
Audit
In collaboration with the other designers in my team, we thorough examination of the existing Guitar Center mobile app, capturing screenshots of every existing screen in order to identify usability issues, discover opportunities, and help prioritize what needs the most attention.
Testing
I ran an unmoderated test for the current mobile app with five participants to capture quantitative data for task completion and time-on-task, reveal user frustrations in the current flow, and produce quantitative benchmarks (difficulty ratings) we could measure after the redesign.
Usability Test
Group Demographic
Total Participants: 5
Age: 18–50
Income: $30,000+
Country: United States
All tasks below must be done from the starting page and the user of the search function is NOT allowed:
Find an electronic drum kit that made by Zildjian that is on sale
Find a solid body electric guitar that is on sale for less than $750
Find a speaker set to be used for a microphone
Find any solid body electric guitar that's newly released
All tasks below must be done from the starting page and the user of the search function is allowed:
Quickly find for a DJ controller made by Traktor
Interviews
I conducted user interviews to uncover needs, motivations, and pain points not visible in analytics, and to collect qualitative feedback on confusion and friction, yielding actionable insights and raw user quotes for prioritization.
"This app looks and feels kind of outdated compared to the other (e-commerce) ones that I usually use."
User Interviews
Group Demographic
Total Participants: 5
Age: 18–50
Income: $30,000+
Country: United States
Name three e-commerce apps where you shop at the most.
While browsing through the different product categories, are there any buttons, links, or any other elements that immediately comes off as confusing?
Does the organization of the various categories match your expectations? If not, please explain.
Do you find it easy to browse and scan through the different products on the listing pages?
Do you have any other concerns or suggestions?
Comparative Analysis
Using Baymard Institute's benchmarks, I performed a comparative analysis to learn how indirect competitors solve similar problems, uncover industry best practices and gaps, set realistic usability benchmarks, and identify opportunities to differentiate and prioritize improvements.
In order to further my knowledge, I also reviewed a few reports on online shopping from trusted sources such as, Interaction Design Foundation and Nielsen Norman Group to gain more insights.
Key Findings & Feedback
3/5 users did not use the search feature to find a product by name, instead relied on navigation and categories for the first task
2/5 users failed to find a specific product type through category menu, indicating category grouping and labeling issues
2/5 users took longer than a minute to locate a newly released item
Two users suggested that seeing an image next to each category title to improve product findability
Two users said the information inside the product listings card felt cramped and did not make good use of the available space
Design & Ideation
Improving Category Navigation
During usability testing, I noticed some users took awhile to find the right category I had them look for. According to a cognitive psychology study by Baymard Institute, users process images faster than text, making icons or images a powerful way to improve navigation speed. To solve this issue, I went ahead and added a small image next to each one on the menu to enhance visual recognition.
Search Efficiency
Research from the Baymard Institute shows that 40–60% of users go directly to the search bar when looking for a specific product. Given its importance, I knew this deserved proper attention.
On the old design, the Search button wasn't present on the Home page (not sure why), therefore, it was obvious that it had to be added on there. I also introduced the "Recent" and "Saved" search feature. Recent searches help users quickly revisit past queries, while Saved searches retain applied filters for easy access, but only available when logged into an account. Lastly, predictive searching was also added to improve efficiency.
Streamlining Filtering
After comparing with other e-commerce apps, I updated the filtering experience by adding filter chips. These appear when a filter is applied, allowing users to remove them easily with a tap.
As mentioned earlier, the human brain processes images, like icons, faster than text. With this in mind, I redesigned the Filter Button by updating the label and adding an icon for faster recognition.
Optimizing Product Display
As I was designing the PLP (Product Listing Pages), I worked closely with another designer responsible for the PDP (Product Detail Pages) to ensure our designs remained cohesive and consistent.
A key change I made was how products are showcased. Nielsen Norman Group eye‑tracking shows users scan in Z/F patterns, and usability feedback indicated a strong preference for larger thumbnails. Switching to a 2‑column grid creates room for larger images and clearer information hierarchy, which reduces visual clutter, speeds comparison, and improves product discovery and decision-making.
Validating
Before handing off the new designs to our dev team, I ran another usability test with a 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
Design Parameters
Since the app relied on outdated backend technology, adding a wishlist button to product cards in the grid wasn’t feasible. To still provide the feature, I implemented wishlist functionality on Product Detail Pages only and documented the limitation and a recommended backend update for future expansion.
Framework Limitations
I ran into some technical framework limitations that prevented me from making some major user flow modifications. My original idea involved a 3-level product discovery flow with content-switching capabilities in the grid to make discoverability more efficient. However, developers stated it wasn’t feasible, so I had to pivot to a 2-level flow instead to stay within the set parameters.
Abandoned Concept
Conclusion
During the last test conducted, all users rated using the Search feature a 5 (Excellent), up from 60% previously. Users' ability to type out and search for a product was faster with the predictive search upgrade. 100% of users were successful in navigating through product categories to locate a specific product without any confusion.
After a month of launching the redesigned app, the click-through rate for listing pages (PLP) to product pages (PDP) rose from 47% to 56% with all enhancements and updates done to the entire shopping experience.
Redesigning the shopping experience came with its challenges, but the effort paid off, leading to an impactful improvement to Guitar Center's mobile app.
Actionable Learnings
With only three months to deliver, this project pushed me to work well under pressure while collaborating with multiple stakeholders.
The most important thing I should have done was ask developers better questions about the technical framework and existing architecture to ensure my designs were buildable and reduce back‑and‑forth.
