Cobalt Design System
Design UX/UI
︎ 2019
Suite à la volonté d’harmoniser ces produits aussi bien graphiquement qu’au niveau de l’expérience utilisateur, Docaposte se dote d’un Design System : Le Cobalt Design System.
L’objectif du projet est double : Installer la nouvelle identité Docaposte au sein de ces produits & créer un Design System facile à utiliser et adapter à des produits B2B de natures très diverses.
Ce Design System est à la fois une boîte à outils et un mode d’emploi à destination de l’ensemble des équipes produits pour designer et développer leur produit et/ou leur service en restant en cohérence avec l’univers de la marque.
Pour en savoir plus, vous pouvez directement visiter la documentation en ligne du Cobalt Design System.
L’objectif du projet est double : Installer la nouvelle identité Docaposte au sein de ces produits & créer un Design System facile à utiliser et adapter à des produits B2B de natures très diverses.
Ce Design System est à la fois une boîte à outils et un mode d’emploi à destination de l’ensemble des équipes produits pour designer et développer leur produit et/ou leur service en restant en cohérence avec l’univers de la marque.
Pour en savoir plus, vous pouvez directement visiter la documentation en ligne du Cobalt Design System.
Les partis pris Design
Minimaliste par l’utilisation des couleurs
Structural & Robuste
Monumental, de grands espaces
Humain & pédagogique
Un Design System est composé d’une librairie de composants à destination des designers et d’une documentation en ligne qui fait office de mode d’emploi pour savoir comment utiliser les composants et les mettre en place dans les interfaces des différents produits.
Bénéfice pour les designers
Passer moins de temps à imaginer et créer des composants pour se concentrer davantage sur l’expérience utilisateur.
Bénéfice pour les équipes produits & développeurs
Gagner en autonomie, en sérénité et en efficacité grâce à cette plateforme de référence commune.
Bénéfice pour les designers
Passer moins de temps à imaginer et créer des composants pour se concentrer davantage sur l’expérience utilisateur.
Bénéfice pour les équipes produits & développeurs
Gagner en autonomie, en sérénité et en efficacité grâce à cette plateforme de référence commune.
Comment ça marche ?
L’Atomic Design est un système d’assemblage, d’imbrications de différentes éléments.
Atomes > Molécules > Organisme > Templates > Pages
L’atome est la matière première qui va permettre de construire par assemblage des composants de plus en plus avancés, jusqu’à la création de la page finale du produit.
Les atomes
Les molécules & les organismes
Les templates & les pages
Exemple de construction : les cards
Exemples de composants identitaires
Page de connexion
Les datavisualisations
Exemple de page d’accueil
Les tableaux et les listes
Deux cas concrets d’utilisation du Design System
Maileva
Solution d’envoi multiples pour les entreprises. De nombreux canaux de diffusions physiques (courrier) et numériques (mail, sms ...) sont à la disposition de l’entreprise, personnalisé en fonction de ces besoins.
Maileva s’adresse aux petites et grands entreprises et accompagne l’entreprise de la création de son envoi à l’impression jusqu’à la livraison.
Tracelia
Solution de traçage de chèques qui permet d’automatiser, de simplifier et de sécuriser les démarches d’envoi et de traitement de chèques pour les entreprises.
Tracelia est à 2 fonctions complémentaires, il est utilisé dans les centre de tri de chèques pour organiser le suivi des tournées et pour les clients qui peuvent avoir un suivi précis et en direct du traitement de leurs chèques.
