Laurent Thiebault, a Tech Lead at Decathlon, met with us over Zoom to discuss how Decathlon have spent the past four months scaling their design system using zeroheight.
Building Decathlon’s design system
When Laurent joined Decathlon in March 2019, he was surprised that Decathlon did not have a design system; there were styleguides in various places, but the teams lacked a common framework for their projects. Earlier this year, Laurent was given the opportunity to start a proof-of-concept to create digital guidelines and since then the Decathlon Design System has quickly gained traction within the company.
In just 4 months, the Decathlon team (5 core team members, 30 additional contributors) have built documentation that is being used in 19 countries and consumed by 17 products. The design system has grown to include not only digital products, but guidelines for designers across all disciplines. The design system is named Vitamin – a play on Decathlon’s outdoor-sports focus and the micronutrients that combine to form a healthy organism (see Atomic design).
In just 4 months, the Decathlon team (5 core team members, 30 additional contributors) have built documentation that is being used in 19 countries and consumed by 17 products.
Decathlon chose zeroheight for their documentation because they “wanted to have a platform that allows collaboration between designers and developers”. They use zeroheight to document the design system “for all products, all business units, even for partners, startups and agencies”. Thanks to zeroheight, Decathlon can easily sync designs from Sketch and Adobe XD and code from Storybook into their documentation. They also use analytics to measure the success of their design system.
Taking an iterative approach
Decathlon treats their design system as a product and took an iterative approach to their documentation, making use of zeroheight’s Releases feature to build new versions. “We interviewed designers and we regularly speak to our users (designers and developers) in order to prioritize our guidelines; it’s our users who prioritize which component is built next. Each month we send a survey to our stakeholders and we propose some guidelines in order to influence our roadmap. We respect the answers, and we respect the order gathered from our stakeholders. Our next component will be ‘Dropdown’ as more than 50% of our users want this component.”
Laurent believes the iterative approach encourages adoption, both because users can influence the roadmap and also because they’re curious to see what updates are in a new release of the documentation.
The initial aim of Vitamin was to provide a framework for their digital products in order to “design consistent and quality user experiences.” They started small (v0.1) with colors and typography.
Vitamin v0.1, built on zeroheightGuidance on how to use colours in Decathlon’s dialogue and card components
As the team added content to the documentation and started to build out the system, the value became clear. “In some countries, they don’t have the resources to have several designers and developers. Decathlon is headquartered in France, so we have a lot of designers…but in some countries, there’s one person to do UX, UI, and front-end dev. In those countries, people were very happy to have guidelines to help concentrate their efforts on just their project and not ‘What is the right Decathlon blue?’ etc.”
Vitamin v0.3, built on zeroheight
Beyond digital
Although the initial focus was digital, the project gained momentum, and other teams soon saw the value in documenting their designs and workflows. “When I presented v0.3 to the CDO, he talked to our CEO and to our COO, and they saw the opportunity to have a lot of guidelines – not just for digital.”
Laurent was soon contacted by brand designers, architects, and physical product designers. “We have a lot of designers in different jobs, and that’s why we have turned to a design system for everyone. Now, Digital is just one part – it’s just a section in our Decathlon design website.”
We have a lot of designers in different jobs and that’s why we have turned to a design system for everyone. Now, Digital is just one part – it’s just a section in our Decathlon design website.
Decathlon Design System v0.6, built on zeroheight
Some plans are temporarily delayed due to COVID-19, but in the future, they plan to have guidelines about how to design their retail stores. “In one or two months, we will have guidelines about the physical world i.e. ‘how can I present my store?’. If I am in a country and I don’t know how to arrange a Decathlon store, I have to email some person from France, etc. No! In the future, we want to have those guidelines in this website.”
“In one or two months we will have guidelines about the physical world i.e. ‘how can I present my store?’”
Proving the value of a design system
Laurent believes that establishing a clear vision and process for contributing to the design system upfront was vital. They were able to show-not-tell when it came to the benefits. “It was easy to convince our stakeholders with the concrete documentation.” Decathlon have an internal wiki where they display the mission of their design system, live statistics, KPIs and which products are consuming the design system. This means everyone understands the aims of the design system and how well it is being adopted across the company. It also helps to prove the value of the design system.
“It was easy to convince our stakeholders with the concrete documentation.”
KPIs tracked by Decathlon
The design system team is transparent with the status of a new component, and each is designed and documented before passing to the design review stage. “We have some synchronous rituals. Every two weeks, we have design reviews to pass those tickets to the next column.” This review is “composed of lots of designers from around the world.” The same applies to developing the code.
The plan is to expand the Decathlon Design System in 2021, “it was a proof of concept, and now we have proven the value.” Next year they intend to start measuring the impact of the design system on Decathlon’s customers. For Laurent, the end goal is that a customer – no matter if they’re in-store, online, using a mobile application or smartwatch – should always recognize that they are at Decathlon.
You can find Laurent on Twitter. If you’d like to start building your documentation site on zeroheight, sign up for free.
🍪 We use cookies to ensure you have the best experience – see our policy
