Clement_Lalande_-_Design_System_Nantes.pdf

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