Neo
  • NEO
  • BPCE
  • Banque Populaire
  • Caisse d’Epargne
  • Natixis
  • Banque BCP
  • BTP Banque
  • Casden
  • Crédit Coopératif
  • Crédit Foncier
  • Crédit Maritime
  • Banque Dupuy de Parseval
  • Banque MARZE
  • Banque Palatine
  • Banque de Savoie
  • SOCFIM
  • Joire Pajot Martin
  • Compagnie Européenne de Garanties et Cautions
  • Banque de Nouvelle Calédonie
  • Banque de Tahiti

Outils

Cette page présente les principaux outils utilisés, nomenclature et organisation des livrables.

Le principal outil d’archivage, de partage et de suivi de conception des livrables UX est InVision. Les contributeurs des projets doivent demander la création d’un compte utilisateur au lead UX du projet.

Voici comment les projets sont nommés dans inVision :

Exemple 1
DP_PLC_Natif_DPN3

  • DP : Nom du produit (DeepPurple)
  • PLC : Nom de la feature (Pilotage de La Carte)
  • Natif : Technologie (Natif ou RWD_XS, RWD_MD…) 
  • DPN3 : Référence au nom du projet dans Confluence et si besoin, numéro du lot (Deep Purple Native lot 3)

Exemple 2 
SP_CreditImmobilier_RWD_XS

  • SP : Nom du produit (Souscription)
  • CréditImmobilier : Nom du tunnel de souscription
  • RWD_XS : Technologie (Natif ou RWD_XS, RWD_MD…) 

Il peut être réalisé via l’outil Overflow.io, le rendu sera accessible soit en ligne (via un lien direct avec possibilité de renseigner un mot de passe), soit via un export PDF qui sera rangé dans la partie ASSETS du dossier InVision du projet.

Sur cet exemple on peut voir 2 flowcharts rangés dans l’onglet ASSETS
Lorsque l’on clique sur l’un des flowcharts, on peut voir l’historique des versions et les télécharger
Il est rangé dans l’onglet SCREENS du dossier InVision.
 
Cependant des SECTIONS peuvent être crées par le designer dans cet onglet pour ranger les différents types de livrables (ex: Cas nominal, Gabarits, composants spécifiques et leurs spécifications,…).
 
Les espaces projet inVision sont partagés. Vos modifications seront visibles par la totalité de l’équipe travaillant sur le projet (Ouverture/fermeture de section, nouvelle section, etc…).
Écran représentant la carte du client fictif “Sacha Valois”
Exemple de SECTIONS scindant des écrans principaux, des parcours complexes, des gabarits et des spécifications

Ils sont rangés dans la SECTION “Gabarit” de l’onglet SCREENS.

Un gabarit peut correspondre à plusieurs écrans ou cas fonctionnels d’affichage. Ceci à pour but de faciliter la mise à jour des maquettes et le suivi des évolutions graphiques et l’intégration.
Exemple de SECTIONS scindant des écrans principaux, des parcours complexes, des gabarits et des spécifications

En plus des gabarits, des spécifications UI sont placées dans l’onglet « assets ». Elle précisent le positionnement des éléments de l’écran et les références aux composants, typographies et couleurs utilisées dans les écrans.

Ces composants n’existent pas encore dans la charte. Il ne sont pas disponibles dans la librairie de composants transverses 89c3. 

Dans ces cas-là, une section COMPOSANTS est créée dans laquelle vous pourrez retrouver les redlines (Positionnement et marges entre les éléments) et les spécifications détaillées  (UI, interactions, animation, etc…).
Exemple d'une spécification détaillée d'un composant à vocation transverse. (Header de parcours de souscription)

Workflow

Pour informer sur le niveau de  maturité des écrans et permettre le suivi du design de ceux-ci, le designer peut être amené à utiliser l’onglet WORKFLOW d’InVision. 
 
⚠️  Les pages InVision sont dépréciées, elles ne seront plus mise à jour. Elles restent néanmoins à disposition.
 
Celui-ci ressemble un peu à JIRA, et permet de ranger les écrans en groupe suivant d’autres critères que les SECTIONS.
Exemple d'organisation des écrans pour tenir l’équipe de développement informée de l'évolution du projet.
Pastille “jaune” et “verte” ici

Il est à noter que la couleur associé ici se retrouve également sur les cartes-écrans de l’onglet SCREEN.

Toujours dans l’onglet WORKFLOW, des précisions peuvent être apportées sur un écran. Précisions sur une fonctionnalité, messages à remplir, liens renvoyant directement aux composants concernés sur le site 89c3.design etc…

Commentaires

party popper Pour réagir au mieux (au plus rapide et avec précision) il faut utiliser la fonctionnalité commentaires.
🙋‍♂️ InVision permet de citer des personnes via la saisi “@”.
right-pointing magnifying glass N’hésitez pas à changer la typologie de votre commentaire s’il s’agit d’une remarque, d’une question ou d’une information, 
Au clic sur un écran, choisir le 3ème…
Il n'y a pas de remarques inutiles ! 

L’inspecteur

🖥 Via l’inspecteur, InVision permet d’explorer les caractéristiques graphiques des écrans. Il est très utile pour les développeurs ! 
🔥 Il arrive que les données issues de l’interprétation automatique des sources Sketch soient approximatives ou difficilement exploitables. C’est notamment le cas les marges des blocs de texte. En cas de doute, contactez le designer du projet.
👉 Cette fonction complète les spécifications UI détaillées fournies par le designer du projet pour les composants graphiques spécifiques et la charte 89C3 pour les principes fondamentaux et composants transverses. 
Au clic sur un écran, choisir le 4ème...
L'inspecteur permet de connaitre l'emplacement approximatif des éléments graphiques et des informations sur leur couleur, leur taille, ...
A vous de jouer !