This project was ongoing for most of my time that I was working on search at Etsy and is still an ongoing project, so some newer details I have purposely left out. Hopefully it illustrates how I like to work as a product designer.
After working with my engineering partners we discovered that a sizable portion of searches on Etsy are broad queries that are lower converting than higher-intent queries. Our team of researchers had also seen this behavior and it mapped to a prominent user persona that we build our products for.
An example of a broad query is something like “silver jewelry,” which gets 7.74M search results on Etsy today. No matter how good we are at ranking results, the universe of silver jewelry is simply so vast that the chances we show you something you like are pretty slim.
How can we help Etsy users narrow down searches to something more specific, in order to give them a real chance at finding what they are looking for?
The search team and I decided that grouping items into their respective categories seemed like an obvious starting place, but we also wanted to explore how to group the items by any number of dimensions like style, color, and material. We wanted to start with a small test so we decided just to focus on showing the most popular categories for these broad queries to help users narrow down their search.
The solution we came up with was that when a user enters a query, we run a few calculations about the diversity of the result set between categories to determine the intent of the search. If it’s spread evenly across several categories, we could generally infer that it’s a low-intent query. If it's proven to be low-intent, we show a group of selected subcategories that help the user dive depper and narrow down the search.
This is when I, as the designer on the team, broke off from the bigger team discussions to start wireframing possible ways to insert categories into the search results page. I came up with two questions to solve: Where should these categories live on the page, and what should they contain and look like? At this stage of the process, I tried to keep things as loose as possible and not be caught up on pixels or certain ideas.
The goal of these wireframes was to explore different options while being able to quickly communicate an idea or opportunity to my team, research partners, or leadership before heading towards higher fidelity mockups which could lead people to get distracted from the main problems I was trying to find answers to.
Understanding where on the page to put these subcategories came down to trying to understand the information architecture in relation to the other content on the page. Is this feature the most important? Do we need every user to interact with it? Or should it feel embedded in the current experience?
It also was a question of what type of content is this and should it be grouped in with similar content. For example, if our goal was just categories, it almost felt like our category tree filter. How are those two things similar or dissimilar? To a user they could feel exactly the same.
When coming up with the architecture of the actual content we settled on a card-type pattern, but I had a list of questions I needed to answer in order to make the right decisions. Some of the questions were:
Although our first experiment was on desktop, we had plans to release this on mobile web, Android and iOS, so I kept wireframing the same types of ideas on mobile at the same time as desktop.
Some of the questions I was working to solve for mobile were:
After working closely with my partner on our research team and the product manager on my team, we decided to step up the fidelity a notch so that we could create rough prototypes for some usability sessions.
For the usability studies, I created three or four clickable prototypes aimed at answering some of the questions I previously posed about the placement and layout of the cards.
For the prototype for the apps, I found a quick solution to get it up and running so that multiple outside users could use it as quickly as possible. I took some screenshots of the app chrome to fake the app navigation, and just built out the rest using our CSS toolkit, so that it could be a URL that participants in the usability study could just get to on their own phone. Most designers at Etsy help with our style guide, toolkit, and sticker sheet, and we are encouraged to write our own HTML and CSS, and push to production when it makes sense.
After getting a lot of good insight and answering almost all of our questions from our usability studies and research team, I brought back the knowledge to the search team and presented to them my learnings, and from there we launched our first experiment. We try to balance our decisions with qualitative and quantitative feedback as much as possible.
A brief overview of some of the answers we got to our initial questions:
The bad news was we didn’t hit it out of the park from the first experiment. We saw some really strong signals that we were headed in the right direction, but we didn’t get a strong enough signal that we had it correct from our backend implementation side. That part of the team broke off and started to focus in on that with high hopes of fine tuning the backend.
In the meantime, the rest of the team decided we should try various strategies to solve the low-intent search problem. Here is one more approach we are working on that has performed really well for mobile web.
The gist of this new approach takes us back to the first flow where we constantly see users type in something broad, and then reforumulate that query to be more specific. We ran a few data jobs to better understand what queries users were reformulating and what reformulations converted the best. We then surfaced those reforumations to our users.
Understanding how many to show, where to show them, and the best visual treatment to have the most impact, were all questions I set out to solve in the wireframe stage.
We started to look at using more color and motion to tie in Etsy’s brand and to make a visual impact to get more interaction.
We generally felt more optimistic about this treatment and thought it might have more impact and take up less real estate on the search page, while being more mobile friendly.
As I mentioned previously, a lot of this work is still being experimented and is unreleased, but hopefully this gives you a good insight into the iterative and data-driven design approach I like to take while working on a product like search at Etsy.
And we will continue to experiment and iterate on different ideas, flows, and features to help our users narrow down their searches!