{"id":19056,"date":"2020-02-03T16:00:33","date_gmt":"2020-02-03T16:00:33","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=19056"},"modified":"2020-09-03T11:16:02","modified_gmt":"2020-09-03T10:16:02","slug":"etsys-design-system","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/etsys-design-system\/","title":{"rendered":"The people part of design systems"},"content":{"rendered":"

A little over nine months ago, I left Etsy to co-found Related Works. During my last year and a half there, I managed Etsy\u2019s first dedicated Design Systems team. Below are my thoughts about what it meant to make the team and the work successful.<\/em><\/p>\n

\"\"<\/a><\/p>\n

As tech companies grow, the creation of their design system can become a powerful and necessary tool. Typically consisting of a defined set of reusable components and guidelines, design systems make it easy for anyone to create a brand-aligned and cohesive customer experience consistently. At their best, they have the power to align everyone on a shared vision of what your brand\u2019s voice and visual style is, and how it behaves.<\/p>\n

<\/div>
<\/svg><\/div>

\"Design systems at their best, have the power to align everyone on a shared vision of what your\u00a0brand\u2019s voice and visual style is, and how it behaves.\"<\/p><\/span><\/blockquote>\n

Over the years, Etsy\u2019s design system went through many incarnations. The way we organized to do the work also changed, and in 2016 we created our first dedicated Design Systems team. Up until then, it had been built and maintained by a group of designers and engineers who did it on top of their regular product work. Improvements were being made, but slowly. As demand increased, it became clear we needed a full-time team to keep pace.<\/p>\n

We had a grand vision that by enabling a team of designers, engineers, and product managers to focus on the continued maintenance, improvement, and adoption of our system, the rest of the product org could go back to concentrating on building customer experiences. Anyone could still contribute to the work, but the heavy lifting was now the responsibility of the Design Systems team.<\/p>\n

The reality turned out to be more complicated than that.<\/p>\n

Although we now had a dedicated team, we were still relatively small with a ton of surface area to cover; Etsy had customer experiences spanning web, iOS, Android, email, and off-Etsy and offline, which needed to meet the needs of both buyers and sellers who had very different needs. We were also working on the creation of a new marketplace<\/a> with its own brand and customer needs. We were stretched thin and weren\u2019t able to support all the requests for new or modified components. Product teams would fill in the gaps themselves by creating the additions or modifications they needed, but often without the due diligence required to make sure they would work across all our use cases and relevant platforms. The Design Systems team fell into a pattern of playing catch-up. We were heading down a road where we were a bottleneck, and the benefit of our systems being the source of truth was slowly deteriorating.<\/p>\n

Fostering Collective Ownership<\/h2>\n

We realized that ultimately for our systems to succeed long-term, they needed to be thought of as everyone\u2019s responsibility. It became clear our role as a team wasn\u2019t just doing the heavy lifting of ongoing maintenance and improvements.<\/p>\n

<\/div>
<\/svg><\/div>

\"We were a team of system advocates and facilitators, helping everyone contribute to our evolving system with the big picture in mind.\"<\/p><\/span><\/blockquote>\n

We learned it was important to create the space, time, and variety of ways people could be involved. We needed to define clear goals for how to contribute, and what a successful contribution was. Lastly, there had to be opportunities for cross exposure to both the demands and constraints of individual product teams and the Design Systems team.<\/p>\n

Over the course of that first year, we experimented with and tried a lot of different things. Some were spun up, but most evolved from existing programs. We ended up with an ecosystem of opportunities, processes, and mechanisms that were valuable in different ways.<\/p>\n

Design Bug Rotation<\/h2>\n

Etsy had accumulated a decent amount of design debt over the years. As you navigated across Etsy, you could encounter a variety of similar but slightly different components, interactions, or behaviours. It created a fragmented and confusing customer experience, eroding customer trust.<\/p>\n

Inspired by the engineering organization, the Design team created the Design Bug Rotation to help pay down our design debt. Every two weeks or so, a group of designers would get together for a couple of hours to fix what we called \u201cdesign bugs.\u201d These were things that didn\u2019t hinder functionality and wouldn\u2019t have been filed as an engineering bug, but were places where we were using an old component, an existing one incorrectly, or a one-off alteration. As anyone in the company encountered one of these bugs, they\u2019d file a ticket under a shared Jira board. During a rotation, designers would go through the list and chip away at them.<\/p>\n

\"\"\"\"<\/a>The evolution of Etsy\u2019s visual language over the years.<\/p>\n

Over the years, the rotation gained more structure, with each rotation focused on a specific theme, component, or product area thanks to the hard work of Cambria Kline<\/a>. We leveraged the rotations as a power boost to the Design Systems team, helping us get through any work that included cleaning up some related design debt.<\/p>\n

Beyond speeding up our work, rotations often freed up the Systems team to innovate and think at a higher level. For example, we were working on a huge push to update our color usage everywhere to be more brand-aligned. It was during one of these rotations that Katie Sylor-Miller<\/a>, an engineer on the Systems team, realized we needed a more efficient and future-proof way to make these types of sweeping, global changes. As a result, she was able to advocate for the creation of design tokens<\/a>. If we decided we needed to update our colors again in the future, we would merely update them in one place and see the changes reflected everywhere.<\/p>\n

Lastly, these rotations created an easy way contribute without a considerable time commitment. There were plenty of designers and engineers that wanted to help but didn\u2019t have a specific thing in mind. The Design Bug Rotation gave them an opportunity to do just that. They also got to experience first-hand the costs of not investing in using our design system.<\/p>\n

New Hire Boot Camp<\/h2>\n

As the design team grew, it became invaluable to onboard new designers to help them hit the ground running. Over the years the process became more robust, with a suite of resources and one-on-one sessions showing them how to use our web toolkit and push changes to production. One of those additions was having every new hire do a 2\u20133 week boot camp with a team before joining their product team full-time.<\/p>\n

Once we created the Design Systems team, we\u2019d try to have as many new hires as possible do their boot camp with us. We\u2019d give them an achievable project they could finish within two weeks that provided an opportunity for them to get some hands-on experience using our toolkits, documentation and other resources.<\/p>\n

These boot camps made system thinking a foundational part of their entry into Etsy. By working on our system early on, they became invested in its success. Every new hire that did their boot camp with Design Systems became a strong advocate for the work and its adoption.<\/p>\n

In turn, it also created an opportunity for a fresh perspective and new ideas. Things we had grown accustomed to were questioned, creating more thoughtful discussions and long-term solutions.<\/p>\n

Design Systems Yearly Rotation<\/h2>\n

For every year at Etsy, any brand designer, product designer or engineer could spend two consecutive weeks embedded in the Design Systems team. They would go to all of the regularly scheduled meetings and design crits and worked on a project they were responsible for completing during that time. We\u2019d designate someone on the team as their buddy, who was there to help answer any questions or to bounce ideas off of if they needed to. Rotators could assist with ongoing projects, but often they had specific self-directed plans they wanted to pursue.<\/p>\n

These rotations gave folks, who might not otherwise have the time to do systems work, the opportunity to help in a focused and meaningful way. It gave those individuals who loved systems work but still preferred to focus on product work full-time, a little bit of both worlds.<\/p>\n

One of the most impactful outcomes was when brand designers did a rotation. Our brand team worked on marketing campaigns on and off Etsy, physical items, and special events for our sellers and buyers around the world. They used different processes and tools than the product design team. Many expressed a desire to learn more about the product development process and how to use our web toolkit, but it was hard to squeeze into their busy schedules. As part of a rotation with Design Systems, we\u2019d have them go through our new hire onboarding process, learning how to use our web toolkit and push changes on their own. We\u2019d then pair them with someone on the team to work together to find an existing project they were working on that had an element they could code themselves or something that could become a reusable layout or component with guidelines.<\/p>\n

Rotations with our brand partners provided insight into how to make our systems a stronger expression of our brand, while also making their work more systems-minded in its execution and operations. For example, one rotation focused on creating a set of reusable and responsive hero components that we used for marketing campaigns, event microsites, or critical pages like our homepage. Beyond adding a useful UI component to our system, the brand design team now had a tool that helped them plan and immediately test if the assets they were creating for the hero space would work. While at a photoshoot, they could insert the image into the hero component, confirm that it looked good for all breakpoints, and iterate on the spot if they needed.<\/p>\n

\"\"\"\"<\/a>Susi Vetter<\/a> testing out image options for Etsy Resolution<\/a> landing page hero while at the photoshoot.<\/p>\n

Design Systems Council<\/h2>\n

Teams were working at a rapid pace, and when our current components or modules didn\u2019t fit a specific need, the Systems team wasn\u2019t able to always be there to help and give feedback. To help remedy these issues, we set up what we called the Design Systems Council. It was a shift in our team model to more of a federated model<\/a>, with a select group of representatives that were product-area, subject-matter, or platform experts.<\/p>\n

<\/div>
<\/svg><\/div>

\"The Council spread accountability, ownership, and decision making to a set of individuals who were uniquely positioned as experts across the company. \"<\/p><\/span><\/blockquote>\n

Their responsibilities were to be a more formalized augmentation of the Design Systems team, who would meet every two weeks to give updates on anything happening within their product area that could impact everyone and to evaluate, advise, and make decisions on proposed changes to the system. They were also responsible for sharing those decisions and updates with their respective teams. Representatives would rotate roughly every six months to give more individuals an opportunity to participate.<\/p>\n

\"\"\"\"<\/a>The makeup of the Council mirrored the surface area our systems supported.<\/p>\n

It increased visibility and discussion across the product org about what work and decisions were made about our design system, and what needs and issues were coming up that needed to be addressed. It shortened feedback loops between product teams needs and the Design Systems team, making it easier for discussion to happen as soon as possible when our systems weren\u2019t serving them.<\/p>\n

The Council spread accountability, ownership, and decision making to a set of individuals who were uniquely positioned as experts across the company. By being part of the conversations about the impacts those changes might have on our entire system, it incentivized everyone to think systematically.<\/p>\n

Amplified Effects<\/h2>\n

Beyond increasing investment and participation in our systems across the company, there were additional outcomes that had a positive impact on our work and Etsy at large:<\/p>\n

    \n
  1. It clarified our goals.<\/strong> To make these programs useful, we had to improve our contribution process, how we evaluated and measured success for those contributions, and how we prioritized the work to have the greatest impact. Each person who participated in these programs brought an opportunity to question and uncover areas where we could not only make the components better and documentation clearer, but also the process of using and contributing to our system easier.<\/li>\n
  2. Created more considered and thoughtful additions to our systems.<\/strong> It provided exposure to the challenges and needs of individual product teams with that of maintaining and scaling a global system, thus creating a more resilient one.<\/li>\n
  3. Increased communication and trust across teams<\/strong>. People got to collaborate<\/a> with others they wouldn\u2019t otherwise get to as part of their regular work. The relationships created during these different programs created more open channels of communication. People were more inclined to reach out to Design Systems if they had a question and the speed at which information was shared increased.<\/li>\n<\/ol>\n

    The Work Is Never Done<\/h2>\n

    Through our experiments, we learned design systems are more than components and guidelines. They\u2019re living organisms made up of the relationships and mechanisms you use to foster collective ownership. Making design systems successful is just as much about creating a people system as it is about creating a technical or operational one. You have to make it easy for everyone to feel responsible for the system with structures that form sustained channels of education and communication between teams. After all, they only work, adapt, and remain resilient because of the people involved.<\/p>\n

    <\/div>
    <\/svg><\/div>

    \"Design systems are more than just components and guidelines. They're living organisms made up of\u00a0relationships and mechanisms you use to foster collective ownership.\"<\/p><\/span><\/blockquote>\n

    Many thanks to\u00a0Ara Kim<\/a>,\u00a0Giovanni Fernandez-Kincade<\/a>,\u00a0Seth Daggett<\/a>,\u00a0Marco Suarez<\/a>, and\u00a0Katie Sylor-Miller<\/a>\u00a0for taking the time to read this post and give thoughtful feedback. \u2764\ufe0f<\/p>\n

    Originally posted on Magera's Medium<\/a> page.<\/p>\n","protected":false},"excerpt":{"rendered":"

    A little over nine months ago, I left Etsy to co-found Related Works. During my last year and a half there, I managed Etsy\u2019s first dedicated Design Systems team. Below are my thoughts about what it meant to make the team and the work successful. As tech companies grow, the creation of their design system can become a powerful and… Read More ￫<\/a><\/p>\n","protected":false},"author":319,"featured_media":19119,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[484],"tags":[],"class_list":["post-19056","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-systems"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n