Search Results Page
We are constantly working to improve the search experience through the interface, taxonomy and algorithm improvements. Here, I'll break out past iterations of our search experience (Iterations I & II) before diving into detail for each phase.
Iteration I: The goal was to update our search results page, giving users greater freedom and flexibility to drill down search results to more easily find what they're looking for, while optimizing for mobile. We aimed to improve the percentage of paid add to cart and percentage of paid order conversion rate. I led the design for this project, working with our lead designer and PM.
Iteration II: The goal was to improve the customer-facing search experience, increasing accuracy, relevance and aiding discovery by leveraging the updated marketplace taxonomy and IA. I led the design and research for this project, working with the Head of Product, UX Researcher and the Marketplace Development Team.
Research & Discovery
We conducted direct interviews with users to understand what they prioritize when searching. The majority of our users first look for reviews (numbers of reviews and rating).
From user interviews and feedback, we discovered a few different use cases for search:
- User looking for any products for homeschooling
- User looking for any products by grade
- User looking for any products within a specific subject
- User looking for a certain type of product by subject
- User looking for a specific product, exact match
- Browsing *without a navigation structure in place, customers used search to browse and discover products
The existing search filters were comprised of a few drop downs that allowed users to filter by one attribute of a category at a time. This didn't give users the flexibility to explore results as they wanted. For instance, our homeschooling users won't typically look for products that fit neatly into one grade, but they may want to view results for a range of grades. With the existing drop downs, users could only filter one grade at a time. Hiding many of the available options within drop downs didn't help to show users the range of options and combinations that were available - leading me to explore different UI components for the filters.
There was also a major usability issue in the existing drop down interaction (shown above). In the example above, a user is able to make a selection from 5 main drop downs. After selecting an item from one category drop down, that drop down is removed and the selection is turned into a 'tag' format, leaving 4 drop downs in the filter section. This means that users were only able to select one item per category at a time, and take the extra step of clearing the tag before selecting a different option from the drop down.
From user research, we know that a majority of our users are Amazon "power users" which led us to explore Amazon's left rail filters as well as sites with robust search such as Kayak, Nike, etc. The filter components on these sites allow users to filter by multiple attributes and variants across categories and/or subcategories.
One thing that our users will let us know in each interview is that (their approach to) education is not one-size-fits-all. Since users may prefer viewing results within one subject (category), another user may prefer to view results across multiple subjects (categories). It was important to design for this freedom and flexibility.
After spending a lot of time exploring other search experiences and results page interfaces, I started whiteboarding and sketching different layouts and UI controls. I wanted to avoid hiding information in drop downs and provide a simple, seamless way to interact with the filters.
Figuring out the right UI control for the grade section was a little challenging. Checkboxes made sense, but I didn't want the entire rail to become a monotonous pile of checkboxes. I sketched out a small grid of buttons that would help add interest to the rail, breaking up the other sections and could translate well on mobile.
I chose checkboxes for the categories to provide users the ability to view results through a range of categories instead of forcing a mutually exclusive experience. The grade tiles also allowed users to select multiple grades or ranges at a time.
While the search filters allowed users to view a range of categories at a time, the attribute filters allowed users to drill down with more granularity across the selected categories, such as the price and format filters. Instead of just sorting by price (high to low or low to high), we introduced a price slider so that users could set a custom range.
Filter Logic (Desktop & Mobile)
Since we are a marketplace with thousands of products, we want to show users results that we have the highest confidence in. By default, we decided to display up to six parent categories in order of greatest to fewest results, with the number of results displayed next to the category name. If more than six categories, a [show more] signifier would be displayed and would expand the remaining categories on click. Categories with zero results are not displayed. Similarly, grade levels with zero results are displayed as disabled, rather than hiding them.
Mobile Search Results & Filter UI
With mobile accounting for roughly 50% of our search sessions, we wanted to implement a solution that was flexible, transparent and easy to use.
The existing mobile search page displayed one product box per row, which made it difficult for users to scan results. With the updated product boxes and use of a collapsible filter, we were able to show ~4 product boxes on first load.
There were a few quick wins that were attainable through light usability improvements, such as optimizing filters components for mobile and providing flexibility in navigating between results and filters. In the expanded filter view, larger checkboxes and buttons are used for increased tap targets, and the checkboxes are reflected on the right side for easier (thumb) reach. Additionally, we landed on a filter interaction that made the process feel quicker and more native.
Mobile Search Filter Interactions
The filter section expands on click of the fixed footer [Filter] button. The section can be closed using the fixed [Filter] button at the top, or the [Cancel] and [Apply Filters] buttons at bottom.
When the filter are are applied, the section closes and selected filters display at top of results page. To maintain flexibility, the selected filters are easily removed on click as well as by reopening and editing within the filter section.
With the initial implementation of the search left rail filters, we saw a +27% improvement in Paid Add to Cart. Additionally, we saw a ~6% lift in checkout success, where search accounted for 15% of sessions and 40% of revenue, site wide (May/June 2016)
Paid Add to Cart
To recap, the second iteration of the search results page aimed to leverage the updated marketplace taxonomy in order to increase relevance and accuracy of search and increase paid add to cart conversion.
When we had enough data from the initial iteration, we were able to take a closer look at how users were interacting with the results page. This data helped inform design decisions that went into the second iteration.
- Of users who searched, ~35% of users did not use a filter and ~37% used 1-2 filters.
- We also found that only about 4% of users clicked on the [show more] in the category sections and 2.27% of users navigated beyond the first page of results.
The grade filter was the most used, which was surprising because many of our homeschooling customers don't rely heavily on grades. Outside of the convenience of searching by grade, this could have been because of a host of variables; The grade filter was located second from the top of the filter section and the UI component was visually more clickable than others (a grid of small buttons), likely focussing users attention a little more than the others.
Left Rail Exploration
I spent time synthesizing the data from filter usage and the observed search/filter patterns. Considering the research, I rearranged the order of the filters, moving "subject" (which would become the most robust category) to the top, followed by "grade," "product type," audience," "price," and "format."
Incorporating the updated marketplace taxonomy meant that we would be adding a layered category structure to the left rail. I explored numerous layouts and interactions, including drawers and flyouts, etc. After exploring the different solutions further with the engineering team, I chose to have the subcategories expand vertically within the existing rail on desktop and mobile.
On desktop, users would also have the ability to minimize whole sections in order to customize and focus their search experience. Since we are working with less space on mobile, along with a fixed header and footer, I decided that we would't add the additional interaction of minimizing sections.
Through user research, we discovered how heavily our users relied on reviews and the different ways that they search and discover products. Our engineering and data team was able to leverage this data to calibrate the Elasticsearch algorithm, adding weight to the terms and preferences of our users.
% Paid Add to Cart
- The first iteration of the search interface and algorithm saw search ATC conversion increase by 27%.
- The second iteration of the search interface and algorithm improvements saw ATC conversion grow from 19% to 34.33%, a ~80% increase.
- The subject and grade filters continued to be the most used, with subject used in ~43% of search events and grade being used ~39%.
Notes & Next Steps
Feedback given through user interviews included the expectation that misspelled queries would be corrected (via fuzzy logic), similar to Amazon. While out of scope for this project, our team is currently working on further improvements to our search algorithm, including fuzzy logic, "did you mean..." and stemming. Another tool that we would like to test in the future is autocomplete.
One thing I would have done differently (and will do differently in the next round), is spend more time on the empty state, no search results page. Not only is the empty state a place where you can impart a little more personality, but it's a great opportunity to reengage users. Additionally, there were a few interactions that had to be de-prioritized to keep scope down, but would improve the search experience in the future.
This case study was published as a continuation of the marketplace taxonomy project, which allowed us to introduce a hierarchical category structure to our search results page, and implement a top-level navigation.