Building web and native toolkits

Spring 2018 - Winter 2019

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. At the time, our team consisted of two technical designers (myself included), a product manager, and part-time assistance from a brand designer and a web engineer.

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 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.