Notre agence numérique a récemment lancé un idéathon à l'échelle de l'entreprise, nommé Évoluer avec nous. Six équipes multidisciplinaires ont collaboré pour imaginer, rechercher, prototyper et présenter des solutions innovantes. L'objectif ? Améliorer nos méthodes de travail au sein d'Evolving Web.

Nous vous offrons un aperçu des présentations dans cette série de blogs en sept parties ! Vous pourrez vous en inspirer pour organiser votre propre idéathon ou améliorer vos processus et vos projets. Vous aurez également un aperçu de ce que c'est que de travailler avec notre équipe, que ce soit en tant que client ou en tant que membre de l'équipe.

Dans cet article, je vais vous présenter la solution que j'ai proposée à mon équipe Évoluer avec nous. Je suis très enthousiaste à l'idée qu'elle puisse stimuler la collaboration, la créativité et la valeur des projets. Lisez la suite pour savoir comment nous prévoyons de révolutionner la façon dont nous travaillons avec les composants.

L'objectif : une normalisation qui laisse la place à l'innovation

Imaginez de devoir réinventer la roue à chaque fois que vous construisez une voiture. Cela prendrait une éternité ! C'est pourquoi les pneus sont standardisés, ce qui permet d'économiser du temps et des ressources. De même, lorsque nous créons des plateformes numériques, nous ne pouvons pas nous permettre de repartir de zéro à chaque fois. Les clients attendent de plus en plus des solutions plus abordables et des délais plus courts. Nous avons donc besoin de moyens efficaces pour apporter une meilleure valeur ajoutée, plus rapidement. 

Des outils et des processus normalisés nous permettent d'accélérer les tâches répétitives. Cela libère du temps et des ressources et nous permet de nous concentrer sur la création de solutions plus innovantes, personnalisées et complexes.

Nous disposons déjà de deux moyens pour y parvenir :

  • DESK (Drupal Environment Starter Kit). Cet outil permet à nos développeurs de démarrer rapidement avec des modules contrib préinstallés, une configuration, et des motifs d’UI. Il garantit que chaque développeur utilisera le même processus pour configurer son environnement local. Cela économise du temps, améliore la cohérence, réduit les erreurs, et aide les développeurs à passer d’un projet à l’autre plus rapidement.
  • Kit de démarrage de conception. Logé dans Figma, il s'agit d'une bibliothèque de composants de conception prêts à être utilisés dans les wireframes et les conceptions. Elle comprend
    • Atomes - par exemple, logos, couleurs, typographie, icônes, boutons
    • Molécules - par exemple, formulaires, tableaux, navigation, cartes, accordéons
    • Organismes : bannières de héros, carrousels de cartes, etc.

Mais il y a un défi à relever. L'une des équipes d’ Évoluer avec nous a identifié une déconnexion entre DESK et le Design Starter Kit. Cela nous faisait perdre du temps et entravait la collaboration. L'équipe a donc décidé d'explorer le problème et de proposer une solution. Continuez à lire pour voir ce qu'ils ont trouvé !

 

Travailler sur les processus internes est toujours intéressant pour moi. L'audit, la normalisation, le raffinement et l'amélioration continue sont tous des aspects importants de l'approche lean six sigma.

— Charlie Canlas, Chef de projet, Evolving Web

 

Le problème : des systèmes cloisonnés

Notre équipe Évoluer avec nous a examiné de plus près les causes de cette déconnexion et a trouvé deux raisons évidentes :

  1. Conventions de dénomination incohérentes. DESK et le Kit de démarrage de la conception n'ont souvent pas les mêmes noms pour les modèles, les histoires d'utilisateurs et les composants. Il est donc plus difficile pour les concepteurs, les développeurs, les testeurs d'assurance qualité et les autres membres de l'équipe de communiquer efficacement. Si les développeurs ne parviennent pas à trouver un composant par le nom fourni dans la conception, ils peuvent finir par en créer un nouveau. 
  2. Manque de visibilité. Les concepteurs et le personnel non technique ne peuvent pas facilement voir quels composants existent réellement dans DESK. En effet, DESK ne contient que les configurations initiales de Drupal et un modèle de projet, ce qui signifie qu'il n'y a aucun moyen de le voir en action à moins de créer un nouveau projet à partir de celui-ci. Il est donc difficile pour les concepteurs de savoir si l'ajout d'un certain composant entraînera un développement personnalisé.
Navigation à travers les thèmes et les options d'icônes dans un exemple de bibliothèque de composants dans Storybook. Crédit:Circuit UI

La solution : L'intégration “Storybook” de Drupal

L'équipe a reconnu la nécessité d'une compréhension claire et partagée des composants disponibles et d'une méthode cohérente pour les identifier. Leur recommandation ? Une bibliothèque complète de composants dans Storybook, visible par tous.

Storybook est une plateforme qui héberge des systèmes de conception, des normes, des guides de style et des composants. Elle offre de multiples avantages :

  • Visibilité et clarté. Storybook fournit une plate-forme visuelle permettant aux concepteurs et aux membres de l'équipe non technique de comprendre les composants disponibles dans DESK. Cela réduira les incertitudes et les développements personnalisés inutiles.
  • Cohérence. Les conventions d'appellation au sein de Storybook améliorent la communication, favorisant une collaboration plus efficace entre les membres de l'équipe.
  • Créativité. Storybook nous permet de référencer un large éventail de composantes. Nous pouvons les utiliser pour inspirer et élargir notre propre bibliothèque. Nous pouvons voir ce que font des entreprises de premier plan comme IBM et Airbnb et adapter leurs pratiques.
  • Efficacité. Storybook s'aligne sur les principes de conception atomique, nous permettant d'organiser les composantes de manière flexible et efficace. Cela fournit une base solide au projet et rationalise les efforts de conception.
  • Intégration transparente avec Figma. Cela facilite la comparaison des conceptions et des composants, assurant une transition en douceur de la conception au développement.
Naviguer à travers les options de boutons dans un exemple de bibliothèque de composants dans Storybook. Crédit:Circuit UI

 

L'intégration de Storybook dans notre flux de travail comblera le fossé entre la conception et le développement, tout en stimulant notre créativité et notre efficacité. En fin de compte, cela devrait nous aider à offrir plus de valeur à nos clients en moins de temps et avec moins de ressources. 

Restez à l'écoute, nous continuerons à publier des analyses approfondies des pitchs d'Évoluer avec nous et nous dévoilerons les gagnants ! Inscrivez-vous à notre lettre d'information pour recevoir ces articles directement dans votre boîte de réception, ainsi qu'une foule d'autres informations précieuses.

Plongez dans le design et l'UX à EvolveDrupal

EvolveDrupal est un sommet animé qui rassemble des centaines de professionnels divers pour apprendre, se connecter et s'inspirer. Il comprend une piste EvolveUX+ qui est parfaite pour les concepteurs, les stratèges, les spécialistes des produits et autres créatifs !

Explorer les carrières chez Evolving Web

Mettez-vous au défi, faites nous évoluer tout en propulsant votre carrière chez Evolving Web. Nous sommes souvent à la recherche de professionnels talentueux, innovants et enthousiastes pour rejoindre notre équipe. En savoir plus sur le travail chez Evolving Web.