Contributing to Our Design System: The (Happy) Tale of Creating a New Component

From being imagined in someone’s head to being added to the design system and ready for use by everyone

Marion Caron
Jul 29 · 6 min read

Designing with a design system (DS) is great. Designing with a design system that’s missing that new component you need can be… scary.

A year ago, I needed a tag picker for one of my projects. We wanted our users to be able to add hashtags to written notes about their client meetings. We didn’t have a tag picker in our design system at the time and I had no clue what the process to create it should be.
Some of my thoughts were:

“How do I do this? Who should I talk to? Should I do it on my own? Should I discuss it with the people working on the DS beforehand? After?”

When I talked to my fellow designer-colleagues, I realized that I was not the only one struggling with this. It became clear that we lacked a clear process to receive, centralize and manage the requests and suggestions from designers using our design system on a daily basis.

That’s why we (the people looking after the design system, that we call the Council) started to think about how we could develop a simple but efficient contribution system. We wanted the system to be:

  1. Collaborative
    Allowing anyone to suggest and work on improvements or new things to be added to the system.
  2. Easy
    Ensuring that the process of contributing and sharing ideas is super simple for everybody.
  3. Transparent
    Centralizing all design-related work and ideas about the DS in one place, accessible to all.

At the time, we had no contribution system and it took me a while and a lot of “adventures” to achieve the desired result of seeing the created tag picker up and running in the design system. This journey triggered the creation of our contribution system.

Now, let’s take a look at how you would create a tag picker following today’s flow.

1. Request creation

Image for post
Image for post
One single entry point for all requests

In the case of our example, the designer needing the tag picker selects the “New component or pattern request” template because, well, he/she wants to create a new component.

The designer then fills in all requested information and creates the issue when done. The Council’s members are always happy to help them getting through that stage if needed.

Image for post
Image for post
Template to fill in for a “new component or pattern” request

2. Check by the Council

Every Monday, the four members of the Design System Council meet and tag all the new issues created the past week in order to prioritize them. They define together 3 types of labels to be added to the tickets.

Image for post
Image for post
3 type of labels are to be added to each request : request outcome, complexity and priority

For our example the tag picker, let’s say the Council chooses the following labels:

  • Something new — it doesn’t exist in the design system and it’s brand new
  • Priority high — it is needed for a project and several other designers would use it on their projects in the near future
  • Complexity 3 — it requires a lot of work from a design point of view

They also assign Henry as the Council helper for that component. His role mainly consists of ensuring that the component is aligned with the design system guidelines and guiding the designer through the different steps of the creation process.

The tagged ticket is then moved to the “Backlog” column.

3. Design process

Image for post
Image for post
The tag picker ticket is now visible at the top of the “In progress” column

The designer working on the component checks the completed steps along the way so that anyone can check up on its progress and see when it will be ready.

Image for post
Image for post
Steps of the design process for a new component
Image for post
Image for post
Quickly see the completed steps (3 out of 5 here) in the card

4. Development

Once the development phase is over, the issue is closed and moved to the “Done” column.

Now, you might think that that’s the end of it for the designer who initiated the request, but there is still one key step to be completed…

5. Documentation

To do this, a new [DOC] issue is created and linked to the related ticket.

Image for post
Image for post
Steps to complete the documentation page

This phase is crucial, as we document all of our components and patterns. It is actually so important that we also have a checklist for the documentation steps (and yes, I do love checklists).

Image for post
Image for post
The [DOC] ticket related to the creation of the tag picker

The designer requesting the new component writes a draft that the Council then reviews. Once everything is validated, it is integrated into a page on our design system website and the asset library is updated if needed.
Once completed, the DOC issue will be closed and moved to the very satisfying “Done” column.

The component can now live happily ever after (but still be edited if needed).

To sum up here’s an overview that illustrates the different steps of the process and the collaboration between designers, members of the Council and developers.

The process of the component request through all the stakeholders working on it (designer, Council and developer)
The process of the component request through all the stakeholders working on it (designer, Council and developer)
Characters illustrations from Humaaans

From being lost with my new component suggestion a year ago to being part of the Council and putting in place the new contribution system, I think we’ve made some great progress.
This system is working well for us so far but is likely to evolve, as we continue our pursuit of the perfect contribution system (if that even exists!).

Thank you for reading and please, feel free to share your thoughts and/or questions, I’m always happy to have a chat!

This article is part of our Design System series: a 5-year overview, 3 false assumptions, rallying people, governance & chaos (part 1). Watch this space for more!

Societe Generale Design

Meet the design practitioners and enthusiasts of Societe…

Thanks to Morgane Peng and Ema Wilson

Marion Caron

Written by

French product designer

Societe Generale Design

Meet the design practitioners and enthusiasts of Societe Generale. We craft meaningful products and experiences for start-ups, corporates and financial institutions.

Marion Caron

Written by

French product designer

Societe Generale Design

Meet the design practitioners and enthusiasts of Societe Generale. We craft meaningful products and experiences for start-ups, corporates and financial institutions.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store