Thomas HELLEGOUARCH Lead UX designer David SERRAULT Head UX Designer Thierry CHARBONNEL UX/UI Senior Designer - Autre planète - Équipe DESIGN SYSTEM Équipe socle IOS et Android Developement Équipe DEV RWD RWD Front-End Developer
un Design System doit rester simple. » M ARS 17 JUIN 17 O CT 17 JAN 18 AVR 18 D EC 18 JAN V 19 UN PEU D’HISTOIRE Design System 89C3 Composants documentés au fil de l’eau dans un fichier Sketch Publication d’un PDF (Charte V1) Début de la création d’un site wordpress Publication du site wordpress Lancement du chantier charte édito Publication de la charte édito mission accessibilité
CSS / HTML qui connait sur le bout des doigts l’accessibilité et le motion design. Un volet « code » intégré à la plateforme de la charte Fusionner les chartes de l’expérience des clients et celle des collaborateurs Le design emotionel : Motion design - Sound design - Haptic feedback Intégrer les portails commerciaux avec des composants et des gabarits qui offrent plus de flexibilité pour respecter l’identité des marques Intégrer l’expérience des marques à 360° > Digital et tangible.
un Design System doit rester simple. » WHAT ? Design System 89C3 12 marques 29 composants Une charte éditoriale Templates et principes de navigation fiches des méthode UX Guides de la collaboration PO / UX / DEV
un Design System doit rester simple. » UTILISATEURS Design System 89C3 125 comptes créés 50 utilisateurs / jours Hola! Sauf les WE, jours fériés et mercredi (?)
Pour être effucace et être accepté par ses utilisateurs, un Design System doit rester simple. » DEV WEB HOW ? Design System 89C3 F*** the Rules “YEAH” !!! UX/UI
un Design System doit rester simple. » Design System 89C3 ! Set the rules ! Le design system n’est pas un github Ne contient pas 100 % des besoins ! Rythme 1 composant par semaine Les rituels > weekly ! Usability - facilité d'utilisation Publique & Easy assess ! K.I.S.S* * «Keep it Simply Stupid !” ! User Friendly lisible, clair, beau,
et être accepté par ses utilisateurs, un Design System doit rester simple. » ACCEPTATION Pour être efficace et être accepté par ses utilisateurs, un Design System doit rester simple. Design System 89C3
graphique atomic design, basée sur des composants visuels Une stack technique Angular pour développer ces composants Une équipe d’UX à l’écoute Une équipe de développeurs transverses dédiée à la stack technique et à la charte, organisée en Scrum UX UI DEV
de synchronisation hebdo : Des échanges réguliers via Discussion autour des nouveaux composants designés Démo des composants développés Avancement Priorisation en fonction des besoins projets (PO / PM) 1 2 3 4
problématique démo Plusieurs applicatifs web dédiées aux différentes bibliothèques Des noms peu parlant 1 2 Pas d’homogénéité Pas de lien entre la démo, la documentation technique, le site de la charte graphique et les codes sources 3 4
RTFM ! Un seul site « à la Angular Material » 1 2 Un menu clair Une barre de recherche avec des tags La documentation, la démo, le HTML/TS/CSS, le lien vers le repository GIT sur la même page, accessible facilement 3 4 5
: telMobile_RWD-XS_lot2 Nomenclature des projets : [taskforce]_[projet]_[format*]_[lot*] Exemple : DP_MAJCO Nomenclature des fichiers Sketch Formats des assets (Développeurs) Format PNG Dimensions Taille de l’élément sur l’écran de référence (XS) en @1x, @2x, @3x Nomenclature Minuscules, sans espaces ni caractères spéciaux. Séparateur : “_”. Icônes : icon_xx_yy_zz@Xx.png. Pictogrammes : picto_xx_yy_zz@Xx.png. Dossiers Non Codes couleurs Pictogrammes : Couleurs des marques ou couleur spécifique de l’icône. Icônes : #333. Format Vector Drawable (SVG, converti en XML) Dimensions Pictogrammes : 48x48px. Icones : 24x24px. Nomenclature Minuscules, sans espaces ni caractères spéciaux. Séparateur : “_”. Icones : icon_xx_yy_zz.xml. Pictogrammes : picto : icon_xx_yy_zz.xml. Dossiers Non Codes couleurs Pictogrammes : Les codes couleurs des marques sont remplacés par des variables (@color/bc1 ; @color/bc2). Icônes : #333. Format SVG pour les icônes illustrations. Icon-font pour les icônes signalétiques. Dimensions Pictogrammes : 80x80px. Icones : 24x24px. Nomenclature RWD