Internal Tools Design System
Etsy
Overview
Etsy’s internal tools are built for productivity and efficiency. These tools rely heavily on data and machine learning models to support the business needs. I led the design of a purpose-built design system for internal tools: a system that didn't exist before, built to serve the data-heavy, efficiency-driven workflows that the existing Buyer design system couldn't accommodate.
Impact
Adoption across 3 engineering squads and 6 designers — with 2 components elevated into Etsy's core design systems.
Opportunity
With designers and engineers spending disproportionate time building and maintaining one-off solutions, we postulated that by providing a framework of standards, preset styles, and scalable components would allow teams to work more efficiently during design and implementation when developing internal tools.
Goals
Increase velocity
Visual coherence
Scalable architecture
Solution
A scalable design system for complex data tooling.
-
Guide the architecture to support layered data structures, user permissions, and complex workflows.
-
Component library to provide teams with standards, preset styles, and scalable components to efficiently develop internal productivity solutions.
-
Templates and layouts to drive consistency and streamline business-critical workflows.
-
A framework that balances ease of use with highly technical or dense information display needs.
-
Clear documentation and guidance to drive adoption.
Impact
Total use cases supported
6
Total components delivered
10
Squad adoption
4
Components rolled into Buyer DS
2
Designer adoption
10
Design velocity saved
3.5 hr
“The tools we design for are data-heavy and have more complexities. The Buyer design system components don’t accommodate data manipulation and large data sets.”
- Staff Designer, Personalization
Process
Method triangulation
My objective was to gain a complete understanding of the users’ needs and the points of friction when designing for and implementing internal tools. I structured the execution in a way that allowed for multiple methods to raise confidence in the reliability of the results.
Collaboration
Through a series of activities, I identified themes across tools, workflows, common tasks, and overlap in user requirements.
Co-creation with internal tools designers, design system engineers, and design system design team provided multiple perspectives.
Diverge / converge
Following the double diamond process allows for multiple discovery methods. As I moved into the design and ideation stage, I explored different design concepts and refined as we formalize a proposal for an internal tools design system.
Delivery
Internal Tools Design System was grounded in three principles: density with legibility, clarity over decoration, and hierarchy that guides action.
See it in actionCondensed Typography
Internal tools surface complex, layered data. The standard Etsy consumer type scale — designed for browse and discovery — left too much white space in data-heavy admin interfaces. A condensed type system was created to increase information density without sacrificing readability.
Design outcome: This condensed scale was later adopted into Etsy's Buyer Design System
Visual hierarchy
Internal users make dozens of decisions per session. When every piece of information carries the same visual weight, cognitive load increases and errors multiply. The visual hierarchy system elevates what requires action and recedes what doesn't.
Use, Extend, or CreateComponent Framework
Every design system decision came down to one question: does an existing Collage pattern serve internal users — or does the difference in user context require something new? This framework guided every component decision.
The rule: Every deviation from Collage was documented with a written rationale — ensuring teams understood not just what to use, but why. This prevented pattern sprawl and made the system legible to new contributors.