Comment avons-nous adapté notre template de projet Figma à notre équipe ?

🌱 Genèse

Contexte

En 2021 nous avons souhaité rationaliser les outils et les process de l’équipe Design. Comme de nombreuses équipes design à travers le monde à ce moment-là, on utilisait Sketch, Abstract, Invision et Zeplin. Figma nous a permis de remplacer ces quatre outils. Résultat: des économies et un gain de temps pour l’équipe design. Ce fut aussi l’opportunité de challenger notre processus de création et la structure de nos projets.

Le problème

Notre organisation était basée sur l’outil Abstract, qui nous permettait d’avoir un fichier commun pour toute l’équipe avec un système de versioning. Ainsi, les maquettes étaient rangées par sections dans nos fichiers.

En passant sur Figma, nous avons profité de ce changement pour faire évoluer notre méthode de travail. Plutôt que d’avoir une “liste” de pages, nous avons choisi de présenter nos maquettes sous forme de parcours basés sur des scénarios. C’est pourquoi nous avons fait le choix de créer un fichier par feature. Cela a eu un impact sur l’organisation de nos fichiers qui n’était plus commune, lorsque nous voulions aller sur le fichier d’un autre designer, il était compliqué de s’y retrouver.

La solution

Un template commun à tous les designers, qui nous permet de standardiser les fichiers afin d’avoir une cohérence entre nos projets et de gagner du temps à chaque utilisation.

👶 Première itération

Cette première version du template est issue de plusieurs sources d’inspiration, en passant par des exemples sur Youtube, des webinaires ou bien même la communauté Figma.

Voici à quoi ressemblait notre première version du template. Nous avions 4 grandes parties en partant du bas vers le haut, Labels, Ressources, Research et Design.

Dans la première partie des Labels, en partant dans l’ordre chronologique dans lequel on prend une demande, nous partons du haut vers le bas avec les labels suivants:

• WIP (Work In Progress)
• To review
• Reviewed
• Ready for testing
• Ready to dev

Ces labels sont utilisés dans la partie “DESIGN” qui inclut nos différentes versions des maquettes, afin de nous permettre de nous situer sur l’avancement des versions proposés mais aussi de permettre une d’informer les Product manager et les développeurs de notre avancée.

Dans un second temps, nous avons les “Resources” incluant 3 pages :

• La cover Figma (thumbnail) qui permet d’afficher une preview de notre fichier avec le nom du projet, le.s designer.s, ainsi que le statut du projet.
• About (documentation, changelog…)
• Performances (KPIs, ABtests)

Une troisième partie consacrée à la recherche qui nous permettait de rassembler tous les éléments qui peuvent nous servir à mener à bien nos différents objectifs.

Pour finir, la partie “Design” incluant les différentes versions de nos maquettes, qui sont classés avec un préfix version X. (e.g. v.1.1).

🤔 Problèmes rencontrés

Après plusieurs mois d’utilisation de ce template, j’ai constaté que certaines pages n’étaient pas forcément toujours utilisées dans un même but. Avoir un template était une bonne idée, mais nous ne l’utilisions pas forcément de la même manière, ce qui ne nous permettait d’uniformiser notre process.

En discutant avec mes collègues designer, je remarque qu’ils ont les mêmes problèmes. J’ai donc procédé à des interviews de 30 minutes par designer pour comprendre pourquoi ils n’utilisaient pas certains éléments du template et mieux assimiler leurs besoins.

Ces interviews m’ont permis d’éclaircir les problèmes suivants,

• Des éléments non utilisés (la page performance, les pages de labels qui prennent de la place)
• Des éléments non compris
• Pas de page “user test” dédié
• Lorsque nous arrivons sur le fichier, nous arrivions sur la page “03 DESIGN” et non directement sur la dernière version.

L’objectif était d’avoir un template simple et permettant une utilisation uniforme qui soit adapté à notre besoin. Nous n’avions de toute évidence atteint partiellement ce but.

💡 Seconde itération

Afin de mieux répondre à notre objectif, nous sommes intervenus sur le template pour en améliorer la compréhension.

Nous avons ainsi décidé de supprimer :

• la page “03 design” qui était utilisée comme titre, afin d’arriver directement sur la dernière version du design lorsqu’on ouvre le fichier Figma,
• la page “v1.1” qui était utilisé à titre d’exemple afin de gagner du temps en évitant de le supprimer à chaque utilisation du template,
• les pages de labels (label 01, label 02, etc…) et les ajouter dans une page et une frame dédiée afin de gagner de la place,
• la partie “Performances” car elle est présente sur Notion.

Mais aussi d’ajouter :

• une page “local components” qui permet de créer et ajouter les nouveaux composants afin de les réutiliser dans les différentes versions sans les ajouter immédiatement au design system mais en traçant leur existence dans le fichier,
• une partie “User test” qui n’était pas présent sur la première version du template.

Ces modifications nous permettent aujourd’hui d’utiliser un template qui est utile, simple et compréhensible, c’est un gain de temps précieux pour nous mais aussi pour les futurs designers qui rejoignent Yousign.

”De mon côté c’est une grande réussite, un gain de temps monstrueux surtout maintenant qu’on n’a plus à supprimer des éléments.” — Nicolas

“Je trouve le nouveau template très intuitif et clair ! J’ai remarqué un gain de temps lors de ma conception !” — Matthis

“Super pour commencer le projet. Très content d’avoir ce format qui permet de structurer son fichier.” — Vincent

Cette nouvelle version est une nouvelle étape qui nous permet de structurer notre travail, mais qui est destinée à évoluer dans le temps. En effet, nous verrons comment elle évolue, nous devrons sûrement faire évoluer le template avec l’agrandissement de l’équipe design ou selon la maturité de l’entreprise…

📖 Pour résumer

Grâce à notre nouveau template, nous gagnons du temps et disposons d’une structure de fichiers cohérente au sein de notre équipe.

1. Analysez votre processus de conception pour disposer d’une structure de fichiers qui reflète votre façon de travailler.
2. Restez très simple pour répondre à la grande variété de projets de conception.
3. Soyez prêt à itérer

🎁 BONUS Vous pouvez trouver notre template ici et n’hésitez pas à l’adapter

Merci à bientôt !