How and why build a Contribution Journey for your Design system?

How and why build a Contribution Journey for your Design system?

image
Are you working within a large group and have been put on a Design system project? Are you overwhelmed? Do you have to handle the constant requests from your team? Don't know where to turn? Having trouble keeping up with the Design system changes? And your colleagues too?

Result: Too many meetings, not enough transparency, and a bonus migraine…

🧑‍💻
So, listen carefully I have the solution to all your problems, you need to create a tool to manage your Contribution journey! The principle is simple: prioritize key projects and distribute the workload among team members. Since you are nice to us, I will provide you with 2 templates that you can download for free so that you can in turn make a healthy contribution within your company!

Oh great! But uh what does a Contribution journey look like? And how do we use it? Well Jamie, it's very simple, during my experience as a UI Designer I built a Notion board to solve this Contribution journey problem. This now allows the company to collect the needs of all its Product Designers and to classify them into different categories.

image

...

I.Template Construction

The Notion table can be organized as follows:

  • Reporter: identify the Designer who expresses the need
  • Assignee: identify to whom the request is intended
  • Resume: space for drafting the need by the "reporter"
  • Use case: explanation of the use case in relation to the need by the reporter
  • Product impacted: specify the product impacted by this need
  • Priority: indicate the urgency and importance of the need
  • Impacted Component: type of components impacted by the need
  • Request type: specify the type of action to be taken (modify an existing component, create a new component, or remove a variant of a component)
  • DSY task decision: for the UI team to decide if the need will be dealt with, put on standby because more information is needed, or refused
  • Comments by Ui team: for the UI team to explain in comments the reasons for its choices if it has put a need on standby or not to do
  • ChangeLog aligned: for the Product Manager to check if the Changelog has been addressed by the need
  • Already dev: for the Product Manager to check if the component has been developed by his team of Developers
  • Status design: specify the status of treatment of the need by the UI team (not yet started, in progress, under review, or completed)

...

II.Choose the views that correspond to you

image

To facilitate collaboration and navigation in this table, feel free to add filters:

  • By status
  • By product
  • By component
  • By assignee
  • By reporter

But that's not all! You will also be able to use a Figma file called "Contribution Sandbox" to collaboratively work on new components to integrate into the Design system.

...

III.The Contribution Sandbox file on Figma

image

This file includes several pages distributed in various sections:

  • The “🐣 Onboarding” section includes the following pages:
    1. The Getting Started page explains how the file works
    2. The Release note page allows to indicate which components have been added, modified or removed since the last update of the file.
    3. The Overview page provides a status report of all the components present in the file
  • The “📢 REQUEST” section allows Product Designers to build their ideal component.
  • The "✍️ IN PROGRESS" section allows the UI team to rework the component, drawing inspiration from what was done on the "Request" page
  • The “🔍 IN REVIEW “ section is where the Lead Designer checks the final version of the component produced by the UI team and decides if it can be validated or if it requires further modifications
  • The “🎉 DONE” section is where the component is validated and ready to be integrated into the Design system
  • The “🗑️ OLD” section is where old components are archived once they have been integrated or rejected.

The more observant among you will have noticed that the request, in progress, done and old sections each have 3 sub-pages. This is because they should have as many sub-pages as you have products linked to your Design system. In this example, I limited myself to 3 products but feel free to modify the file according to your needs.

...

IV. Conclusion: migraines are over!

image

By using this contribution journey template on Notion and our "Contribution Sandbox" Figma file, you will be able to improve the management of your Product Designers' requests and ensure that all new components that are added to the Design system comply with your company's standards. This will allow you to work more efficiently and focus on the tasks that have the most impact on your team.

🧑‍💻
Do you want to implement a contribution journey in your company? I invite you to download the Notion template and the Figma template that I created for you.

You will only have to customize the columns according to your needs and invite your colleagues to participate. I hope that these two templates will help you save time and avoid a few headaches!