USC BOOKSTORE
Improving filter taxonomy and discovery for an optimised shopping experience
The USC Bookstore is a powerhouse driving revenue and fueling school pride. By partnering with major brands like Nike, Lululemon, and Under Armour, the bookstore has become a hub for students, alumni, and fans. It extends into a thriving e-commerce platform that brings the same premium offerings to a global audience. However, the success of this e-commerce site hinges on more than just the products—it’s about creating a user experience that’s as smooth and intuitive as the shopping journey itself.
Obstacles to note:
Since the project was initiated during a large platform migration, a primary challenge we also had to face was navigating the technical limitations. Collaboration between the marketing and development teams was crucial, involving continuous iterations to ensure that the desired designs and functionalities were not only user-centered but also technically feasible for implementation. As development was still exploring the technical capabilities, certain designs and functionalities couldn't be implemented in the first phase. However, we proceeded by testing what was feasible, conducting usability tests on the final prototypes, and gathering insights for features we plan to introduce in the next phase of production.
My Role
Acknowledging the need for a more user-centric interface, I've engaged our team to locate problem areas in their decade-old website. The primary focus was on optimizing the search discovery and product detail pages, with the goal of empowering users through a seamless search experience and enabling more informed decision-making.
Objectives
Outcomes
FACING THE PROBLEM
The Challenge
USCBookstore hasn’t been updated in over a decade due to limited technical resources, leading to concerns that it might no longer effectively serve users’ needs. A refresh was needed on the front and back end of the ecommerce site and I believed a UX approach was best in heuristically evaluating what needs to be changed.
Through research, we identified these challenges:
Counterintuitive seach and filters
The lack of robust search functionality and disorganized taxonomy filters made it difficult and time-consuming for users to refine their searches and narrow down results.
Unclear information on product detail pages (PDPs)
Unclear information, poor photo viewing features, and a lack of review features on the PDP’s hindered users' ability to obtain key product specifics and make informed decisions.
Poor mobile responsiveness
With an increasing number of users shifting to mobile devices, this presents a significant roadblock in driving up revenue.
DEFINE
The Plan
We initiated the project with these key questions to uncover insights into user preferences, pain points, and behavior, allowing us to make informed, data-driven decisions for website enhancements.
How effectively does the current website meet the needs and expectations of its users?
Which user needs and features should we prioritize to enhance the overall website experience?
What does the typical user journey look like when considering and purchasing a product?
RESEARCH
User research and discovery
To gain a thorough understanding of user needs and pinpoint opportunities for improvement, we kicked off the project with a focus on three key areas:
Identifying user painpoints
Conducted a heuristic evaluation on PDP's, PLP's, and navigation to identify existing problems and areas of improvement. I also carried out competitive audits on specific pages to identify possible solutions and improvements.
Evaluating PDP effectiveness
Carried out moderated usability tests to analyzed which parts of the product detail page (PDP) users interacted with the least and most, providing insights into what caused confusion and delay in the user decision making process.
Understanding specific user journey flows
Through usability tests and user interviews, the goals were to identify errors when making product reviews, identify taxonomy filter use preferences, and observe user’s browsing and filtering behaviors.
These research activities enabled us to uncover critical usability challenges affecting the consumers’ experience. Leveraging these insights, we developed targeted solutions to streamline the user journey, empowering our users to make well-informed decisions.
INSIGHT 1
The navigation structure, search functionality, and taxonomy filters required a comprehensive redesign to enhance usability and streamline the user experience.
Ineffective search engine
No visual product suggestions - search results lack visual cues such as product images or thumbnails, making it harder for users to quickly identify the items they’re looking for. On top of this, there are inconsistencies in product titles (some in caps).
No error tolerance - the search engine can’t handle misspellings, typos, or slight variations in product names, resulting in “no results found” errors. This may be a limitation in the out of the box platform feature but something to note for the next phase of production.
Click on the image to enlarge
Navigation lacks logical organization
A lot of the subcategories in the navigation are excessive or lacks logical organization. For example, item categories such as Pins, Magnets, and Lanyards have very limited product listings but are grouped in separate categories when they could live under one entity. This creates a large decision fatigue. Clothing section also has too many subcategories with unclear distinctions, forcing users to sift through an extensive list just to find a specific item
Click on the image to enlarge
RECOMMENDATION 1
Revamped navigation and taxonomy filters
By utilizing tests and insights from Google Analytics, we optimized the dropdown navigation to prominently feature best sellers while removing confusing and redundant filters. The taxonomy was refined by incorporating intuitive subcategories, such as directly displaying shirt types, reducing the reliance on granular filters like sleeve length or neckline. This overall minimizes cognitive load and enhances the fluidity of the user’s browsing experience
RECOMMENDATION 1
Improved search functionality
We’ve enhanced the user experience with predictive search, visual product suggestions, and real-time ratings, streamlining product discovery and providing users with instant access to relevant information throughout their journey.
INSIGHT 2
The product detail page needed a strategic overhaul to improve the users' shopping experience and boost conversion rates.
Product details
The current layout of the product details appears cluttered and would benefit from a more structured approach. Additionally, we have identified inconsistencies within the content, as well as grammatical and spelling errors. Usability testing has indicated that certain descriptions lack clarity, potentially leading to user confusion.
Click on the image to enlarge
Product reviews
Usability testing revealed that users were unintentionally skipping required inputs due to insufficient visual contrast and unclear emphasis on important fields. Additionally, we observed that adjusting the information hierarchy creates a more intuitive and logical flow, helping users navigate forms with greater ease and reducing errors.
Click on the image to enlarge
RECOMMENDATION 2
Enhanced review features
I enhanced the review features by introducing more comprehensive criteria and pushed to offer incentives for users to leave feedback that could effectively encourage more participation. This improvement would not only increase the quantity of reviews but also enhance the overall credibility and value of the feedback provided.
RECOMMENDATION 2
Implementing expandable sections
Product information is now organized using expandable sections for details such as sizing, specifications, and others. This approach makes critical information more accessible and easier for users to navigate and absorb.
INSIGHT 3
I advocated for a mobile-first design approach to optimize the new pages, addressing several preexisting usability and accessibility challenges.
Cluttered homepage
Following a heuristic evaluation of the homepage, we identified significant issues with mobile responsiveness, primarily stemming from the platform's limitation in supporting live text overlays on images. Additionally, the horizontal scrolling functionality for product displays exhibited performance issues and does not adhere to UX standards for carousels.
Click on the image to enlarge
Poor PLP experience
Throughout the user shopping journey, we identified significant roadblocks on the product listing pages. As user behavior increasingly shifts toward mobile devices, we discovered that the sort and filter functionalities were unreliable and failed to meet user expectations. Inconsistent visual hierarchies and inadequate filtering options hinder the ability to find desired products efficiently. Additionally, the header image is a huge accessibility issue due to the platform's inability to support live text.
Click on the image to enlarge
RECOMMENDATION 3
Mobile homepage refresh
In this homepage refresh, I restructured the information hierarchy to prioritize key CTAs and enhance the prominence of visual content. Additionally, I redesigned the web hero to ensure it scales seamlessly within mobile browser viewports, mitigating inconsistencies. Navigational controls and indicators were integrated into the carousels to improve accessibility and user experience.
RECOMMENDATION 3
Elevated product listing page
I optimized the product listing pages for mobile by incorporating intuitive, mobile-friendly features to enhance the shopping experience. Subcategories are accessible via a horizontal scrolling interface, improving navigation efficiency, while the sort and filter options now expand into a full-page view, offering a more focused and seamless interaction compared to a dropdown menu.
Reflection
01 Selecting the right research methods
Looking back on the research phase, I noted how crucial it was to align our methods with the specific goals of our stakeholders. Conducting heuristic evaluations early on allowed us to identify and address usability issues before they escalated, which proved to be a pivotal step. This user-centered approach not only streamlined our process but also ensured that our focus remained on the design elements that would have the greatest impact. By deepening our understanding of user behaviors and needs, we were able to make design choices that genuinely resonated with our audience, steering clear of the common mistake of relying solely on internal assumptions.
02 Navigating technical constraints
One of the biggest challenges I encountered was navigating technical limitations. Early in the project, it became evident that some of the more ambitious features we had envisioned would and will be constrained by the existing tech stack and backend infrastructure. Instead of letting these limitations restrict the user experience, I focused on finding creative solutions within the available technical framework. I collaborated closely with the development team to understand the constraints better, which allowed me to identify areas where we could still introduce valuable improvements without compromising the performance or stability of the platform. By prioritizing key interactions and simplifying certain processes, we maintained the core experience while keeping the project feasible.
What really helped was shifting our focus to enhancing the usability and design of the components that weren't impacted by these technical constraints. This involved refining the information architecture and improving navigation to compensate for areas where feature complexity had to be reduced.
Through this process, I learned that understanding the technical environment early on is essential for aligning design expectations with what’s feasible. While the limitations could have been a significant setback, working within them pushed me to think more strategically about how to maximize the user experience without overextending the technology, resulting in a more polished and realistic final product.
Let's get in touch!
I'd love to hear from you and explore collaboration, answer your questions, or simply chat.
© Christine Wang 2024
