But #1
Simplification et regroupement de plusieurs composantes, vu leur nombre important, en utilisant les variantes. De plus, retirer les éléments superflus qui ne sont plus utile ou dépréciés.
Canopée
Un environnement numérique complet et unifié
Canopée est le système de design des produits numériques de la Caisse de Dépôt, servant au développement de différents sites et outils internes. J’ai rejoint l’équipe d’expérience numérique en 2022 afin d’en améliorer son utilisation.
Année
Octobre 2022 à Février 2023.
ClientTravail effectué pour la Caisse de Dépôt et de Placements du Québec chez P2-CO
Expertises
À propos
La Caisse de dépôt et placement du Québec (CDPQ) est l’organisme qui gère différents régimes de retraite publics et parapublics québécois, comme le Régime des Rentes du Québec. Pour servir les activités des différentes équipes, différents outils numériques sont développés à l’interne pour mieux correspondre à leurs besoins. J’ai rejoint l’équipe d’expérience numérique pour leur prêter main forte sur différents sujets, notamment l’amélioration de leur système de design, Canopée.
Mon rôle
- Designer UI/UX dans l’équipe Expérience numérique
Principales tâches
- Audit, révision et mise à niveau de la structure de contenus pour le système de design
- Recherche et entretient avec différents utilisateurs de Canopée pour enrichir son utilisation
- Nettoyage, réalisation et configuration des composantes déjà en place
Contexte
J’ai été approchée pour prendre ce mandat car dans les dernières années, j’ai eu à bâtir et maintenir plusieurs systèmes de design. L’équipe de la CDPQ cherchait quelqu’un qui pouvait leur apporter différentes pistes d’améliorations selon leurs besoins, en prenant l’opportunité de la mise en place d’une solution interne pour la documentation pour en revoir l’utilisation. Nous avons donc décider, conjointement avec la responsable DesignOps, d’analyser l’expérience utilisateur de Canopée afin d’améliorer son utilisation.
But #2
Structurer la mise en page et créer différents exemples pour la documentation de l’utilisation des composantes.
But #3
Prioriser les différentes améliorations selon l’utilisation et la complexité des différentes composantes disponibles actuellement.
Avant: Architecture d’information des différentes librairies de composantes à mon arrivée. Le premier exercice que j’ai fait a été de la mettre à plat et d’identifier les doublons et les incohérences dans l’organisation des composantes.
Après: Une nouvelle structure simplifiée a été présentée et adoptée par l’équipe pour venir répondre à leurs différents besoins dans leur utilisation quotidienne de la librairie.
Processus
Après un inventaire de ce qui avait été fait jusqu’à présent, nous avons sondé les différents utilisateurs de l’équipe expérience numérique pour en comprendre leur utilisation. Le feedback général de la part des différents designers UX était qu’il était très compliqué d’utiliser les différentes composantes et de comprendre leurs organisations, comme en témoigne les différents exemples ci-dessous.
Nous avons identifié différentes avenues, toujours avec ma collègue du DesignOps, plusieurs avenues qui pourraient répondre à ces problématiques.
Témoignage d'un utilisateur
« Je ne suis jamais certaine d’utiliser le bon composant »
Témoignage d'un utilisateur
« Dans la recherche j’ai de la difficulté à faire la différence entre les atomes, les molécules, etc »
Témoignage d'un utilisateur
« Est-ce que je peux démolir quelques choses si je vais dans le DS? J’ai peur de briser quelques chose »
Témoignage d'un utilisateur
« Avec la recherche on a un problème de magasinage d’éléments »
-/-
Suite à l’élaboration des objectifs de la refonte, nous avons entrepris certaines des modifications à l’intérieur des différents fichiers Figma.
Après mon départ...
Suivant mon départ à la fin de mon contrat, la plupart des changements ont été retirés. Certains membres de l’équipe n’étant pas d’accord avec la direction que le projet a pris, et donc ont remis l’ensemble des éléments dans l’état initial avant la refonte de l’organisation. Certains changements ont toutefois été conservés, surtout ceux pour la mise en forme des composantes dans Figma, avec les variantes.
Collaborateurs
Équipe projet
Designer UX/UI - DesignOps: Annick Collette
Designer UI/Programmeur Front-End: Philippe Léger
Conseillers
Directrice principale, Expérience numérique: Chrystel Black
Designer UX/UI: Dimitri Urban
Designers UX: Lucie Jolicoeur, Jonathan Tolle, Gabrielle Bernier Bastien