Etsy: Design Systems
Etsy is an online global marketplace for creators to buy and sell homemade goods. Sellers can create virtual storefronts for their business while buyers can seamlessly browse through Etsy’s vast inventory of products.
The Lay of the Land
Etsy had a fairly robust design system, called Collage, addressing both Web and iOS/Android. It was primarily built around the forward-facing buyer experience in mind, not the backend seller experience. This posed frequent problems for the design team who had to retrofit many of the system’s components into a data heavy / dense layout. For example, the table component was extremely problematic. It didn’t accommodate any smaller nested elements (switches, checkboxes, buttons), it wasn’t optimized for scanning quickly, nor was it built to be responsive on mobile.
The Process
Research
As a first step, I reviewed a preliminary design spike done by another designer. I then interviewed several designers working in the shop manager/seller space to understand the needs of the component. I closely inspected the live component to understand its individual properties (spacing, type size, etc). Lastly, I audited instances of tables within Shop Manager to note any common patterns.
Design Exploration
I tried multiple ways of condensing the table while ensuring proper responsiveness across screen sizes. I pressure tested nesting smaller components within tables as noted by other designers. I defined each tables’ use cases and wrote a set of rules that were intended to help designers decide when and how to use each variant.
The Solution
I arrived at a solution that significantly decreaed the overall footprint of tables, giving designers the flexibility to create experiences in Shop Manager.
Documentation & Delivery
As an important last step, we had to provide thorough guidance for when and how to use each instance of tables. This required revising and expanding on the existing documentation around the standard component and including use cases for each. I included recommended component pairings and guidelines on when and when not to use each. I created 168 variants in Figma to ensure designers could use the component in any iteration. After publishing, designers reported increased speed in their workflow and less issues around accessibility.
