Meetup #6 - L'acceptation du Design System à la BPCE

Transcript

1. La charte UX Design BPCE SIMPLE EVOLUTIF ET MODULAIRE
2. ÉQUIPE Design System 89C3 Design System Nina LARRIAGA Art Director 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
3. 12 MARQUES Design System 89C3
4. « Pour être effucace et être accepté par ses utilisateurs, un Design System doit rester simple. » TRANSFORMATION Design Design System 89C3 WHY ?
5. « Pour être effucace et être accepté par ses utilisateurs, un Design System doit rester simple. » WHY ? ONE SYSTEM TO RULE THEM ALL ! Design System 89C3
6. « Pour être effucace et être accepté par ses utilisateurs, un Design System doit rester simple. » PARTIS PRIS Set a common language > FRENCH BRAND IDENTITY OS IDENTITY CUSTOM DESIGN
7. « Pour être effucace et être accepté par ses utilisateurs, 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é
8. COMING SOON !Design System 89C3 WANTED : Un ninja du 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.
9. « Pour être effucace et être accepté par ses utilisateurs, 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
10. « Pour être effucace et être accepté par ses utilisateurs, un Design System doit rester simple. » ASSETS Design System 89C3 Librairie Sketch Icônes – pictos (8388 assets) Fonts a
11. « Pour être effucace et être accepté par ses utilisateurs, 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 (?)
12. Design System 89C3 Dessin DEV & UX (voir tableu) « 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
13. « Pour être effucace et être accepté par ses utilisateurs, 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,
14. Design System 89C3 Design System 89C3 « Pour être effucace 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
15. ACCEPTATION Design System 89C3 L’acceptation par les équipes de développement a posé plus de questions que nous l’imaginions, et la taxonomie Atomic n’a pas été comprise instinctivement. ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
16. ACCEPTATION Design System 89C3 Nous avons beaucoup itéré avec nos utilisateurs, nous nous sommes aussi parfois trompés et nous avons beaucoup simplifié nos principes en testant et partageant
17. ACCEPTATION Design System 89C3 Simplification du design système ATOMS ÉLÉMENTS FONDAMENTAUX COMPOSANTS GABARITS MOLECULES ORGANISMS TEMPLATES PAGES
18. WORKFLOW Design System 89C3 Design System Components Specs - Usage rules Development Démonstration 1 2 3 4 ‘’
19. WORKFLOW Design System 89C3 Design System Components 1 Librairie 89C3 sketch design.89c3.fr Maquette & interactions
20. WORKFLOW Design System 89C3 Design System Specs - Usage rules 2 Espace actualité Principes & méthodes Charte Ux design BPCE
21. WORKFLOW Design System 89C3 La base Development 3 Une charte 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
22. WORKFLOW Design System 89C3 La communication Development 3 Des réunions 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
23. WORKFLOW Design System 89C3 La problématique démo Development 3 La 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
24. WORKFLOW Design System 89C3 La solution Development 3 La solution 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
25. ASSETS Design System 89C3 Icônes- pictogrammes - illustrations Automatisation de la génération des assets 1 9 Marque Marque Un fichier sketch Un script JS utilisant SketchTool vectordrawable XML PNG PNG PNG PNG PNG PNG @1x @1x @2x @2x @3x @3x SVG RWD
26. ASSETS Design System 89C3 Icônes- pictogrammes - illustrations Automatisation de la génération des illustrations Mettre en avant une information clé Simplicité Cohérence Harmonie Animation Industrialisation MESSENGER € 1 2 3 4 5 6
27. 12 MARQUES Design System 89C3 Primary Primary BC 1 #5124 72 81, 36, 114, 1.00 BC 2 #B1006 E 177, 0, 110, 1.00 Secondary Secondary BC1 Primary Primary #0060A4 0, 96, 164, 1.00 BC2 #FB8200 251, 130, 0, 1.00 Secondary Secondary BC1 #DB0029 219, 0, 41, 1.00 Primary Primary BC2 (G2) #666666 51, 51, 51, 1.00 Secondary Secondary BC1 Primary Primary #D1005D 209, 0, 93, 1.00 BC3 #ECB767 236, 183, 103, 1 Secondary Secondary BC 1 Primary Primary #003C 82 0, 60, 130, 1.00 BC 2 Secondary Secondary #16B1E 6 22, 177, 230, 1.00 BC1 Primary Primary #E30613 277, 6, 19, 1.00 BC2 (BLACK) #000000 Secondary Secondary 0, 0, 0, 1.00 BC1 #581D74 219, 0, 41, 1.00 Primary Primary BC2 (G1) #AE1580 51, 51, 51, 1.00 Secondary Secondary BC1 #C8102E 219, 0, 41, 1.00 Primary Primary BC2 (G1) #EA7F 49 51, 51, 51, 1.00 Secondary Secondary BC1 Primary Primary #DB0029 219, 0, 41, 1.00 BC2 (G1) #33333 3 51, 51, 51, 1.00 Secondary Secondary
28. ASSETS Design System 89C3 12 marques
29. NOMENCLATURE Design System 89C3 Nomenclature des pages : [sujet*]_[format]_[lot*] Exemple : 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
30. LET’S PLAY ! Ces pictogrammes ont perdu leurs marques, seras-tu les rassembler ? 1 2 3 4 5 6 https://app.klaxoon.com/join/BYS3MX