Improving Etsy's web toolkit

Role: Product Designer / Front-end developer, Etsy Year: 2015 – 2017

At Etsy, there was a set of responsive components and utility classes that made building pages fast and visually consistent called the web toolkit. Designers were encouraged to contribute to it so that it can continue to change and grow with the experiences we design. During my time at Etsy, I added a few new components when they were needed for my projects and have helped keep documentation accurate and up-to-date.

Popovers

While I was working on redesigning shipping on Etsy, I needed a way to surface help content to sellers purchasing shipping labels. In the old experience, we had tooltips that served this exact purpose but in the new experience, built with the web toolkit, our tooltips only supported a single line. Likewise, the Marketing Services team was looking for a way to surface help content when using industry terms that were unfamiliar to sellers. I worked with Cambria Kline (Senior Product Designer) to introduce a new web toolkit component, called Popovers, and created guidelines around when to use a Tooltip versus a Popover. I built the initial version of Popovers before collaborating with Allie Jones (Senior Software Engineer) to finalize the implementation.

Underlined navigation

During a project where I needed to improve shipping settings, I needed a responsive way to treat sub-navigation. On the shop home, there was an orange, underlined navigation pattern that others quickly adopted but it had yet to be added to the web toolkit. As a part of my work on shipping settings, I built a reusable version of the underlined navigation and created guidelines around when to use it instead of other forms of navigation, like tabs. Once I had added the initial version the web toolkit, other designers and engineers extended it to make it even more flexible.

Improving sandboxes

I helped improve our sandboxes, a testing environment that includes the web toolkit and makes it easy to design in the browser. I collaborated with four engineers to add new features like data properties that allow you to design and test with real data, toggling on Etsy’s global navigation and adding more support for assets.

The email I sent at the end of hack week with all of the new sandbox features

A listing card with real data created in my sandbox

Circled numbered lists

My first contribution to the web toolkit was circled, numbered lists. Much like underlined navigation, teams had adopted this pattern throughout the site but it had not been added to the web toolkit. This meant there were slightly different implementations in several different places, so I decided to officially document, build and add a version to the web toolkit so I could use it in one of my designs. Afterward, I updated all of the occurrences of the outdated implementation.