DS Analysis : Decathlon’s Vitamin
By: Justin Marsan
Tags: Design System, Webdesign, Design, Development, Webdev

For the first installment of this series I have decided to take a look at what Decathlon does well in their Design System called Vitamin.

Decathlon’s Vitamin Homepage

The ecommerce brand produces a bunch of very different digital products and it’s no surprise that they’ve been working on a DS, and they did a pretty good job honestly ! Here are a bunch of things I liked about it and I think we should all aspire to emulate in our own projects !

Upfront about the DS values, objectives and structure

Many DS make the effort to share the company values for all collaborators to see, and that’s a very good thing, but Vitamin takes it a bit further, stating the goals and values of the DS itself ! Consistency, velocity, resiliency… It may sound obvious if you’re a designer or a developer, or if you’re interested in DS in general, but I think this is something very important to state for Product Owners, Managers and everyone else that could hear about this tool that sometimes makes them save lots of time, sometimes costs even more !

Vitamin and the team behind it are also very upfront about what they’re working on, their roadmap and who is in the team. I find that very nice, it’s clear for anyone wanting to use it if a component is ready or not and there’s always an easy way to contact someone and get help !

Vitamin’s Component Status Table

Clear and concise blend of Design and Code

If I’m being honest, most of the DS I find to be well organised are doneby designers and rarely share code. They share the thinking behind the design, the methodology to come up with new products, features and screens that align with brand guidelines but they fall short when it comes to code, which most often lives on a private repo on a secure server that only developers read and write.

Well not here, not with Vitamin !

Simple tabs allow a visitor to learn all about a component from a design or development perspective

It doesn’t look like much but with those tabs Vitamin enables anyone to learn everything they need to know about a component and to ensure that all involved share the same understanding and language about them.

Input fields usage guidelines

Seeing these, one would probably think “well these are just UX good practices, they’re not needed” or “yes well that’s obvious, right ?”… Well maybe for a designer… It should probably be for a frontend developer too… But often a team in a hurry will have to come up with a solution on their own and the person in charge that day to figure out how to solve it may not have that knowledge. Having it here makes sure that everyone gets easy access to that kind of information ! This is a DS that speaks to everyone, making its potential impact so much greater than one that targets only designers and devs…

Accessible by default

As new law passes in France, many large companies are now forced to improve the accessibility of their digital products, which is great but with diverses teams working on different projects with unrelated roadmaps and different skillsets, this really is a difficult beast to tackle ! A DS is a great angle to attack this : one accessible component shared and reused is a lot more ROI than a single element on a single project.

It’s very clear that Vitamin is working with accessibility in mind. Of course because they state it on their homepage, but also because they provide designers and developers with the information they need to produce accessible content.

Contrast Informations for Neutral Colors

With this kind of information any designer will now know that large black text on a medium grey background is acceptable, should they ever need to know. They don’t need to know what the contrast needs to be, or even how to calculate it, they don’t even have to think about it if they’ve never been taught about accessibility, they’re just presented with the right information at the right time.

Onboarding new collaborators

If there’s one opportunity I think is overlooked when creating DS, it’s their ability to serve as a great onboarding to all new contributors. After all a DS often aims to be the repository for all the knowledge and tooling involved in creating new things… It should contain all the knowledge there is, which isn’t easy, but it’s often the end goal… And because we all know people are humans, they don’t like to read, they don’t like to hunt for information and they must be presented with the shortest most digest content fast.

Rewriting a documentation as an onboarding really is a great way to solve those two issues and to help newcomers get up to speed and align with company values quick. Writing your content as if it was to be read by someone new is a very good way to link to relevent information at the right place and to always ensure you’re not skipping on anything you’d think is common knowledge.

Vitamin, once more, takes it one step further, not only does it include the technical steps to use the components, but it also summarizes all ways to get involved, from reporting a bug in an existing feature to contributing yourself to the tool. It goes into great details about the PR system, lists the addresses of the repositories. Simple things really but everything is there.

Trustworthy, open and reliable

Even though it’s incomplete (and honestly how could a DS ever be 100% finished) the way Vitamin is structured is great and I think many companies should aspire to do as good a job as they’re doing. Kudos to the core team and the whole company for the continued effort !