Laurent
Thiebault

Engineering Manager / Design System Lead at Decathlon

🏆

🏆

Laurent is the finalist of the Design Systems Awards («Best Plugin» category) for his Figma plugin Variables Converter.

Figma plugin: Variables Converter

Figma plugin:
Variables Converter

Laurent is the Engineering Manager / Tech Lead of the Decathlon Design System called “Vitamin".

Laurent Thiebault

Sabrina Vigil

Thibault Mahé

Zakaria Sahmane

Marie Delattre

Jeffrey Macko

Simon Leclercq

Manon Polle

Design System Team

Team is composed of Sabrina Vigil (Staff Designer / Design Lead), Simon Leclercq (Staff Designer), Marie Delattre (Sr. Product Designer), Thibault Mahé (Sr. Frontend Engineer), Manon Polle (Sr. Android Engineer), Jeffrey Macko (Sr. Apple Engineer), Zakaria Sahmane (Sr. Frontend Engineer), plus an ecosystem of great contributors.

He loves learning new things daily, meeting passionate individuals, and sharing my knowledge with many people. He works part-time as a freelancer to assist companies with topics related to web development and Design Systems.

In parallel, he provides free content related to design system on his blog, newsletter, and YouTube channel. He is passionate about Open Source and always interested in working on new projects.

Team is composed of Sabrina Vigil
(Staff Designer / Design Lead),
Simon Leclercq (Staff Designer),
Marie Delattre (Sr. Product Designer) & Thibault Mahé (Sr. Frontend Engineer), Manon Polle (Sr. Android Engineer),
Jeffrey Macko (Sr. Apple Engineer) & Zakaria Sahmane (Sr. Frontend Engineer), plus an ecosystem of great contributors.

I love learning new things daily, meeting passionate individuals, and sharing my knowledge with many people. I also work part-time as a freelancer to assist companies with topics related to web development and Design Systems.


In parallel, I provide free content related to these subjects on my blog, my newsletter, and my YouTube channel. I am also passionate about Open Source and am always interested in working on new projects with new people.

Can you walk us through the current state of the design system you're involved with?

Our design system has reached a significant milestone after three years of continuous design & development. Our journey has been marked by valuable insights from both our user base, spanning over a hundred products, and broader design & dev communities, which have provided ideas through articles, talks, and contributions to our open-source projects.

In response to these insights, we've embarked on a strategic initiative to build a new iteration of Vitamin. This new implementation is initially in inner source mode, as we have certain confidential aspects to address. However, we're committed to transitioning it to an open-source model next year. This new version boasts several improvements, including a design tokens-based approach with three distinct layers (core, semantic, component), extensive automation capabilities, the introduction of sub-components, better accessibility for styles & components, compatibility with right-to-left (RTL) languages through logical properties, and support for theming and different modes such as dark and light.

What tools do you use to build and maintain your design system?

In our current version of Vitamin, we leverage a combination of tools to build and maintain our design system. For design purposes, we rely on Figma, which facilitates collaborative design efforts. Documentation is managed through ZeroHeight, ensuring comprehensive and accessible guidance for our system. GitHub is our primary code hosting platform, fostering version control and collaboration among team members. 


To showcase our design system on the web, we use Storybook, which offers a user-friendly interface for exploring components and their variations. Additionally, GitHub Actions play a crucial role in automating certain processes, such as asset retrieval and icon management, streamlining our maintenance efforts.

In our upcoming implementation, we are currently in the process of evaluating our documentation solution. However, for managing design tokens, we've adopted Tokens Studio, which allows us to efficiently handle design tokens while providing code transformations tailored to developers on each platform. We've developed custom generators to ensure seamless integration across our ecosystem.

OUR TOOLS:

Figma

Zeroheight

Storybook

Tokens Studio

Github

How do you balance the need for consistency with the desire for creative freedom among your designers?

Maintaining a good balance between keeping things consistent and allowing our designers to be creative is really important for us. Our design guidelines provide a solid foundation, but we don't want to stifle our designers' creativity. We want them to feel free to bring their unique ideas into our designs.

We also provide different options for our components to fit different situations. This way, our designers can choose the one that works best for the project they're working on.

Additionally, we support adding libraries, which are collections of our components customized for specific business needs. These libraries go through a review process to ensure they align with our design system, giving our designers a pre-approved toolkit that helps them work efficiently while maintaining consistency.

How do you stay true to your vision for the design system, even when faced with external pressures or trends (criticism or pushback against your design system)?

Staying true to our design system's vision is paramount, even in the face of external pressures or changing trends. Our commitment to our vision is deeply rooted in a strong sense of purpose and belief in the long-term benefits of a cohesive and user-centric design system.

When faced with criticism or pushback, we approach it with an open mind and a willingness to learn. We view feedback as an opportunity to refine and enhance our system rather than a reason to deviate from our vision. We are steadfast in our leadership and conviction, knowing that a consistent and user-friendly experience is fundamental to our brand's success.

We actively engage with stakeholders, explain the rationale behind our design choices, and demonstrate how our design system aligns with our organization's overarching goals. By fostering a culture of understanding and education, we can weather external pressures and trends, ensuring that our design system remains a beacon of excellence and user satisfaction.

Our commitment to our vision is deeply rooted in a strong sense of purpose and belief in the long-term benefits of a cohesive and user-centric design system.

Our commitment to our vision is deeply rooted in a strong sense of purpose and belief in the long-term benefits of a cohesive and user-centric design system.

