Comment organiser vos fichiers de conception d’une manière qui reflète le processus de conception, crée une visibilité sur notre travail et met en évidence la valeur stratégique de la conception de produits.
Au début de chaque journée de travail, je nettoie mon espace physique immédiat. C’est ma version de « mise en place » ; une phrase culinaire française qui signifie « mettre en place » ou « rassembler ». Les chefs professionnels utilisent la mise en place car elle optimise leur travail pour la rapidité et l’efficacité. C’est aussi un terme utilisé par les psychologues et fait référence à :
“comment un environnement donné impose des contraintes sur ce que l’on se sent capable de faire dans cet environnement, et comment ces évaluations et prédispositions impactent le processus de préparation à l’action.” Wikipédia
L’organisation de mon espace physique m’aide à me préparer mentalement et physiquement au travail de la journée. La même règle s’applique aux espaces numériques dans lesquels je travaille.
Lorsque j’ai débuté dans le design, j’étais curieux de savoir à quoi ressemblaient les planches d’art des autres concepteurs de produits. Comment ont-ils organisé leurs espaces de travail numériques ? Dans l’esprit d’aider les autres débutants ou ceux qui ont de petites équipes de conception, je partage comment je décompose mes fichiers de conception et ce que j’ai appris après 5 ans de travail en tant que designer au sein d’une équipe de conception et de recherche UX de plus de 300 personnes.
Au début de chaque projet, j’organise mes plans de travail dans Figma selon le principe général procédé de design. Cela aide à garder mon espace de travail propre et illustre la réflexion et les décisions qui ont abouti à la solution finale. Cela facilite également la navigation. La façon dont vous étiquetez vos pages et vos cadres est importante.
La disposition des cadres et des plans de travail à l’intérieur d’une page peut donner une idée de la relation entre les écrans, si elle est utilisée de manière cohérente entre les pages et les pages. — Bonnes pratiques de conception
Mes fichiers de conception sont partagés avec d’autres concepteurs, ingénieurs et partenaires de produits et ils référenceront un cadre spécifique dans un tableau d’art spécifique. Tout comme un livre, il est plus facile d’être sur la même page (littéralement) si les chapitres et les numéros de page sont uniques. Cette convention de nommage a été adaptée de Nick Smithconcepteur principal senior chez LinkedIn.
Les tableaux d’art sont organisés comme suit :
- 0.0 Couverture
- 1.0 Travail de réflexion
- 2.0 Modèles de blocs et fils
- Écrans 3.0
- Pont 4.0
- 5.0 Exploration
- 6.0 Annexe
Chaque cadre d’une page est numéroté en référence à la page parent. Par exemple, si le nom de la page parent est “6.0 Annexe”, le premier cadre de l’annexe sera 6.0. La deuxième image est 6.1, et ainsi de suite.
Pour rendre cela plus facile, j’utilise un plug-in appelé Renommer qui nomme automatiquement vos cadres.
Avant de toucher des écrans ou des fils haute-fidélité, je fais un travail de réflexion. A ce stade, je me fais une idée du projet. Cette page est l’endroit où j’articule le but du projet, le problème, visualise toute recherche quantitative et qualitative, et tout audit concurrentiel ou comparatif. Au fur et à mesure que le projet progresse, je peux revenir et ajouter à cela en développant des diagrammes visuels, des architectures d’information ou des cartes de systèmes.
Le travail de réflexion peut être difficile à justifier dans un calendrier avec des partenaires interfonctionnels qui ne sont pas familiers avec le processus de conception, mais il fait partie intégrante. Considérez le travail de réflexion comme la fondation d’une maison ; vous voulez que la fondation soit solide. Si vous construisez une maison sur des fondations fragiles, le beau travail de peinture n’aura pas d’importance car votre maison s’effondre. Un entrepreneur devra retravailler la fondation et par la suite le travail de peinture. Vous voyez la métaphore là-bas? Si vous vous lancez dans des conceptions haute fidélité sans bien comprendre l’espace problématique, vous devrez peut-être retravailler vos conceptions haute fidélité ultérieurement.
En tant que designer, vous avez un super pouvoir ; vous pouvez visualiser des systèmes complexes d’une manière simple et rapidement compréhensible. Le travail de réflexion est pour votre bénéfice et celui des autres. Sur des projets antérieurs, j’ai créé des diagrammes pour m’aider à comprendre l’espace du problème, qui continuent d’être partagés et utilisés par l’équipe.
A titre d’exemple, j’ai travaillé sur des audiences LinkedIn. Il existe de nombreux types différents et je voulais un moyen de communiquer facilement les différents types de public, leur composition et leurs relations les uns avec les autres.
Figure 1 est une carte conceptuelle illustrant les différents types de publics selon un modèle famille/genre/espèce.
Figure 2 illustre la composition de chaque public. Audiences est la catégorie parente, sous laquelle se trouvent des modèles enregistrés, appariés et LinkedIn. Les audiences enregistrées ont toujours au moins un emplacement géographique et au moins un autre attribut. Les audiences correspondantes peuvent contenir des entreprises ou des contacts. Un modèle LinkedIn contient des attributs.
Hugh Dubberly de Conception doublée est “connu pour son excellence dans la conception de l’information, en particulier pour l’utilisation de cartes conceptuelles pour représenter des sujets et des processus complexes”. Dubberly était mon professeur à l’école doctorale du California College of the Arts et a enseigné un cours de pensée systémique. Il a expliqué qu’une carte des systèmes est un artefact de conception qui peut être construit et affiné en partenariat avec votre équipe interfonctionnelle. De nombreux concepteurs apprennent par la pratique et la création de cartes d’information aide les concepteurs à comprendre un espace problématique. Les cartes sont également un outil pour recueillir plus d’informations auprès des parties prenantes. Après avoir créé le premier brouillon, je partagerai une carte des systèmes avec mon équipe pour m’assurer que ma compréhension est correcte. De nouvelles informations émergent lors de ces séances d’examen. Parfois, ces cartes sont construites au fur et à mesure que l’équipe construit et définit un produit ou un modèle, elles évoluent donc au fil du temps et peuvent aider l’équipe à mieux comprendre le système.
Pour donner un exemple concret, Dubberly a cartographié un maquette de la maladie d’Alzheimer « pour lancer une conversation sur les opportunités de conception dans le monde de la maladie d’Alzheimer. Les grands cercles du diagramme – éducation, communauté, clinique, environnement, prestation de soins et recherche – ont fourni des points de départ pour trouver des solutions de remue-méninges à la maladie d’Alzheimer.
Au fur et à mesure que vous avancez dans un projet, les cartes des systèmes évolueront et deviendront plus spécifiques. Ce qui suit illustre que ‘audiences’ est la page parent, qui contient les pages enfants et petits-enfants. Chaque page de petit-enfant a sa propre page “détails”.
Ces cartes de systèmes de haut niveau informent plus tard les flux d’utilisateurs et les structures filaires, que je couvrirai dans la section suivante.
L’objectif d’un flux d’utilisateurs et d’un fil est de communiquer, à grands traits, comment un produit fonctionnera. Travailler avec des modèles de blocs et des connexions basse fidélité permet d’itérer rapidement et d’avoir des conversations stratégiques. Il est important de travailler d’abord avec une faible fidélité, car cela concentre votre travail et les commentaires des parties prenantes. Par exemple, si vous partagez des conceptions haute fidélité lorsque vous recherchez des commentaires sur l’orientation générale du produit, vous passerez du temps à discuter de la conception visuelle, ce qui n’est pas utile à ce stade.
Pour commencer, j’écrirai à la main un flux d’utilisateurs idéal en langage clair et je le traduirai en un modèle de bloc. Le modèle de bloc montre un flux d’état idéal, mettant en évidence l’écran clé et toutes les actions entreprises par le client.
Ensuite, je vais entrer dans les fils. Les fils sont une version plus fidèle du modèle de bloc et ne mettent en évidence que ce qui est nécessaire. Aucun accent n’est mis sur le polissage visuel.
Dans certains cas, les fils peuvent être utilisés pour communiquer de manière générale la disposition et la fonctionnalité d’une page. Ceci est utile lorsqu’une page évolue pour prendre en charge différents types de contenu.
À ce stade, vous devriez avoir une idée vraiment solide de ce que vous construisez, donc cette étape ne devrait pas prendre trop de temps. Les parties prenantes ont vu le travail de réflexion, les fils et les flux d’utilisateurs et ont (espérons-le) acheté le produit. De ce fait, cette étape peut aller vite. C’est là que vous pouvez entrer dans les détails les plus fins, tels que la hiérarchie des informations, le rembourrage et les couleurs.
Mes fichiers de conception sont consultés par les partenaires marketing, les produits, les autres concepteurs et les ingénieurs. Les rubriques suivantes décrivent ce que je fournis généralement à mes équipes interfonctionnelles.
Conception épurée
Un design sans majoration utilisé par les partenaires marketing pour les présentations, l’intégration des ventes et les supports marketing. La conception ci-dessus est un exemple de maquette “propre”.
Conception de l’anatomie
Cela décrit les règles de gouvernance, la mise en page et la fonctionnalité d’une page ou des éléments d’une page. La conception suivante décrit la disposition d’une ligne de données dans une table
États
Décrit à quoi ressemblent les conceptions dans un état rempli ou vide, ou toute erreur. Voici un exemple d’état vide.
lignes rouges
Décrit les détails de conception tels que la police, le poids, la police de caractères, l’espacement et la couleur. Certains concepteurs préfèrent demander à leurs partenaires d’ingénierie d’utiliser la fonction “inspecter” de Figma pour gagner du temps, mais je préfère créer mes propres lignes rouges car cela permet de confirmer que mes conceptions respectent le système de conception de LinkedIn.
Enfin, cela vaut la peine d’avoir une section exploration et annexe. Gardez votre travail en cours. Je reviendrai souvent sur les travaux de conception passés dans ma page d’explorations pour en tirer parti plus tard.
Vos fichiers de conception doivent refléter le processus de conception global pour guider votre travail, aider les partenaires interfonctionnels à naviguer dans votre fichier et enfin illustrer la réflexion et les décisions qui ont abouti à la solution finale. Les partenaires qui ne connaissent pas le processus de conception peuvent se demander ce que nous faisons toute la journée (en fait, de nombreux membres de la famille se demandent ce que je fais toute la journée). L’organisation de vos fichiers de conception d’une manière qui reflète le processus de conception crée une visibilité sur notre travail et met en évidence la valeur stratégique que les concepteurs de produits apportent à la table.
