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

Transcript

1. La charte UX Design BPCE
   SIMPLE EVOLUTIF ET MODULAIRE
   

   View Slide

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
   

   View Slide

3. 12 MARQUES Design System 89C3
   

   View Slide

4. « Pour être effucace et être
   accepté par ses
   utilisateurs, un Design System
   doit rester simple. »
   TRANSFORMATION
   Design
   Design System 89C3
   WHY ?
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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é
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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 (?)
    

    View Slide

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
    

    View Slide

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,
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. ACCEPTATION Design System 89C3
    Simplification du design système
    ATOMS
    ÉLÉMENTS
    FONDAMENTAUX
    COMPOSANTS GABARITS
    MOLECULES ORGANISMS TEMPLATES PAGES
    

    View Slide

18. WORKFLOW Design System 89C3
    Design System
    Components Specs - Usage rules Development Démonstration
    1 2 3 4
    ‘’
    

    View Slide

19. WORKFLOW Design System 89C3
    Design System
    Components
    1
    Librairie 89C3 sketch design.89c3.fr Maquette &
    interactions
    

    View Slide

20. WORKFLOW Design System 89C3
    Design System
    Specs - Usage rules
    2
    Espace actualité Principes & méthodes Charte Ux design BPCE
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

28. ASSETS Design System 89C3
    12 marques
    

    View Slide

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
    

    View Slide

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
    

    View Slide