How does your team collaborate on the design system? How do you ensure that your design system evolves with the changing needs of your users and stakeholders?

Design at Decathlon has significantly evolved in recent years, establishing a strong feedback loop and fostering a vibrant community among designers and developers. We regularly conduct satisfaction surveys to gather user input and actively encourage users to provide feedback.

In addition, we've implemented an issue system on GitHub with templates that guide users in submitting feature requests or reporting bugs. This structured approach ensures that our design system stays responsive to changing needs and continuously improves.

Are you tracking your design system? If you had to choose one metric to measure the success of your design system, what would it be and why?

Yes, we track our design system's performance through various metrics. However, if I had to pinpoint a single metric to gauge the success of our design system, it would be the “Adoption Score.” This score is derived from a scorecard system where each team self-assesses their use of the design system. We apply a weighted algorithm to these scores, aiming to achieve a result above 50% quickly. This score incorporates critical factors that directly impact our end users, such as ecosystem consistency and reduced team workload.

While we monitor download numbers, the number of ongoing issues, and ticket response times, the “Adoption Score” takes precedence because it reflects the tangible benefits our design system brings to our users and internal teams. It is a good measure of our design system's effectiveness in enhancing the user experience and streamlining our development efforts.

If I had to pinpoint a single metric to gauge the success of our design system, it would be the “Adoption Score.”

If I had to pinpoint a single metric to gauge the success of our design system, it would be the “Adoption Score.”

If you could go back and change one decision you made in your design system journey, what would it be and why? How would that affect your design system journey?

Looking back on our design system journey, I would also consider implementing a more structured and frequent cadence for design system audits and reviews. These audits would have been designed to assess the overall health, relevance, and alignment of our design system with the evolving needs of our organization.

By conducting regular check-ins and audits, we could have identified potential issues and areas for improvement sooner. This proactive approach would have allowed us to make necessary adjustments more swiftly, ensuring that our design system remains agile and aligned with our organizational goals.

Do you use any kind of automation or AI tools? 

Yes, we do employ automation tools as part of our workflow. These automations are event-triggered, primarily activated by events such as pushes to the main branch or individual pull requests. We've also integrated this automation with Slack to keep our team informed about various notifications related to our workflow.

Regarding AI, we use ChatGPT primarily for formatting, debugging, and documentation tasks. It is a valuable resource, helping us ensure we don't overlook any critical elements regarding component releases. ChatGPT plays a role in enhancing our efficiency and maintaining the quality of our design system.

ChatGPT plays a role in enhancing our efficiency and maintaining the quality of our design system.

ChatGPT plays a role in enhancing our efficiency and maintaining the quality of our design system.

Where do you see design systems heading in the next few years?

I envision our design system taking significant strides in the next few years. My aspiration is to make our new implementation open-source, contributing our knowledge and expertise to the global design community. I aim for our design system to be acknowledged as a best-in-class model, setting high standards for excellence.

I dream of seeing organizations worldwide adopting our design system as a solid foundation for their projects. I hope it catalyzes innovation, fostering efficiency and creativity across various industries. Ultimately, I aim to see our design system benefit many users and stakeholders locally and globally as we continue on our journey."

Laurent Thiebault

Sabrina Virgil

Zakaria Sahmane

Marie Delattre

Thibault Mahé

Simon Leclercq

Manon Polle

Jeffrey Macko

Design System Team

What's one thing you wish more people understood about design systems?

One key aspect I wish more people understood about design systems is that they are not just about aesthetics or visual consistency. While aesthetics play a part, design systems are primarily about creating a structured, efficient, and user-centered approach to design and development.

Design systems provide guidelines, components, and processes that streamline and enhance product development. They are a strategic asset that promotes collaboration, accelerates development, and ensures a cohesive and delightful user experience.

In essence, design systems are not just about “how it looks” but about “how it works” and “how it scales,” ultimately benefiting both the end users and the teams building the products.

In your opinion, what are the most overrated and underrated aspects of design systems?

For me, the most overrated aspect of design systems can be the obsession with visual consistency alone. While visual consistency is essential, it's just one piece of the puzzle.

On the other hand, one of the most underrated aspects of design systems is their potential to foster collaboration and communication within cross-functional teams. A well-implemented design system acts as a shared language, aligning designers, developers, and other stakeholders. This aspect can significantly enhance productivity, reduce misunderstandings, and lead to more innovative and cohesive design solutions.

If you could have a coffee chat with any person from the design (system) space, who would it be and why?

If I could have a coffee chat with anyone from the design system space, it would undoubtedly be Nathan Curtis. His extensive experience and contributions to the field of design systems are truly remarkable. I would be eager to pick his brain on topics such as the evolution of design systems, best practices, and the challenges and opportunities he has encountered throughout his journey.

Nathan's insights and wisdom could offer invaluable guidance and inspiration, helping me understand the intricacies of design systems and how to navigate the ever-evolving landscape successfully.

Coffee with Nathan Curtis?

What's one piece of advice that you would like people to remember from this interview?

The main advice I would like people to remember from this interview is that design systems are not just about how things look but how they work together and adapt. Stay open to learning and be willing to change and improve your design system as needed. Being flexible and open-minded can lead to a more successful design system.

What's your favorite thing to do when you are not in design systems?

When not in design systems, I find solace in playing music and spending quality time with loved ones. 👨‍👩‍👧‍👧