Small Steps, Big Changes
By: Ben Lister
Tags: Figma, UX Design, Product Design, Design Systems

Note: This article was originally published here.

During Gusto’s 2019 brand refresh, the Design Systems Team created dozens of components, UI libraries, and assets for the company’s hundreds of engineers and designers. After rebrand work wound down, the systems team shifted focus elsewhere.

Assets from Gusto’s 2019 brand refresh

As the Design System became widely adopted, components and patterns started bending and stretching in new ways, beyond their original scope. The volume of incoming questions and requests to the Design Systems Team made allocating time to work on new projects a challenge.

Maturing with the system

We outgrew our team model and knew that to continue making meaningful progress on system improvements, long-term planning, and system advocacy, we would have to adjust how we work. This would enable engineers to focus on component evolution and reducing tech debt and designers to work with peers to define patterns and keep our UI libraries up to date. To avoid becoming reactive and having to pivot when our partners had a new request, we decided to evolve from a centralized team model to a hybrid of a federated model. With this change, our centralized team would partner with other product teams to steer contributions while so we could focus on advocacy, maintenance, and the long term vision of the system.

A slide from a spring 2020 presentation, graphic by Juliann Wheeler

Start by listening

We began with a listening tour, collecting feedback from engineers and designers across the company (our customers). In phases, we collectively met with peers for 30–60mins and discussed pain points, inefficiencies, and opportunities.

When we reviewed the feedback, it was clear that adding more visual examples and usage guidelines would be big wins for our design system and its users. The Design Systems team already had much of the information our peers were looking for in various places, but without a single source of truth, we became an information silo.

The disconnect was: regardless of how much documentation we had, if we couldn’t find more efficient ways to share it, it wasn’t helpful. To paint the picture: our peers were out hunting for treasure but had to sail to us each time they needed to look at the map.

Illustration by Amanda Ortiz for the Gusto Brand Studio

Taking smaller bites

With a better understanding of our peers’ pain points, we assessed the scope of our responsibilities as a team and concluded that we knew the only way to make meaningful progress was together. We decided to start looking for partners and advocates across the company who had the availability to collaborate with us. This freed us up to reframe our objectives and begin the shift from large long-term projects to small pieces shipped incrementally.

The pitch to potential collaborators was simple: help us help you to stay unblocked. In turn, we’ll reduce overhead for future projects together. The bonus was this collaboration would also increase our domain knowledge, as we would be more connected to the day to day of our peers and their teams. We also used the opportunity to develop and test a new intake process for system requests with collaborators.

The output was a new component proposal template in Figma. Since rolling out the new intake model earlier this year, we have been able to see a noticeable reduction in Slack messages, emails, and expensive meetings. Taking it a step further, we also built a proposal generator plugin in Figma to help speed up the proposal creation process.