Workbench Design System

The Workbench design system homepage I designed in 2020.

Research

During my onboarding, I interviewed 20 cross-functional team members—including designers, engineers, researchers, and content designers—to understand their experience with the existing system. I gathered insights about their priorities, pain points, and feature requests. Additionally, I analyzed data from a recent internal NPS survey about the design system usage.

Key findings:

• Confusion about the system's scope and definition—users weren't clear if it referred to React components, Figma files, or documentation on Confluence.
• Significant discrepancies between Figma and code.
• Inconsistent visual language across the platform due to the absence of design tokens.
• Documentation that was insufficient, outdated, and difficult to find.
• A rigid Figma library that lacked usage examples, resulting in frequent component detachment.
• System users were frustrated by the slow pace of meaningful progress.

Based on these insights, I developed a strategic plan to:

1. Develop a memorable brand for the system.
2. Standardize the visual language through design tokens.
3. Create a centralized website serving as the single source of truth for documentation and examples across design, code, and content.
4. Restructure the Figma library to enhance organization and flexibility without compromising design integrity.
5. Implement a robust governance model for managing contributions and prioritizing requests.

Projects

Branding the system

I partnered with Gusto's head of brand to develop a name and brand for the design system. I created a proposal with several themes and ran a workshop with six participants from Brand Studio and Product design teams. Our criteria focused on how each concept bridged product and brand, aligned with brand philosophy and voice, had room to grow with the company, and represented the work of both design and engineering (our primary customers).

In the end, we landed on Workbench. I then partnered with our lead brand designer Amanda to design a logo and a set of illustrations to use on our upcoming website and for marketing the system.

Operationalizing Workbench

After branding the system, I wrote a project plan for creating design tokens and developing a single source of truth website and presented it to Gusto's VP of design. The proposal laid out a six-month timeline with 1-2 month milestones for each phase of the work. The work was prioritized by the biggest opportunities found in team interviews, survey responses and requests in Slack.

Design tokens were first, and after auditing the Figma library, I partnered with a front-end engineer to understand current usage in our platform and align on values. As part of this work, I created a simple tool for exporting styles from Figma and then built HTML/CSS prototypes showing the conflicting values side by side in code. Once we aligned on tokens, I used Style Dictionary to generate JSON files and an NPM package that engineers could consume. I then documented the system with visual examples and held a workshop with 30 designers explaining the new system, how to use it, and where to find documentation.

Examples of the project plan, token documentation, and type token prototype.

Figma library overhaul

The original design system Figma library was organized across a single page in a file. Documentation was annotated in various frames but missing from most components. Additionally, most components were built before auto layout was introduced, making the components rigid and often requiring detachment.

My goals for overhauling the library were to improve discovery, use design tokens, and implement modern architecture with auto layout to make the system more flexible and maintainable. To do this, I broke components out into individual pages with documentation links to the website along with concise Figma-specific context. I also updated the components using the new token styles (the work pre-dated variables), and used booleans and slot components to improve flexibility while maintaining our design opinions, like the size and order of elements to maintain consistency.

As part of the roll-out, the team's other designer, Derek, and I made the decision to release the changes as an entirely new library which would replace the legacy system. To support this work, I used Figma's Design System Analytics to audit existing usage and find which teams and designers would be most impacted. Derek and I met with designers from the impacted teams to develop a migration plan. We set a four-month timeline, expanded our weekly office hours sessions to twice per week, and also allocated part of our schedule for 1:1 support with teams who were most impacted by the changes. The work involved our team aiding in migration in collaboration with designers from across the company.

The result created 1:1 parity between design and code components for the first time, significantly reducing barriers to adoption. The work also drove adoption across the design team from approximately 25% to 100% within just 4 months.

Pre-Workbench Figma library with all components organized on a single page.

New Workbench library with each component broken out into its own page. Documentation links added at the top along with any Figma specific pointers for context.

Adding flexibility with presets and slot components to reduce disconnects.

Contribution

Partnering with my director on developing content requirements, I created a template for contributing to the system. The template was used both internally by our design system team, and by designers on other teams adding to the system. The template organized projects from problem definition, to use cases, to ideation, and finally documentation.

The intake and audit pages framed the work around business and product use cases and collected information on timelines, constraints, and context. The audit pages had space for gathering any internal examples or external inspiration.

I designed and built a Figma plugin to help with the kick-off process. Designers could use the plugin to fill in key details like their name/team, the component name, and details on use cases using a simple HTML form. Once ready, the plugin would generate a new template file with the information and designers could start working on their contribution. The plugin helped reduce overhead and improved discoverability of this key piece of our contribution process.

I collaborated on visual design and organization with another designer on the design system team to develop a reusable design spec template. A design spec was created as part of the component design process and was filled in collaboration with our engineering partners. These specs became crucial for efficiently writing component documentation and as a reference when discussing components with adopting teams.