Rénovation du système de conception de NerdWallet

Consolidating NerdWallet's Design System Libraries in Figma

Rôle

Design System Designer

Rôle

Design System Designer

Rôle

Design System Designer

Industrie

Financial Technology (FinTech)

Industrie

Financial Technology (FinTech)

Industrie

Financial Technology (FinTech)

Tag

design-system

Tag

design-system

Tag

design-system

Recherche

Au début de ce projet, l'équipe du système de design de NerdWallet (c'est-à-dire, Currency Design) souhaitait établir une base avant de passer à l'étape suivante. Pour ce faire, j'ai décidé de mener une courte étude avec l'aide de mes collègues - Kat Clave et Jarvis Moore - pour comprendre comment nos concepteurs de produits utilisaient le système de design de NerdWallet (c'est-à-dire, Currency) dans Figma.

Nous avons demandé à cinq (5) de nos concepteurs de réaliser une activité de design dans le cadre de l'étude. La tâche consistait à recréer une page - pour des écrans mobiles ou de bureau - en utilisant les composants existants de Currency. À la fin de l'activité, nous avons posé des questions de suivi à nos candidats pour évaluer leur expérience globale.

De cette courte étude, voici certaines des principales insights que nous avons découvertes :

Rechercher un composant peut être difficile. Par exemple, 3 des 5 utilisateurs ont eu du mal à trouver le composant Card parmi les plus de 300 composants disponibles dans deux bibliothèques. Un de ces concepteurs a déclaré :

"Si je ne sais pas où se trouve un composant, je passe beaucoup de temps à le chercher pour le localiser."

Ainsi, les utilisateurs s'écartent souvent du chemin habituel lorsque leurs recherches n'aboutissent à aucun résultat. Cela crée plus de travail pour les concepteurs que nous essayons d'aider avec Currency.

"À ce stade, si je ne trouve pas ce que je cherche, je détache simplement le composant et je le modifie à ma guise."

Voici un exemple de nos utilisateurs effectuant l'activité lors de l'étude initiale :

Recherche

De cette courte étude, voici certaines des principales insights que nous avons découvertes :

Rechercher un composant peut être difficile. Par exemple, 3 des 5 utilisateurs ont eu du mal à trouver le composant Card parmi les plus de 300 composants disponibles dans deux bibliothèques. Un de ces concepteurs a déclaré :

"Si je ne sais pas où se trouve un composant, je passe beaucoup de temps à le chercher pour le localiser."

Ainsi, les utilisateurs s'écartent souvent du chemin habituel lorsque leurs recherches n'aboutissent à aucun résultat. Cela crée plus de travail pour les concepteurs que nous essayons d'aider avec Currency.

"À ce stade, si je ne trouve pas ce que je cherche, je détache simplement le composant et je le modifie à ma guise."

Voici un exemple de nos utilisateurs effectuant l'activité lors de l'étude initiale :

Objectif & Processus

Une fois que nous avions défini le problème principal, nous avons pu identifier que nos équipes bénéficieraient de la réduction du nombre de composants qu'elles utilisaient. Sans perdre les composants et bibliothèques existants, mon équipe a convenu qu'il serait avantageux de consolider les composants existants en exploitant la fonctionnalité de variant dans Figma.

Les composants de différentes tailles (par exemple, navigation mobile vs navigation sur bureau), états (par exemple, désactivé, erreur, survol, etc.) ou configuration (carte à 4 colonnes vs carte à 6 colonnes, etc.) seraient regroupés en fonction de leur utilisation. Par exemple, grâce à ce processus, un bouton primaire désactivé serait alors regroupé avec un bouton secondaire dans l'état de mise au point sous un nouveau composant - Bouton.

Pour s'attaquer à cette tâche, j'ai entrepris de la diviser en trois processus :

Étape 1. Audit & priorisation des composants existants
Étape 2. Consolidation
Étape 3. Révision par les pairs
Étape 4. Publication Figma : sortie de la version Currency v3 🎉

Étape 1: Audit et priorisation

Première...

Au début de l'effort de consolidation, il était difficile de savoir/comprendre sur quels composants travailler en premier. Pour prioriser les composants, j'ai donc examiné l'analyse de la bibliothèque pour les bibliothèques existantes: Currency web v2 et Currency mWeb v2.

Avec l'analyse, j'étais intéressé à comprendre trois points de données principaux:

Le nombre d'instances qu'un composant avait été utilisé/produit en tant qu'instance dans l'ensemble de NerdWallet.
Le nombre d'équipes utilisant un composant.
Le nombre de fichiers utilisant un composant.

