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