Back
 

Modernizing navigation on Etsy.com

Spring 2019 - Winter 2020

The design systems team had just spent the last year-and-a-half refreshing our brand, rebuilding UI toolkits, and rewriting documentation to enforce proper usage. All the while, experiences with Etsy continued to look and feel largely the same as they did before. Product teams were trying to adopt new standards, but initial progress was slow, and a lot of course correction from design systems was necessary.

To jumpstart Etsy's brand expression, and simultaneously give other product teams a benchmark to align to, I determined that it was necessary to lead by example by modernizing a prominent feature of the product ourselves. We set our sights on the global navigation of Etsy.com, primarily due to its scale of influence. As a feature that exists at the top of nearly every page, this would give us the ability to set the tone for all web-based experiences.

At the onset of this project, my objective was to employ clear hierarchy and logical content organization to deliver a simple, yet delightful user experience, while maintaining neutral conversion metrics. Up until this point, the global navigation had been unowned and unmaintained since 2014. Visual and interaction design of the nav hadn't evolved since then, and it was obvious. Over the years, many teams had shipped changes to the nav that were favorable for their own initiatives, but ignorant of their impact on the overall UX. Every page led with an experience that felt outdated, inconsistent, and noisy.

I started this work off with loose explorations that aimed to answer the question: how might we create a navigational space that is more aware of user needs, and also fully reflects our brand direction?

Explorations were refined through critique, and hypotheses were tested in a few rounds of in-person user testing. For research, I built several high fidelity prototypes with HTML/CSS/JS, relying on the same toolkit that I'd worked on with my team over the past year. By showing users these prototypes, I was looking to collect feedback on brand perception and usability when compared with the experience that currently existed. Additionally, since we were planning to revise content organization, I prepared a card sorting exercise in order to better understand the mental map that users create around their navigational tools.

After more iteration based on user research feedback, I had a vision for the global navigation that we were confident in building for production. In all, we would be updating the UI/UX for the search input, search autosuggest menu, category navigation menu, treatment of our logo, notification badging, signed out navigational elements, signed in buyer navigational elements, and signed in seller navigational elements.

With such a large swath of changes in a high traffic area, it was imperative that we had a robust experimentation strategy that would enable us to understand cause and effect of our work on key business metrics. Our first experiment isolated the most sensitive part of the nav: search. Beyond a modernization of the UI and interaction, I wanted to test a hypothesis pertaining to hierarchy and prominence. Historically, the search input always relied on a high priority button that read "Search". Previous experiments to reduce this promience, or to replace the text with a search icon, had always resulted in a loss of revenue.

My hypothesis was that a persistent high priority "Search" button was distractingly prominent, and that it both limited the potential for in-page prominence, and encouraged premature engagement with the button. As a solution, I built a search button with dynamic prominence, lighting up only when the user showed intent by engaging with the search input. This also freed me up to be more visually expressive with the entire input, making it more the subject of a user's attention rather than the button.

We ran this change as an A/B experiment on both mobile and desktop with hopes for at least a neutral change to conversion. I was pleasantly surprised to see a substantial conversion lift (0.4%), along with increased engagement with search and the autosuggest menu. In collaboration with another team working in the search space, we ran a subsequent experiment on desktop to make our new search input fill all available width in the nav (rather than the fixed width that it previously occupied), and again saw an even more substantial conversion lift (1.1%). This was a huge accomplishment for our team that otherwise had no intentions of increasing conversion, and now had a basis to prove that modernization and careful consideration of prominence and hierarchy could have a huge impact.

Our next sequence of experiments were similarly isolated in bite-sized A/B experiments that allowed us to safely and confidently roll out modernizations, while maintaining neutral changes to business metrics. Those included a reshuffling of content on mobile to allow us to always show our full wordmark (we were previously truncating this for signed in users), an update to the signed out navigation space (we deprioritized the "Sell" CTA for signed out users), and an update to our badging styles.

The final, and perhaps most contentious chunk of work (that as of writing is still in flight) was the overhaul of the signed in buyer and seller navigation space. Here, I set out to update iconography, notification badge hierarchy, menu content/structure, and on desktop, label prominence.

For notification badges, I wanted to more intentionally prioritize cart count over all else, my hypothesis being that this is the space that most directly leads to conversion. This would allow us to reduce noise, and create a stacking order of tasks that are more urgent (i.e. making a purchase) versus less urgent (i.e. reading a new message).

For menus, I wanted to do a bit of housekeeping. Some menu items had icons while others did not, the relationship between "Your profile" and the rest of the tools was unclear, and for sellers, certain tools lived outside of this menu while others lived within it. I consolidated the seller tools into a single account menu, reduced the prominence of the the user profile, and introduced structure with icons and whitespace.

For labels on desktop, I've often wondered how necessary these persistent labels are for our users. They can be visually troublesome when translated to other languages, and require more width than the icons do on their own. My hypothesis here was that our icons represent concepts that are generally easy to understand by average digital users, and that we could deliver icon labels as needed (by way of a tooltip) rather than all the time. I backed this hypothesis up with several rounds of user research, during which 90% of users showed little-to-no hesitation correctly identifying icons, even without the tooltip.

With all of these changes to the navigation space, we were faced with the choice of continuing to ship iterative experiments over a longer period of time, or shipping one bigger experiment over a shorter period of time. In the interest of exposing our users to less ongoing instability in their nav, we decided that it would be less obstructive for users to do it all at once.

The challenge with this approach, and the reason that this work continues to be in flight, is that it has made it more difficult to show cause and effect when metrics don't go exactly as planned. Something about the changes have reduced conversion, and we are still actively investigating which of our decisions could have been the incorrect ones. One hypothesis is that persistent labels are actually more valuable than we thought, and I've created alternate approaches that we will consider trying out:

In all, this project has been an incredible opportunity to pursue modernization efforts and push for a higher standard of quality in our navigational space. At the same time, it has shown us how challenging in can be to take bigger leaps for innovation, while also being considerate of the needs that existing experiences already meet. Experiments are necessary to gain confidence in new directions, but an abundance of experiments can erode trust and be frustrating for habitual users. I'm hopeful that we will be able to reach a conclusion to this project that moves our product forward, but also doesn't sacrifice the value that users already have.

Other projects