Étape 1: Audit et priorisation

Première...

Avec l'analyse, j'étais intéressé à comprendre trois points de données principaux:

Le nombre d'instances qu'un composant avait été utilisé/produit en tant qu'instance dans l'ensemble de NerdWallet.
Le nombre d'équipes utilisant un composant.
Le nombre de fichiers utilisant un composant.

Ensuite...

J'ai rassemblé ces données dans une feuille de calcul répertoriée et j'ai totalisé les chiffres. Plusieurs équipes utilisant un type de composant dans plusieurs fichiers donnaient plus de priorité à ce composant par rapport aux autres types de composants.

Enfin, en utilisant le guide de style de Currency, j'ai regroupé les composants sous les catégories auxquelles ces composants sont associés, c'est-à-dire Actions, Affichage, Ressources, Navigation, Superposition, Mise en page.

Jetez un œil à la feuille de calcul répertoriée ici.

Étape 2 : Consolidation dans Figma

Premièrement...

Une fois que j'avais une liste priorisée d'éléments à traiter, il était temps de se mettre au travail. J'ai créé un fichier Figma centralisé, où tous les nouveaux éléments consolidés pouvaient être créés et examinés par les concepteurs de produits chez NerdWallet, c'est-à-dire le fichier Currency Consolidation Sandbox.

Avec ce fichier créé, pour chaque nouveau composant, je travaillerais avec mon équipe (Design de devises) pour créer un ticket afin de suivre chaque nouveau composant que j'ai traité.

Les critères/objectifs d'acceptation spécifiques pour chaque nouveau ticket étaient les suivants :

Créer et ajouter le composant consolidé dans le fichier Currency Consolidation Sandbox de Figma.
Examiner le composant avec le Design de devises.
Examiner le composant avec l'équipe de PD de NerdWallet dans le fichier Sandbox Figma en postant sur #product-design-team pour demander des retours.

Ensuite...

Avec un ticket dans le carnet de commandes, j'ouvrirais le fichier Currency Consolidation Sandbox de Figma et je créerais une branche à partir de celui-ci. Dériver du fichier Currency Consolidation Sandbox de Figma vous permet d'expérimenter la création de composants sans perturber le contenu du fichier sandbox original et de fusionner rapidement votre nouveau composant là où d'autres concepteurs pourront l'examiner.

Enfin...

Dans le fichier Sandbox, pour un type de composant spécifique (prenons le composant champ de saisie), je travaillerais à identifier ce qui suit :

