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.