Custeed Design System 🚗 🏍

Plateforme de fidélisation et de performance client pour et avec les professionnels de la mobilité.

Product

SaaS app

Expertise

UX Design, UI Design

Deliverables

Component library & doc

Outils

Figma, Notion, Zeplin

Date

Q1, Q2 2022

Project overview 📝

Parmi les missions qui m’ont été confiées chez Custeed, la conception et le maintien d’un Design System dédié aux différentes marques/produits de l’entreprise Custeed.

Ce nouveau référentiel design unique offre une bibliothèque de styles visuels, de composants et d’autres éléments graphiques (UI Kit), afin que l’adoption du produit puisse être plus efficace et plus cohérente.

Un Design System est une collection de composants réutilisables, guidés par des normes, directives et consignes claires, qui peuvent être assemblées pour construire un nombre quelconque d’applications. Leur nécessité va dans le même sens avec le besoin d’échelle, d’efficacité et de cohérence dans la conception.

Dans ce projet, vous verrez certains des composants que j’ai construite pour ce Design System, mais un DS est beaucoup plus qu’une simple bibliothèque de composants. S’il est construit correctement, il est l’élément vital de vos produits. N’hésitez pas à jeter un coup d’oeil sur ce que j’ai réalisé ci-dessous.

Les fondations 👷🏼‍♂️

Typographie

J'ai choisi "Lato" car la forme géométrique des lettres et l'espacement entre les caractères sont parfaits. Elle est également très polyvalente, avec plusieurs variations de taille, ce qui en fait une police idéale pour les titres et le corps du texte.

Couleurs

Chez Custeed, chaque couleur a un rôle assigné, qui détient une signification spécifique basée sur la façon dont ils fonctionnent dans l'interface. En définissant les rôles des couleurs, il est plus facile de les modifier et de les personnaliser par la suite.

Icônes

J'ai opté pour un style d'icônes simple, car les icônes détaillées augmentent la charge cognitive. Je me suis concentré sur la simplicité, afin d'aider les utilisateurs à comprendre la symbolique de l'icône, et pouvoir reconnaître les icônes sur des écrans plus petits.

Spacing & Grid system

Pour Le Design System de Custeed, j'ai travaillé sur un système de grille de 4px, composé d'une grille de 12 colonnes et d'une grille de base de 4px. Pour le système d'espacement, j'ai opté pour un guide basé sur les rem qui s'aligne sur la grille de 4px.

Les composants 🍔

Boutons

Les boutons sont principalement utilisés pour des actions directes telles que « Ajout un utilisateur », « Exporter » ou « Enregistrer ». Les boutons simples, qui ressemblent à des liens, sont utilisés pour des actions moins importantes ou moins utilisées.
Dans ce système, un seul bouton peut avoir plusieurs états différents. J’ai décidé d’utiliser plusieurs états dans le Custeed Design System, ainsi que plusieurs types de boutons différents. Les plus courants sont : Primary, Secondary, Outline, Outline monochrome, Succes, Warning, Critical, Outline, Outline monochrome, Plain, Plain monochrome, etc. Chacun d’entre eux a une version d’icône qui lui est associée.

Text fields

L’autre grande catégorie de composants que j’ai construite pour Custeed est celle des champs de formulaire. Ils sont très similaires aux boutons dans le sens où ils doivent s’adapter à plusieurs états différents. Une des plus grandes choses que j’essaie de garder à l’esprit lors de la conception des champs de formulaire est l’accessibilité. Je m’assure que le titre du champ ne disparaît pas lorsqu’il est sélectionné et qu’il existe d’autres indicateurs que la couleur pour les erreurs. Il existe également d’autres composants, tels que les listes dropdowns, les radios, les checkboxes, les toggles, etc, et bien d’autres, qui sont essentiels.

Les modules 🏗

Résultats 🎉

Un Design System est comme un organisme vivant : il est complexe et évolue constamment. Ce que j'ai montré ici n'est qu'une partie de ce qui compose un Design System complet. Un DS complet contient les éléments suivants :

📒 Documentation :

Un espace partagé sur Notion a été créé où je précise toutes les directives de chaque composant et les consignes à respecter, et comment utiliser le Design System en face de conception et prototype.

📕 Langage visuel :

Un guide a été créé de ce à quoi ressemble la marque Custeed et ses différents produits.

📗 Bibliothèque des patterns :

Également appelée "bibliothèque de composants", elle comprend ce que vous voyez ci-dessus.

📘 Guidelines de la marque :

Comprend les principes, le ton et la voix, le style d'écriture, etc. C'est des consignes plutôt orientées vers la discipline de l'UX Writing.

📙 CSS framework :

La bibliothèque des composants était créée sur ZEPLIN, avec l'aide des développeurs Front-end, afin de construire un produit scalable et exploitable.