Cartographie Thales
2021
Design engeneering & Design Ux UiFigma
Conception d'un composant de cartographie pour Thales AVS ayant pour objectif l'homogénéisation des outils de cartographie utilisés par les solutions web Thales AVS FLX.
Cartographie Thales
2021
Design engeneering & Design Ux UiFigma
Conception d'un composant de cartographie pour Thales AVS ayant pour objectif l'homogénéisation des outils de cartographie utilisés par les solutions web Thales AVS FLX.
Cartographie Thales
2021
Design engeneering & Design Ux UiFigma
Conception d'un composant de cartographie pour Thales AVS ayant pour objectif l'homogénéisation des outils de cartographie utilisés par les solutions web Thales AVS FLX.
Durée du projet : 1 mois
Audit Ux Ui, Figma, Design Ux Ui, création de librairie, test utilisateur.
Durée du projet : 1 mois
Audit Ux Ui, Figma, Design Ux Ui, création de librairie, test utilisateur.
Durée du projet : 1 mois
Audit Ux Ui, Figma, Design Ux Ui, création de librairie, test utilisateur.
Contexte
Lors de mon stage de fin d'étude (à L'École de design Nantes Atlantique) en tant que Ux Ui designer au sein du Digital Compétence Center de Thales AVS FLX (Solutions de tableaux de bord pour l'aviation civile), j'avais pour mission d'étudier l'intérêt d'un design system dédié à la branche avionique de Thales au travers d'une série de POC.
La conception d'un composant cartographie, présentait un intérêt majeur pour explorer la capitalisation et conception de composants Figma agnostiques, la cartographie étant l'outil de base de tout produit avionique.
Contexte
Lors de mon stage de fin d'étude (à L'École de design Nantes Atlantique) en tant que Ux Ui designer au sein du Digital Compétence Center de Thales AVS FLX (Solutions de tableaux de bord pour l'aviation civile), j'avais pour mission d'étudier l'intérêt d'un design system dédié à la branche avionique de Thales au travers d'une série de POC.
La conception d'un composant cartographie, présentait un intérêt majeur pour explorer la capitalisation et conception de composants Figma agnostiques, la cartographie étant l'outil de base de tout produit avionique.
Contexte
Lors de mon stage de fin d'étude (à L'École de design Nantes Atlantique) en tant que Ux Ui designer au sein du Digital Compétence Center de Thales AVS FLX (Solutions de tableaux de bord pour l'aviation civile), j'avais pour mission d'étudier l'intérêt d'un design system dédié à la branche avionique de Thales au travers d'une série de POC.
La conception d'un composant cartographie, présentait un intérêt majeur pour explorer la capitalisation et conception de composants Figma agnostiques, la cartographie étant l'outil de base de tout produit avionique.
Ma mission
Après l'étude rigoureuse des requis des différents projets existants, l'objectif était de créer un composant Figma rassemblant toutes les fonctionnalités essentielles et créant des règles d'utilisation permettant de garantir une homogénéité dans l'expérience utilisateur et facilitant la conception des produits web Thales AVS.
Ma mission
Après l'étude rigoureuse des requis des différents projets existants, l'objectif était de créer un composant Figma rassemblant toutes les fonctionnalités essentielles et créant des règles d'utilisation permettant de garantir une homogénéité dans l'expérience utilisateur et facilitant la conception des produits web Thales AVS.
Ma mission
Après l'étude rigoureuse des requis des différents projets existants, l'objectif était de créer un composant Figma rassemblant toutes les fonctionnalités essentielles et créant des règles d'utilisation permettant de garantir une homogénéité dans l'expérience utilisateur et facilitant la conception des produits web Thales AVS.
Capitalisation
Étude de l'existant, définition des requis fonctionnels, définition de l'architecture UI et homogénéisation.
Capitalisation
Étude de l'existant, définition des requis fonctionnels, définition de l'architecture UI et homogénéisation.
Capitalisation
Étude de l'existant, définition des requis fonctionnels, définition de l'architecture UI et homogénéisation.
Étude structurelle
L'étude des différentes cartographies utilisées dans les produits en production à permis d'identifier les fonctionnalités indispensables à une cartographie et les fonctionnalités spécifiques aux besoins projets.
On constate que si l'utilisation du composant est toujours centrale dans le produit, la structure des fonctionnalités internes peut varier.
Étude structurelle
L'étude des différentes cartographies utilisées dans les produits en production à permis d'identifier les fonctionnalités indispensables à une cartographie et les fonctionnalités spécifiques aux besoins projets.
On constate que si l'utilisation du composant est toujours centrale dans le produit, la structure des fonctionnalités internes peut varier.
Étude structurelle
L'étude des différentes cartographies utilisées dans les produits en production à permis d'identifier les fonctionnalités indispensables à une cartographie et les fonctionnalités spécifiques aux besoins projets.
On constate que si l'utilisation du composant est toujours centrale dans le produit, la structure des fonctionnalités internes peut varier.
On constate que sans librairies de composants ou design system identifié, il est difficile d'avoir une homogénéité au travers les produits, malgré des besoins et fonctionnalités globalement similaires, malgré des développements simultanés par des collègues assis côte à côte.
On constate que sans librairies de composants ou design system identifié, il est difficile d'avoir une homogénéité au travers les produits, malgré des besoins et fonctionnalités globalement similaires, malgré des développements simultanés par des collègues assis côte à côte.
On constate que sans librairies de composants ou design system identifié, il est difficile d'avoir une homogénéité au travers les produits, malgré des besoins et fonctionnalités globalement similaires, malgré des développements simultanés par des collègues assis côte à côte.
Zoning des différents produits existant à FLX intégrant une carte.
Zoning des différents produits existant à FLX intégrant une carte.
Zoning des différents produits existant à FLX intégrant une carte
Homogénéisation
Pour créer un layout clair, répondant au besoin d'un composant carte et adaptable en fonction des fonctionnalités requises, j'ai choisi d'utiliser la logique des outils de création Adobe.
La Suite Adobe est un bon exemple d'homogénéité, bien que ses produits présentent des fonctionnalités différentes, ils respectent une même structure :
les outils sont fixes et positionnés à gauche (ou en haut) ;
les panneaux de layers/filtres sont customisables et positionnés à droite.
Homogénéisation
Pour créer un layout clair, répondant au besoin d'un composant carte et adaptable en fonction des fonctionnalités requises, j'ai choisi d'utiliser la logique des outils de création Adobe.
La Suite Adobe est un bon exemple d'homogénéité, bien que ses produits présentent des fonctionnalités différentes, ils respectent une même structure :
les outils sont fixes et positionnés à gauche (ou en haut) ;
les panneaux de layers/filtres sont customisables et positionnés à droite.
Homogénéisation
Pour créer un layout clair, répondant au besoin d'un composant carte et adaptable en fonction des fonctionnalités requises, j'ai choisi d'utiliser la logique des outils de création Adobe.
La Suite Adobe est un bon exemple d'homogénéité, bien que ses produits présentent des fonctionnalités différentes, ils respectent une même structure :
les outils sont fixes et positionnés à gauche (ou en haut) ;
les panneaux de layers/filtres sont customisables et positionnés à droite.
Pour favoriser l'adoption d'un outil, il faut que l'utilisateur se sente à l'aise et trouve des repères.
S'appuyer sur des principes ou des mécaniques standards, présente chez d'autres gros acteurs est une solution efficace pour rendre un produit intuitif.
Pour favoriser l'adoption d'un outil, il faut que l'utilisateur se sente à l'aise et trouve des repères.
S'appuyer sur des principes ou des mécaniques standards, présente chez d'autres gros acteurs est une solution efficace pour rendre un produit intuitif.
Pour favoriser l'adoption d'un outil, il faut que l'utilisateur se sente à l'aise et trouve des repères.
S'appuyer sur des principes ou des mécaniques standards, présente chez d'autres gros acteurs est une solution efficace pour rendre un produit intuitif.
Zoning créa du composant map.
Zoning créa du composant map.
Zoning créa du composant map
Design Ux Ui
Création d'une "identité blanche" et définition des standards d'utilisation.
Design Ux Ui
Création d'une "identité blanche" et définition des standards d'utilisation.
Design Ux Ui
Création d'une "identité blanche" et définition des standards d'utilisation.
Un style versatile
Ce composant à deux contraintes importantes :
Il doit être utilisé dans divers projets n'ayant pas forcément la même identité graphique.
Les fonctionnalités doivent être visible peu importe le fond de carte (sombre, satellite, 2D, ...) ou la couleur du branding du produit.
Le choix s'est alors porté sur une identité "light" et "blury" combinée à une iconographie sobre.
Un style versatile
Ce composant à deux contraintes importantes :
Il doit être utilisé dans divers projets n'ayant pas forcément la même identité graphique.
Les fonctionnalités doivent être visible peu importe le fond de carte (sombre, satellite, 2D, ...) ou la couleur du branding du produit.
Le choix s'est alors porté sur une identité "light" et "blury" combinée à une iconographie sobre.
Un style versatile
Ce composant à deux contraintes importantes :
Il doit être utilisé dans divers projets n'ayant pas forcément la même identité graphique.
Les fonctionnalités doivent être visible peu importe le fond de carte (sombre, satellite, 2D, ...) ou la couleur du branding du produit.
Le choix s'est alors porté sur une identité "light" et "blury" combinée à une iconographie sobre.
Ce composant est pensé pour les utilisateurs mais sera d'abord utilisé et retravaillé par un designer.
Ce composant est pensé pour les utilisateurs mais sera d'abord utilisé et retravaillé par un designer.
Ce composant est pensé pour les utilisateurs mais sera d'abord utilisé et retravaillé par un designer.
Éléments d'interface avec différents fonds de carte
Éléments d'interface avec différents fonds de carte
Éléments d'interface avec différents fonds de carte
Le cadre du Bac à sable
Pour favoriser la réutilisation du composant sa customisation par le designer qui l'utilise dans son projet doit être facilitée, tout en créant une logique claire et stricte pour maintenir son intégrité au travers du temps.
Cela revient à "définir les contours d'un Bac à sable" dans le quel le designer doit respecter les règles tout en façonnant le contenu comme il le souhaite pour l'adapter au besoin du produit qu'il conçoit.
Le cadre du Bac à sable
Pour favoriser la réutilisation du composant sa customisation par le designer qui l'utilise dans son projet doit être facilitée, tout en créant une logique claire et stricte pour maintenir son intégrité au travers du temps.
Cela revient à "définir les contours d'un Bac à sable" dans le quel le designer doit respecter les règles tout en façonnant le contenu comme il le souhaite pour l'adapter au besoin du produit qu'il conçoit.
Le cadre du Bac à sable
Pour favoriser la réutilisation du composant sa customisation par le designer qui l'utilise dans son projet doit être facilitée, tout en créant une logique claire et stricte pour maintenir son intégrité au travers du temps.
Cela revient à "définir les contours d'un Bac à sable" dans le quel le designer doit respecter les règles tout en façonnant le contenu comme il le souhaite pour l'adapter au besoin du produit qu'il conçoit.
La structure définie des composants
La structure définie des composants
La structure définie des composants
Le composant cartographie et ses options
Le composant cartographie et ses options
Le composant cartographie et ses options
Design system
Création des composants de la librairie et la documentation.
Design system
Création des composants de la librairie et la documentation.
Design system
Création des composants de la librairie et la documentation.
Le design engineering
En respectant le principe du design atomique (imbrication de composants) et en utilisant les fonctionnalités de Figma (en 2021), j'ai construit les composants pour qu'ils soient les plus simples d'utilisation et d'adaptation par les designers.
Le design engineering
En respectant le principe du design atomique (imbrication de composants) et en utilisant les fonctionnalités de Figma (en 2021), j'ai construit les composants pour qu'ils soient les plus simples d'utilisation et d'adaptation par les designers.
Le design engineering
En respectant le principe du design atomique (imbrication de composants) et en utilisant les fonctionnalités de Figma (en 2021), j'ai construit les composants pour qu'ils soient les plus simples d'utilisation et d'adaptation par les designers.
Le composant est formé lui-même de plusieurs composants (atomes, molécules) ayant des états, des propriétés ou des options différentes.
Ces "organismes" peuvent être utilisés comme des "templates", pouvant être désassemblés et retravaillés.
Le composant est formé lui-même de plusieurs composants (atomes, molécules) ayant des états, des propriétés ou des options différentes.
Ces "organismes" peuvent être utilisés comme des "templates", pouvant être désassemblés et retravaillés.
Le composant est formé lui-même de plusieurs composants (atomes, molécules) ayant des états, des propriétés ou des options différentes.
Ces "organismes" peuvent être utilisés comme des "templates", pouvant être désassemblés et retravaillés.
Organisation des composants formant la barre d'outils.
Organisation des composants formant la barre d'outils.
Organisation des composants formant la barre d'outils.
Documentation contextuelle
La documentation est une partie essentielle d'un design system.
L'ensemble des assets doivent être trouvés, compris et utilisés à bon escient par tous les acteurs d'un projet.
Pour faciliter l'accès aux règles d'utilisation, nous avons fait 2 choix :
Avoir une documentation contextuelle directement intégrée dans l'asset.
En mettant en place une structure de documentation : information + instruction, pour chaque niveau de composant.
Documentation contextuelle
La documentation est une partie essentielle d'un design system.
L'ensemble des assets doivent être trouvés, compris et utilisés à bon escient par tous les acteurs d'un projet.
Pour faciliter l'accès aux règles d'utilisation, nous avons fait 2 choix :
Avoir une documentation contextuelle directement intégrée dans l'asset.
En mettant en place une structure de documentation : information + instruction, pour chaque niveau de composant.
Documentation contextuelle
La documentation est une partie essentielle d'un design system.
L'ensemble des assets doivent être trouvés, compris et utilisés à bon escient par tous les acteurs d'un projet.
Pour faciliter l'accès aux règles d'utilisation, nous avons fait 2 choix :
Avoir une documentation contextuelle directement intégrée dans l'asset.
En mettant en place une structure de documentation : information + instruction, pour chaque niveau de composant.
Exemple d'une documentation contextuelle.
Exemple d'une documentation contextuelle.
Exemple d'une documentation contextuelle.
Démonstation
Utilisation du composant cartographie.
Démonstation
Utilisation du composant cartographie.
Démonstation
Utilisation du composant cartographie.
Enregistrement vidéo de l'utilisation du composant map.
Enregistrement vidéo de l'utilisation du composant map.
Enregistrement vidéo de l'utilisation du composant map.