Éléments de base (du champ de saisie). Ils font partie du composant fondamental. Nous incluons également ceux qui peuvent être activés ou non (par exemple, info-bulle dans le champ de saisie, message d'erreur dans le champ de saisie, etc.).
Différentes tailles (mobile vs web) : La taille constituera une propriété que les variantes du composant adopteront.
Différentes configurations (c'est-à-dire champ de saisie à 4 colonnes, champ de saisie à 6 colonnes, etc.). La configuration constituera également une propriété du composant.
Différents états (c'est-à-dire survol, focus, désactivé, etc.). Ils constitueront la dernière propriété du composant consolidé.

Une fois que j'avais fait tout ce qui précède, je créerais ensuite :

Un composant qui a tous les éléments de base. Créez d'autres composants où nous masquons les éléments de base qui n'ont pas toujours besoin d'être visibles. Un excellent exemple serait l'icône d'info-bulle dans le composant de champ de saisie. Cette icône n'a pas toujours besoin d'être visible. Vous pouvez ensuite combiner le composant avec l'info-bulle visible et invisible. Ce faisant, vous créerez un bouton bascule pour masquer/afficher l'info-bulle (voir la capture d'écran ci-dessous à titre de référence).
Un composant pour chacune des différentes tailles.
Un composant pour chacune des différentes configurations.
Un composant pour chacun des différents états.

Ensuite, je combinerais tous les composants ci-dessus et aurais un composant prêt pour examen.

Étape 2 : Consolidation dans Figma

Premièrement...

Avec ce fichier créé, pour chaque nouveau composant, je travaillerais avec mon équipe (Design de devises) pour créer un ticket afin de suivre chaque nouveau composant que j'ai traité.

Les critères/objectifs d'acceptation spécifiques pour chaque nouveau ticket étaient les suivants :

Créer et ajouter le composant consolidé dans le fichier Currency Consolidation Sandbox de Figma.
Examiner le composant avec le Design de devises.
Examiner le composant avec l'équipe de PD de NerdWallet dans le fichier Sandbox Figma en postant sur #product-design-team pour demander des retours.

Ensuite...

Enfin...

Dans le fichier Sandbox, pour un type de composant spécifique (prenons le composant champ de saisie), je travaillerais à identifier ce qui suit :

Éléments de base (du champ de saisie). Ils font partie du composant fondamental. Nous incluons également ceux qui peuvent être activés ou non (par exemple, info-bulle dans le champ de saisie, message d'erreur dans le champ de saisie, etc.).
Différentes tailles (mobile vs web) : La taille constituera une propriété que les variantes du composant adopteront.
Différentes configurations (c'est-à-dire champ de saisie à 4 colonnes, champ de saisie à 6 colonnes, etc.). La configuration constituera également une propriété du composant.
Différents états (c'est-à-dire survol, focus, désactivé, etc.). Ils constitueront la dernière propriété du composant consolidé.

Une fois que j'avais fait tout ce qui précède, je créerais ensuite :

Un composant qui a tous les éléments de base. Créez d'autres composants où nous masquons les éléments de base qui n'ont pas toujours besoin d'être visibles. Un excellent exemple serait l'icône d'info-bulle dans le composant de champ de saisie. Cette icône n'a pas toujours besoin d'être visible. Vous pouvez ensuite combiner le composant avec l'info-bulle visible et invisible. Ce faisant, vous créerez un bouton bascule pour masquer/afficher l'info-bulle (voir la capture d'écran ci-dessous à titre de référence).
Un composant pour chacune des différentes tailles.
Un composant pour chacune des différentes configurations.
Un composant pour chacun des différents états.

Ensuite, je combinerais tous les composants ci-dessus et aurais un composant prêt pour examen.

Étape 3 : Révision

Une fois que j'avais un composant prêt pour la révision, le configurer pour la révision était assez simple et nécessiterait deux étapes :

Fusionner la branche où j'ai apporté tous ces changements dans la branche principale du fichier Currency Consolidation Sandbox Figma.
Communiquer avec le reste de l'équipe de conception de produits de NerdWallet.

Fusion

Avec un nouveau composant prêt pour révision dans le fichier Currency Consolidation Sandbox Figma, je cliquerais sur Révision et fusionner les changements pour ajouter les changements à ma branche principale. L'écran suivant devrait vous montrer toutes les nouvelles additions à ce fichier. Dans notre exemple ci-dessus, nous ajoutons un nouveau composant nommé onglet (voir captures d'écran ci-dessous pour référence).

Dans la branche principale, je naviguerais vers la page de modèle ( (Dupliquer cette page) Révision du composant - Votre nom ici) et mettrais à jour la capture d'écran dans le planche pour refléter ce qui devrait actuellement apparaître sous l'onglet Actifs (voir la capture d'écran ci-dessous pour référence).

Communication

Avec un nouveau composant fusionné dans le fichier Currency Consolidation Sandbox Figma et la page de modèle configurée pour révision, il était temps de le faire savoir à tout le monde.

Tout d'abord, je posterais dans le canal Slack #product-design-team en demandant des retours. Ce canal bénéficiait d'un engagement quotidien de la part de nos concepteurs de produits et s'est avéré être un outil formidable pour la collaboration.

Voici un exemple de ce que j'enverrais dans ledit canal :

Objet : Nouveaux composants de devise prêts pour révision ‍ Bon mercredi, équipe ! ‍ De retour avec de nouveaux composants consolidés, désormais prêts pour révision dans le bac à sable. ‍ Cliquez ici pour les réviser dans notre fichier Bac à sable. Ces composants resteront disponibles pour révision jusqu'au *date à laquelle ils seront retirés du fichier Bac à sable*. Ensuite, avec vos précieux retours, nous espérons réviser ces composants et les publier à la fin de l'itération actuelle. ‍ Merci !

Je laisserais généralement les composants en révision pendant une semaine et enverrais des rappels amicaux tous les 2 à 3 jours dans le même canal. Les rappels ressembleraient à ce qui suit :

Bonjour, équipe ! ‍ Dernier appel pour obtenir vos révisions pour nos nouveaux composants consolidés. Cliquez ici pour être redirigé vers le fichier bac à sable !

Étape 3 : Révision

Une fois que j'avais un composant prêt pour la révision, le configurer pour la révision était assez simple et nécessiterait deux étapes :

Fusionner la branche où j'ai apporté tous ces changements dans la branche principale du fichier Currency Consolidation Sandbox Figma.
Communiquer avec le reste de l'équipe de conception de produits de NerdWallet.

Fusion

Communication

Je laisserais généralement les composants en révision pendant une semaine et enverrais des rappels amicaux tous les 2 à 3 jours dans le même canal. Les rappels ressembleraient à ce qui suit :

Bonjour, équipe ! ‍ Dernier appel pour obtenir vos révisions pour nos nouveaux composants consolidés. Cliquez ici pour être redirigé vers le fichier bac à sable !

Étape 4 : Publication & Adoption

Publication

Après avoir reçu des commentaires dans le fichier Currency Consolidation Sandbox Figma, je ferais une nouvelle branche dans Figma et j'ajouterais ces modifications suggérées au composant révisé (reportez-vous à l'étape 3 : Consolidation ci-dessus pour les instructions sur la création d'une branche et l'utilisation de la fonctionnalité de variante dans Figma). Si je ne reçois aucun commentaire ou des commentaires positifs, alors - tada 🎉 - j'étais prêt à publier le nouveau composant dans Currency v3.

Pour ce faire, je suivrais ces étapes :

Créez une nouvelle branche dans Currency v3, où vous ajouterez le nouveau composant. La création d'une nouvelle branche vous permettra d'éviter tout changement accidentel que vous pourriez apporter aux composants déjà publiés de Currency v3.
Copiez et collez le nouveau composant que vous avez créé à partir du fichier Currency Consolidation Sandbox Figma dans la branche nouvellement créée de Currency v3. Trouvez la page de catégorie appropriée pour le nouveau composant que vous avez transféré dans cette branche et collez-le sur cette page.
Fusionnez la nouvelle branche dans la principale maintenant que vous avez ajouté le nouveau composant.
Accédez à Assets -> Libraries -> Publish change(s) pour publier le nouveau composant ajouté dans la branche principale de Currency v3.

Cette vidéo didacticielle rapide résume les étapes ci-dessus :

Adoption

Après avoir consolidé plusieurs composants en un seul et l'avoir publié dans Currency v3, il était essentiel de rendre obsolète ce composant dans les bibliothèques de Currency v2 pour encourager l'adoption du nouveau composant.

Voici les étapes que j'ai suivies pour rendre obsolète un composant existant :

Créez une nouvelle branche dans Currency Web v2 et Currency mWeb v2, où vous rendrez obsolète le composant existant.
Trouvez le composant existant que vous rendez obsolète dans les branches que vous avez créées, et ajoutez l'emoji à la fin du composant et de son artboard. L'emoji indique que le composant a été rendu obsolète.
Maintenant que vous avez rendu obsolète le composant existant, fusionnez la nouvelle branche dans la principale.
Accédez à Assets -> Libraries -> Publish change(s) pour publier le composant obsolète dans Currency Web v2 et Currency mWeb v2.

Étape 4 : Publication & Adoption

Publication

Pour ce faire, je suivrais ces étapes :

Créez une nouvelle branche dans Currency v3, où vous ajouterez le nouveau composant. La création d'une nouvelle branche vous permettra d'éviter tout changement accidentel que vous pourriez apporter aux composants déjà publiés de Currency v3.
Copiez et collez le nouveau composant que vous avez créé à partir du fichier Currency Consolidation Sandbox Figma dans la branche nouvellement créée de Currency v3. Trouvez la page de catégorie appropriée pour le nouveau composant que vous avez transféré dans cette branche et collez-le sur cette page.
Fusionnez la nouvelle branche dans la principale maintenant que vous avez ajouté le nouveau composant.
Accédez à Assets -> Libraries -> Publish change(s) pour publier le nouveau composant ajouté dans la branche principale de Currency v3.

Cette vidéo didacticielle rapide résume les étapes ci-dessus :

Adoption

Voici les étapes que j'ai suivies pour rendre obsolète un composant existant :

Créez une nouvelle branche dans Currency Web v2 et Currency mWeb v2, où vous rendrez obsolète le composant existant.
Trouvez le composant existant que vous rendez obsolète dans les branches que vous avez créées, et ajoutez l'emoji à la fin du composant et de son artboard. L'emoji indique que le composant a été rendu obsolète.
Maintenant que vous avez rendu obsolète le composant existant, fusionnez la nouvelle branche dans la principale.
Accédez à Assets -> Libraries -> Publish change(s) pour publier le composant obsolète dans Currency Web v2 et Currency mWeb v2.

Reflections

This work was well received by the small but mighty team of designers at NerdWallet. Throughout the design process, I was able to capture feedback as the work was moving along:

Reflections

This work was well received by the small but mighty team of designers at NerdWallet. Throughout the design process, I was able to capture feedback as the work was moving along: