Our goal with this tool was to help designers get from Zero-To-One as quick as we can through onboarding when we have new hires on the team.

Previously I’ve worked on a design system checklist for design systems. This list was expansive, and geared towards a high level of detail outlining what our developers expect of our design system designers. Though this list is massive, it’s not an “End of process” checklist. If you were to check things off after you’ve completed the work, the list would feel like too much.

This led us to coming up with a better solution for managing this list, and splitting it up into two goals:

• Create a design checklist for what we expect of our Senior Product designers that can sit as a companion tool
• A reference list for our design system team (including external contributors) to implement during their work on highly technical design system components

High Level Steps

• Validate Definition of Done standards with teams involved
• Gather and provide documented examples of best practices
• Define the workflow for design checks and balances
• Evangelism for design standards

Product Design Interview Process

During the first few weeks, we set out to understand more about what our product partners experience when working with the designers in our organization.

We interviewed nearly 60 people across Engineering, Product Management, and our Design Leads. This gave us a current landscape of the current expectations and pain points they run into when they collaborate with the design partners on their team.

We ran workshops with small groups of people, batching together some potential solutions to general design pitfalls at the company.

We also ran workshops with other product partners like Accessibility, UX Research, Internationalization, Content Designers, and the Design System team.

We gathered everyone’s requirements and expectations when working with senior-level designers and refined our approach to our designer’s definition of done.

Piloting with Design Teams

Our first pilot was to have designers go through a document that outlined each requirement. This was the lowest, most viable way we could get our checks and balances for designers out the door.

This bought enough time for me and another developer to build out a custom tool for Figma that worked like a plugin. This widget would sit on the main canvas as a companion tool allowing people to check off things that applied to their work as they worked on the file.

As we gathered feedback from our team, we made really rapid design changes to directly address feedback.

These changes made the design a lot less overwhelming and hooked our Figma widget up to more integrations like analytics and our google feedback forms

Testing and Refinement

We were able to take direct feedback from the org which allowed leads to work with us on the progress and time savings it was generating for their teams. This feedback led to micro adjustments to things like content and interactive control.

Final Product

The final product works like a charm, allowing progress to move along at the same pace the designer works through their product problem.

Teams have reported fewer bugs as a result of edge cases being covered by design and communication processes being improved.

Main Features

• Progress tracking percentages that update from edited lists or checked off items
• Separated lists of expectations per check-in point. These teams curated their lists to be as succinct but effective as possible.
• Feedback form
• Collapsible side bar
• An automatic light/dark mode
• Summary of completed work once at 100%

You can check out the interactive widget below: