Alida
Refonte des interfaces des produits et création d'un système de design.
Rôle
Designer UX
Durée
2 mois
Livrables
Architecture d'information, Système de design, Maquettes haute fidélité, Prototype interactif
Problématique
Alida offre plusieurs solutions visant à aider les entreprises à améliorer la gestion de leur expérience client (CXM). Dans le cadre de mon travail, j’ai eu l’opportunité de participer à un projet visant à effectuer la refonte de l’interface des produits offerts par l’organisation. Celle-ci venait alors de changer de nom quelques mois auparavant, étant précédemment nommée Vision Critical. Un premier travail d’actualisation avait déjà eu lieu sur le site Web de l’entreprise afin qu’il corresponde à la nouvelle image de marque. Les membres de la direction ont saisi cette opportunité pour former une petite équipe dans laquelle nous avions pour mandat de repenser et d’améliorer l’interface des produits.
L’un des principaux défis liés au projet était d’uniformiser l’expérience à travers les nombreux produits. L’entreprise existant depuis plusieurs années, un travail d’harmonisation était nécessaire afin de corriger certaines incohérences apparues au fil du temps. Nous devions également nous assurer que nos propositions étaient réalistes du point de vue de l’architecture des différents produits. Nous avons donc travaillé étroitement avec l’équipe de développeurs tout au long du projet.
L’un des principaux défis liés au projet était d’uniformiser l’expérience à travers les nombreux produits. L’entreprise existant depuis plusieurs années, un travail d’harmonisation était nécessaire afin de corriger certaines incohérences apparues au fil du temps. Nous devions également nous assurer que nos propositions étaient réalistes du point de vue de l’architecture des différents produits. Nous avons donc travaillé étroitement avec l’équipe de développeurs tout au long du projet.
Énoncé du problème
« Les différents produits offerts par l’organisation ont certaines incohérences au niveau des interfaces, ce qui peut engendrer de la confusion chez l’utilisateur. Comment créer un système de design permettant d’harmoniser ces interfaces afin d’offrir une expérience utilisateur cohérente, tout en tenant compte des contraintes liées à l’architecture existante de la plateforme? »
Processus
1 | Création d’un système de design
L’un des premiers projets sur lequel j’ai participé après avoir rejoint l’entreprise fut la création d’un système de design. En collaboration avec les autres designers de l’équipe UX, nous avons travaillé à mettre sur pied un système de composants dans Figma fondé sur l’approche du design modulaire (atomic design). Cette initiative visait déjà à coordonner le travail des designers au sein de l’équipe afin d’assurer une uniformité dans les nouvelles fonctionnalités que nous avions à concevoir. Le système de design a également servi de base pour le projet de refonte des interfaces.
2 | Mise à jour des interfaces
Le projet de refonte débuta par la conception des interfaces ayant le plus de trafic. La structure des différentes pages fut améliorée autant que possible en considérant les contraintes de développement. Un travail fut également effectué au niveau des couleurs afin d’évoquer la nouvelle image de marque, tout en demeurant approprié pour le contexte d’un produit numérique. En parallèle, notre équipe élabora certains modèles de pages types afin de documenter les intentions de design et de fournir des lignes directrices claires aux développeurs et aux autres designers. Le système de design fut également mis à jour afin au fil de la progression du travail.
3 | Rétroaction / Tests utilisateurs
Compte tenu de l’impact du projet sur l’ensemble des produits de l’entreprise, plusieurs séances de rétroaction furent organisées en cours de route avec les parties prenantes. Des membres de différents départements furent également consultés afin d’obtenir des points de vue complémentaires relatifs aux produits. Avant de publier les nouvelles interfaces, des tests furent effectués auprès d’utilisateurs membres d’un programme « early adopters ».
4 | Coordination et mise en œuvre
La collaboration avec l’équipe de développeurs était primordiale tout au long du projet. Plusieurs défis d’implantation sont apparus au fur et à mesure que les maquettes étaient traduites en code par les développeurs, lesquels requéraient parfois d’adapter le design en fonction des contraintes de la plateforme. Cette étroite collaboration fut réellement motivante tout au long du projet, notamment grâce à l’ouverture d’esprit et à l’enthousiasme des membres de l’équipe.
Résultats
Système de design
Le système de design est le fruit d’un travail collaboratif au sein de l’équipe UX. En utilisant l’approche de design modulaire (atomic design), nous avons travaillé à créer un système dans Figma qui regroupe les principaux composants utilisés à travers les interfaces des différents produits. La fonctionnalité des variantes disponible dans Figma fut également utilisée afin d’accroitre la flexibilité et l’évolutivité des composants. Au final, le système a joué un rôle central dans le processus d’uniformisation des interfaces en plus d’accélérer la vitesse à laquelle les nouvelles maquettes pouvaient être créées par tous les membres de l’équipe.
Page d’accueil
Le projet de refonte fut également l’occasion de repenser la page d’accueil de la plateforme. La suite de produits offerts par l’organisation étant croissante, il était nécessaire de créer une page d’accueil commune à ces derniers. Celle-ci permet à l’utilisateur de comprendre les produits auxquels il a accès et lui fournit des liens rapides vers ces applications. La page d’accueil est structurée autour de deux onglets : le premier présente les principaux produits disponibles, tandis que le second offre une vue d’ensemble de toutes les applications et fonctionnalités additionnelles offertes par l’entreprise.
App Drawer
« L’App Drawer » est un nouveau menu de navigation qui fut conçu lors du projet de refonte afin de permettre à l’utilisateur de naviguer à travers les nombreux produits offerts par l’entreprise. Inspirée de la nouvelle page d’accueil, la première section du menu présente les produits auxquels l’utilisateur a accès, lui donnant ainsi un lien rapide vers les applications disponibles et facilitant la navigation à travers la plateforme. L’onglet « Découverte », quant à lui, permet d’explorer et d’en apprendre davantage sur l’ensemble des produits offerts par l’organisation.
Produits
Les pages d’accueil des produits phares, tels qu’Alida Sparq, furent revisitées afin de mieux communiquer les informations pertinentes aux utilisateurs. L’une de ces pages présente un tableau de bord mettant en évidence des données relatives à la gestion de l’expérience client recueillies par le produit. Différentes stratégies visuelles furent utilisées afin de hiérarchiser les données présentées sur la page en fonction de leur importance, facilitant ainsi l’identification et l’interprétation des informations clés.
Créateur de sondages
D’autres outils, comme le créateur de sondages, ont également été repensés. L’iconographie a été actualisée afin de mieux représenter les différents types de questions de sondage et de communiquer plus clairement les fonctionnalités disponibles. Les couleurs de la nouvelle image de marque furent également intégrées aux icônes dans l’objectif de mettre certaines actions ou composants en évidence.
Tableaux de bord
Les couleurs de la nouvelle image de marque ont été intégrées aux tableaux de bord de produits tels qu’Alida Analytics. En collaboration avec l’équipe de développeurs, des librairies de graphiques furent explorées afin de bonifier l’interactivité des tableaux de bord. L’objectif était également d’uniformiser les libraires utilisées à travers les différents produits pour en améliorer la cohérence et la maintenabilité.
Réflexions
Ce projet a eu un impact significatif sur les différents produits et a suscité plusieurs commentaires positifs de la part des utilisateurs. La nouvelle navigation ainsi que la page d’accueil furent particulièrement appréciées pour leur facilité d’utilisation. À mon avis, cette réussite résulte de l’effort constant fourni par chaque membre de l’équipe et de l’enthousiasme partagé. Malgré les échéanciers restreints, la collaboration et l’ouverture d’esprit manifestée par chacun ont permis d’atteindre de bons résultats. Certains constats du projet incluent:
- Valoriser et respecter la diversité des points de vue afin de favoriser une dynamique d’équipe forte;
- Encourager un environnement collaboratif pour apprendre des expériences des autres;
- Partager les idées tôt et fréquemment afin de nourrir des discussions constructives et d’aboutir à de meilleurs résultats.