← Back to Work

Exploratory Search

*Warning: This page goes into a lot of detail. Hopefully it gives you an idea of how I think of product design!*

This project was ongoing for most of my time spent working on search at Etsy and is still an ongoing project.

After working with engineering partners, the search team 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 built our products for.

An example of a broad query is something like “silver jewelry,” which gets 7.74 million 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?

Exploration

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 entered a query, we would 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 get caught up on pixels.

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. This avoided distraction from the main problems I was trying to find answers to.

Understanding where on the page to put subcategories came down to understanding 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?

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:

  • Is there already a pattern like this in the toolkit/style guide? If no, why not? If yes, why can’t we use that? (We didn’t and there had been some implementations of cards that were similar “collections” but nothing codified.)
  • How could images help or detract from the goals of this project, and how would we choose the image?
  • What images do we have access to? What size or ratio are those images and how can we ensure they are high quality?
  • Would one image misrepresent the uniqueness of a category on Etsy and dissuade users from engaging?
  • How much image needs to show if we do show them? Or is the image more of a texture or vibe we are trying to communicate?
  • Should we show sub-categories? What is the threshold of information that is useful before it becomes a noisy overload?

Although the first experiment was on desktop, there were 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:

  • How much space do we want to take up? Is it similar to the answer we arrived on for desktop? The more space we take up, the farther down we push the listings, which we know hurts the experience from prior results.
  • Do images become hard to comprehend at this small of size?

The research

After working closely with my partner from the research team and the product manager, we decided to step up the fidelity a notch so that we could create rough prototypes for usability sessions.

For the usability sessions, I created three or four clickable prototypes aimed at answering some of the questions I had 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 people could use it as quickly as possible. I took some screenshots of the chrome to fake app navigation, and built out the rest using our CSS toolkit. 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.

The findings

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 results to the search team. From there we launched our first experiment. We tried to balance our decisions with qualitative and quantitative feedback as much as possible.

Here's a brief overview of some of the answers we got to our initial questions:

  • Images helped convey what the category was, but we needed to make sure the showcased item was easily found and still for sale.
  • Showing the result count was overwhelming, generally the number was too high for a user to make much use of it.
  • Showing the subcategories seemed like a good direction, but users were a bit confused with the layouts we showed.
  • In order for the user to recognize the horizontal side scroll on mobile, we tested a subtle animation which made it much more clear and discoverable.

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 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:

A new approach

The gist of this new approach takes us back to the first flow where we constantly saw 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 for 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, all while being more mobile-friendly.

As I mentioned, 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 I am sure Etsy will continue to experiment and iterate on different ideas, flows and features to help their users narrow down their searches.

2018-2020

I worked as a lead designer at SoFi, a financial tech company, and focused on experiences that helped people get their money right.

(Work coming soon)

2014-2018

At Etsy, I was a staff designer on the Search team for over three years, and on the design systems team for nearly a year.

Etsy work →

2013-2014

As the first designer at Compass, a real estate tech company, I was a part of all things design: branding, product, UI/UX and research.

Compass work →

With dark regards 2020