Created a new experience for customers browsing the product catalog.
With 2000+ active products in the online catalog and a UI that wasn’t optimized for this large number of products, the experience of finding and browsing products on our category pages had become a daunting task. The product design team hypothesized that if we rethought the UI and interactions of these pages, we could significantly increase conversion and revenue per session while also decreasing PDPs and category pages viewed per session - meaning an overall improvement to the experience of finding and discovering interesting products.
Audit & Research
Going into the project, various survey tools were used to study the existing UI and navigation structures in order to find out what the most common pain points were for our users. Ethnio surveys (invites to these surveys were sent via email to a small percentage of our users) asking basic questions about usability collected responses from users which we then classified into overarching themes and problems.
Common themes began to resurface again and again, like 1) the frustration with the amount of products returned per page (12 products per page with pagination links at the bottom), 2)the overall difficulty to find things and “drill down” to a deeper level in the catalog/perform more complex filtering & faceting, and 3) the frustration with feeling lost in the navigation structure with no indication of how far they had drilled down. These Ethnio studies allowed us to quantify the most pressing issues in the category browse experience and prioritize our goals for the UI.
With a tool called Treejack, we tested our information structure and product ontology classifications. With questions like “where would you expect to find bronzer in our current navigation structure?” we were able to tease out sticky spots in our navigation structure, independent of visual design executions. With the exception of a few use cases, we found through these studies that structurally we were organizing data in a smart and intuitive way but (as made clear by the Ethnio surveys) were not giving users the proper tools to sift through that data to find what they need.
Based off our learnings, the tactics we then prioritized from our up-front research were: 1) display more products per page, rethink our pagination in the process while also increasing load time, 2) Create a navigation that better displays the different categories from a high-level view so that users understand the architecture and where they are vs. where they are going within that structure, and 3) Give users more intuitive tools for filtering and faceting.
Product results per page
Tactically, there was some low-hanging fruit design-wise that we could implement quickly and easily to see a quick return in results. Primarily, this was the opportunity to display more than 12 products per page and therefore decrease the amount of overall pages in the pagination (which had become a lot of pagination pages for high-level categories). We broke this up into two iterative tasks: First, to display 24 products per page and increase loading speed, then test for any increase in conversion; Second, to implement an endless scroll functionality with URL markers assigned to each new load of products.
Within the current UI, a major miss was that users were often confused about their current position within the overall architecture because the left-hand navigation only showed one department at a time. This meant that in order to get to eyeliner from a top-level category like “Makeup”, Users would click Makeup > Eyes > Eyeliner, but each click replaced the current category with the new category, offering no breadcrumbs to get back.
As a preliminary test, we decided to take the same structure and expose all levels of the architecture to the user so they could see the entire bird’s eye view at all times throughout their journey. When this performed well, we took this as a learning that we should expose as many levels as we could within the navigation for when the users wanted it. By getting our basic structure up to a level that's "best practice" before implementing a best-in-class solution, this also allowed us to set a higher, non-inflated baseline for ourselves to measure our future work against.
Rethinking the core design
Once we had gotten our core experience (and baseline metrics) up to a basic/common practice standard, we then began to make bigger design moves to a-best-in-class solution. Our first design decision was to flip the navigation structure on the left-hand side of the page to the top, which would open up another column in our grid to showcase more products.