Building the Collage design system

Coming off the heels of a major initiative to redefine our brand, the Design Systems team was given the opportunity to lead the company in a strategy to roll out the brand refresh in the form of a new design system. At the time, our team consisted of two technical product designers (myself included), a product manager, and part-time assistance from a brand designer and a web engineer.

To give ourselves a common focus for building this new system, I defined some core principles that would give us guardrails for all of the new UI and UX standards we would be creating.

The first patterns we focused on defining were typography, color, and buttons, on the basis that these foundational elements could create structure for all other UI to hinge off of.

With these core elements, I built provocational prototypes to stress-test their ability to bring our new brand direction to life.

Backed up by positive user research and frequent communication with our brand and product design teams, I felt confident that we were ready to strategize a roll out across our products. This new direction for our brand couldn't be achieved by simply re-skinning what already existed. Too much of our vision was tangled up in recalibrating when and why certain types of UI should be used, and it was imperative that the UX was considered in tandem with the UI. Therefore, to orchestrate the roll out, we needed to empower the ~30 product squads to independently modernize their parts of the product alongside feature development.

Focusing on web first, we took on a total rewrite of our CSS toolkit that would enable other teams to ship consistent, high quality experiences that embodied all of the principles of the new brand. Specicially, we aimed to infuse our product with intentional hierarchy, intuitive animation, and accessible UI that all types of users could easily interact with.

The majority of the UI components were designed and coded by myself or my co-designer, written in SCSS, HTML, some lightweight JS, and using an object-oriented approach to create dry, reusable classes. The code we wrote set the standard for how all CSS is written at Etsy.

Accompanying the CSS toolkit was robust documentation for proper usage, geared towards both a design and engineer audience. Again, the majority of the documentation was written by myself or my co-designer, and was housed within a pre-existing internal design guide micosite.

Beyond the tooling and documentation to aid in adoption, I initiated regular office hours and ongoing feedback loops with designers, product managers, and engineers to course-correct and assist in alignment with a shared vision. I also used these relationships to learn how the UI we built for generalized purposes worked, or didn't work, in real-world applications. Patterns that seemed too fragile or challenging to use were reworked to match the needs of designers and engineers, and slowly we were able to see progress in the form of new features being experimented on, and ultimately launching, that were built with our system.

Following our work on the web, our team was able to gain support from several Android and iOS developers to do this same work for native. Pairing with these engineers, we needed to articulate how the needs for our native experiences differed, and tweak our patterns for Android and iOS-specific platforms. Special considerations included how devices handle dynamic type, how gestures and touch enable different traits for interactivity, how patterns that are baked into the system guidelines for each platform can work with Etsy's system, and how we might unblock ourselves for future work on dark mode.

A challenge with building a design system, and corresponding toolkits that enable alignment to that system, is that the work is never quite done. Technologies evolve, business strategies evolve, trends and aesthetics of digital products evolve, and the needs of product teams using the system evolve. There is ongoing work to maintain patterns, introduce new patterns, and deprecate old patterns. Despite having completed our initial build of the web and native toolkits, I continue to be very involved with designers and engineers that rely on the toolkits and learn from their needs to keep pushing the system forwards.

Other projects