Le Lab Orange est un programme et une plate-forme digitale d’échange et de partage autour de l’innovation et des nouvelles technologies. Il manifeste la volonté d’Orange de placer le client au cœur de sa stratégie. C’est une communauté d’utilisateurs, appelés Lab Explorers, qui contribuent à élaborer de futurs produits et services avec les équipes Orange.
En octobre 2017 j’ai intégré l’équipe du Lab Orange pour la refonte complète de la plate-forme. Comme UX/UI Designer j’ai été chargé de concevoir l’intégralité des interfaces tant coté front que la plate-forme d’
Mon rôle, en plus de UX Designer coté conception (Wireframe et prototypage) a été de concevoir l’intégralité des interfaces en respectant au mieux la guideline Orange mais aussi en proposant des solutions nouvelles et actuelles. Nous avons donc suggéré de travailler avec Material de Google, ce qui a permis de gagner du temps et d’économiser sur la production global du projet. Créer un Design Système basé sur Material a aussi permis de proposer une nouvelle expérience fluide et agréable pour les utilisateurs.
Qu’est-ce qu’un Design System et pourquoi le mettre en place ?
Un Design System est un outil permettant d’organiser et codifier l’ensemble des éléments visuels et composants d’une interface. C’est un outil évolutif et de référence pour l’équipe de designers et développeurs d’un produit digital.
Dans un Design System on retrouve :
-
Les composants
-
Les règles autour de la typographie utilisée
-
Les palettes des couleurs
-
L’iconographie
-
Des grilles pour organiser les espaces et les éléments
Le Design System permet de mettre en place un modèle de conception, qui non seulement fait gagner du temps mais aussi assure une cohérence de tout l’environnement de l’interface améliorant ainsi l’expérience de l’utilisateur.
Pour créer ce Design System j’ai évidement suivi la méthodologie d’Atomic Design dans la mesure du possible.
ATOMES :
Les atomes définissent la base structurelle du system : la ou les typographies utilisées, les palettes de couleurs, les formes, les grilles et espacements, les icônes… Tout élément et composant créé pour notre design system l’a été en utilisant ces atomes comme références.
MOLÉCULES ET ORGANISMES
À partir des atomes et en suivant les règles de Material, nous avons construit ou adapté les composants. Certains au niveau moléculaire (boutons, input, checkbox…) d’autres au stade d’organisme (menu déroulant, checklist…).
Puis finalement créer et composer les éléments plus complexes, les organismes, comme les sliders, slides, listes, box de connexion ….
Ces trois premiers niveaux du Design System étant définis nous avons pu ensuite concevoir des modèles de templates et de pages pour la plate-forme coté front et coté administration que vous pouvez consulter sur mon portfolio.
One Comment
Aline do Carmo says:
18 octobre, 2019 at 17:25
Super! Merci beaucoup Stéphane pour cet article.