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.
By flipping the navigation to the top and docking it there on scroll, users were able to see more products without the clutter of a left-rail navigation system. On hover of this new top bar, the classes, sub-classes and departments were exposed for users to easily pivot to other categories if they needed to. To keep with our initial learning of exposing the different levels of navigation to the users, the top bar was built to expand on first unique page load to expose its contents, and then collapse back to its smaller state after momentarily being open.
Advanced Filtering and Faceting
From the Ethnio surveys, we learned from our customers that they wanted more controls over how to filter and sort the data. Another miss in the existing structure was that it allowed for basic sorting by rating and price, but didn't have any controls beyond that. And because this functionality was a sort feature instead of filters, users had little to no control over the data. When choosing to sort by price, the products were merely rearranged accordingly, they couldn't set a specific price range and couldn't choose to view products both by price and by rating.
We had a long list of potential filters that would be useful, but in order to roll this out quickly and efficiently we focused primarily on existing data points in our database – price, rating, and brand. We added these in as muti-select filtering in our top-level structure and added indicators as each filter was applied that allowed users to quickly clear them if they wanted.
With more research and user testing, we later expanded these filter tools to a larger set prioritized by what our customer base found most useful.
Giving Users Context
Through testing we also learned that there were multiple use cases for users browsing information at the category level, which lead to our belief that the user should be able to control multiple view states based on their need.
There were those who were casually flipping through the category levels, perhaps to get a quick scan of everything we sell by a particular brand. For these users, images and names of products would likely be useful, whereas more detailed information like color options, descriptions and ratings might be less relevant.
There were also those who were browsing through a category with a rough idea in mind – i.e. people who knew that they wanted to view eye products. For these people, slightly more information would be useful, such as color options and ratings to be able to compare multiple similar products. Because they’d be comparing similar products, slightly the grid shifted to showcase slightly larger products, 2 x 2 in a row. This way, photos could get bigger and these users could see the detail in each photo.
The third use case was users who were browsing for a specific product – i.e. an eyeliner. These users would likely be searching for one product to select out of a smaller group after refining through filtering, so for this case we created another product grid view that showed only one product at a time with extra detailed product information written in an editorial style. This way, comparing two different products would be easy and scannable without having to dive directly into the PDP.
Editorializing Products Through Related Content
When we spoke with users in testing, we also learned that content and our brand’s editorial voice was extremely important to them. Because customers often browse our site for beauty inspiration and knowledge, it was important to try to weave an editorial perspective into such a functional experience. With a new full-width layout of products on the category page, we found a design opportunity to include blocks of full-width related content (relating to whatever category the user is currently viewing) such as how-to articles, tips and tricks. These blocks of content were designed with close buttons in the top corners, so users could choose whether or not to see this in their browsing experience. This preference would be saved throughout their session until the user returns back in a separate shopping session, so that they aren’t overloaded with content they don’t want when they are perhaps browsing with more of a purpose instead of a passive browsing.
This revamp of the category experience created a fresh moment for the brand while also making the overall experience much more usable. While still iterating and constantly improving this project from our initial launches, the initial design launch increased numbers significantly over our control (older design) and we are continuing to see an increase in conversion with each iteration.