Elevating Product Discovery
Shop Experience Redesign
At a Glance
Our team was responsible for revamping Guitar Center's mobile e-commerce app and I was tasked to redesign the Shop experience. As a result, I enhanced how customers discover products and also streamlined their shopping journey.
Timeframe
3–4 Months
Methods
Experience Design, Visual Design, Research
Platform
Native App
Classification
B2C
Objective
What is the goal?
The app had been stuck in a time warp since its launch over four years ago, and it was really starting to show compared to what the e-commerce industry was putting out. Also, leadership informed us that the Guitar Center app usage on a decline. The goal was to create a more modern and intuitive design that would satisfy customers needs.
Key Objectives
Optimize Findability – Help customers discover products and scan content quickly
Refine UI – Give the user interface a new and consistent look
Streamline Navigation – Reduce friction and improve the flow of movement
Enhance Usability – Ensure the entire experience is more intuitive
For Context
This project emerged with little notice, with a tight deadline of approximately 3 months to deliver. On top of that, we had to work with a rigid design system that wasn't fully capable of being used on a native app, which required us to create new components from scratch in order to bring this project to the finish line.
Before Redesign
Discovery
Research, Explore, and Understand
I started my research process by meeting with stakeholders to discuss business goals and requirements that would shape the redesign.
Using Baymard Institute's benchmarks, I performed a comparative analysis to assess the performance of top e-commerce sites in the US. The results of this analysis provided valuable information on industry standards and best practices.
To get feedback from real users, I conducted usability tests to gather quantitative data from users and also gathered qualitative insights from user surveys.
To finish off my research, I read reports from trusted sources like Baymard Institute, Interaction Design Foundation, and Nielsen Norman Group, which helped me learn from others's case studies.
Key Findings
40% of users had difficulty locating the search button
40% of users exceeded the time limit to type out and search for a product name they were given
30% of users were unsuccessful in navigating through product categories in order to locate a specific type product
Users prefer to have imagery next to category titles to help with recognition
Users liked having an image thumbnail large enough for them to see a visual of the product without having to click it
Users valued product cards with good text hierarchy to improve readability
Usability Testing
Comparative Analysis
Ideation & Design
Not Reinventing the Wheel
Due to the time constraint, I drew inspiration from successful e-commerce apps like Etsy, Home Depot, Target, and Shop (by Shopify) to save time and focus more on refining the experience instead of solving solved problems. Also, during the research phase I was able to identify the key areas for improvement, including category navigation, search feature, and product grids.
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.
Optimizing Product Display
A significant change that I made was the way products were showcased. According to an eye-tracking study by the Nielsen Norman Group, users tend to scan screens in Z or F patterns. Users mentioned preferred to have a larger image thumbnail. By switching to a 2-column grid there is more room to have a larger product image. In summary, a 2-column grid improves product discovery and decision-making speed.
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.
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.
Challenges
Overcoming Obstacles
Aside from having to work with a rigid design system and a 3-month timeframe, we ran into some technical framework limitations that prevented us from making some major changes, such as, user flow modifications and experience upgrades.
Finding a Resolution
Since the app was built on outdated backend technology, I faced limitations like not being able to add a wishlist button to product cards on the grid, therefore we were only able to add it on Product Detail Pages.
My original concept involved a 3-level product discovery flow with content-switching capabilities in the grid to enhance discoverability. However, developers stated it wasn’t feasible, so I pivoted to 2-level flow instead that worked within the parameters set by the dev team.
Initial Concept
Conclusion
In Closing
I conducted one last usability test to validate all the work before dev hand-off. As a result, 100% of users located the Search button, up from 60% before. 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. With all enhancements and updates done to the entire shopping experience, it has resulted in a 25% increase in click-through rate to product detail pages, rising from 12% to 15%.
Redesigning the shopping experience came with its challenges, but the effort paid off, leading to an impactful improvement to Guitar Center's e-commerce app.
Actionable Learnings
Working on this project really pushed me how to work under pressure while constantly going back-and-forth with different stakeholders. One thing I would change is my understanding of all backend limitations in detail upfront to save time. Moving forward, I'll ask better questions, continue learning, and grow with experience over time.