Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

73f82a90bab5250087193c95ea45585d?s=128

Design Systems France

May 21, 2019
Tweet

More Decks by Design Systems France

Other Decks in Design

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