Clement_Lalande_-_Design_System_Nantes.pdf

 Clement_Lalande_-_Design_System_Nantes.pdf

Da8473ea2fde4ace25362603e93f8ea0?s=128

DesignSystems44

May 20, 2020
Tweet

Transcript

  1. Bien vivre son design system et sa relation Dev /

    UX Design Systems Nantes - 19 Mai 2020 Clément Lalande - Product designer @ZenikaIT
  2. Clément Lalande - Product designer Master 2 - interaction design

    - 2009 @ZenikaIT @ZenikaNantes
  3. Pas d’équipe Design Pas d’équipe dédié au design system Différentes

    stacks / équipes projets
  4. “ Nos utilisateurs ont des difficultés à utiliser nos produits

    ” “ Nos outils ne sont pas très fonctionnels ” “ Nous avons besoin d’une refonte design ”
  5. 1. Un projet comme les autres Définir les bons personas

  6. 1. Un projet comme les autres Définir les bons personas

    Designer / Developer
  7. 1. Un projet comme les autres Définir les bons personas

    Designer / Developer / Product Team / Marketing
  8. 1. Un projet comme les autres Définir les bons personas

    Designer / Developer Design system
  9. 1. Un projet comme les autres Définir les bons personas

    Designer / Developer / Product Team / Marketing Design system
  10. 1. Un projet comme les autres Définir les bons personas

    Designer / Developer / Product Team / Marketing Interviewer ses utilisateurs “ Images, lignes directrices, tailles, polices, marges, positions ... “
  11. 1. Un projet comme les autres Définir les bons personas

    Designer / Developer / Product Team / Marketing Interviewer ses utilisateurs “ Images, lignes directrices, tailles, polices, marges, positions ... “ “ Bibliothèque sur GitHub, Storybook, React, Angular, Vue, JS, Zeplin“
  12. 1. Un projet comme les autres Définir les bons personas

    Interviewer ses utilisateurs Brad frost / design system interview
  13. 1. Un projet comme les autres Définir les bons personas

    Interviewer ses utilisateurs Brad frost / design system interview Méthodes de travail : ” Can you describe your current workflow? ” Outils et technologies : ” What do you like and are is there anything that could be improved? ” Peurs et attentes : ” How do you hope the design system will help? What about the design system makes you nervous, apprehensive, or skeptical? ”
  14. 1. Un projet comme les autres Définir les bons personas

    Interviewer ses utilisateurs Nathan Curtis / Picking Parts, Products & People Définir les bons personas Hiérarchiser et prioriser les besoins
  15. 1. Un projet comme les autres Définir les bons personas

    Interviewer ses utilisateurs Nathan Curtis / Picking Parts, Products & People Un DS n’est pas un UI kit Catégorisez vos composants N’essayez pas de tout y mettre Choisissez les catégories / composants les plus importants Définir les bons personas Hiérarchiser et prioriser les besoins
  16. 2. Automatiser la méthode

  17. 2. Automatiser la méthode Library graphique

  18. 2. Automatiser la méthode Library graphique Documentation

  19. 2. Automatiser la méthode Library graphique Library de composants Documentation

  20. 2. Automatiser la méthode Library graphique Library de composants Documentation

    Itération
  21. 2. Automatiser la méthode Library graphique Library de composants Documentation

    Itération Ne construisez pas votre design system entre Dev / UX mais autour d’eux
  22. 2. Automatiser la méthode A Maturity Model for Design Systems

    Marcelo Somers Équipes dédiés - Le design system gouverne et réunis les équipes pour l’amélioration UX et produits. Automatique - Managé et mise à jour automatiquement, Implications cross projets Manuel - Pattern library avec fragment de code Statique - Guide de style PDF Absent Cohérence
  23. 2. Automatiser la méthode A Maturity Model for Design Systems

    Marcelo Somers “Unless it’s part of your build, your style guide is just more documentation to maintain” – Phil Hawksworth
  24. 2. Automatiser la méthode Objectif réduire le delta entre design

    et développement
  25. 2. Automatiser la méthode Objectif réduire le delta entre design

    et développement Réduire la maintenance
  26. 2. Automatiser la méthode Objectif réduire le delta entre design

    et développement Réduire la maintenance Co-construction et automatisation
  27. 2. Automatiser la méthode

  28. 2. Automatiser la méthode Collaboration et commentaire

  29. 2. Automatiser la méthode Collaboration et commentaire Multiplateformes

  30. 2. Automatiser la méthode Collaboration et commentaire Multiplateformes Embed component

  31. 2. Automatiser la méthode

  32. 2. Automatiser la méthode

  33. 2. Automatiser la méthode

  34. 2. Automatiser la méthode

  35. 2. Automatiser la méthode

  36. 2. Automatiser la méthode

  37. 3. Conclusion Impliquez vos utilisateurs Définissez vos besoins Co-construisez votre

    design system Définissez les rôles Automatisez et communiquez Réduire le Delta entre Dev et UX
  38. 3. Conclusion Impliquez vos utilisateurs Définissez vos besoins Co-construisez votre

    design system Définissez les rôles Automatisez et communiquez Ne debugger pas en prod N'oubliez pas les templates et grid layout Pensez au résolutions mobiles Réduire le Delta entre Dev et UX
  39. Merci ! Des questions ? @Clement_Lalande clement.lalande@zenika.com