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 qui harmonise les interfaces afin de créer une expérience cohérente en fonction des contraintes imposées par l’architecture de la plateforme actuelle?»
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 de l’interface
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. Notre équipe élabora certains modèles de pages types qui étaient récurrents à travers les produits. Ces modèles ont permis de documenter les intentions de design en fournissant des lignes directrices. 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 rétroactions furent effectué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 résultat d’un travail de coopération entre les membres de l’équipe UX. En suivant une 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é 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. Un premier onglet présente les principaux produits disponibles, alors qu’un second onglet «Découverte» 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 de découvrir l’ensemble des produits offerts par l’organisation sous la forme d’une grille.
Produits
Les pages d’accueil de produits phares tels qu’Alida Sparq furent revisitées afin de mieux communiquer les informations pertinentes à l’utilisateur. Cette page agit comme un tableau de bord par la mise en évidence de données relatives à la gestion de l’expérience client récoltées à travers 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.
Créateur de sondages
Différents outils tels que le créateur de sondages ont également été revampés. L’iconographie a notamment été révisée afin d’être plus représentative des différents types de questions ainsi que pour mieux communiquer certaines fonctionnalités. Les couleurs de la nouvelle image de marque furent également intégrées à travers les icônes associées aux types de questions dans l’objectif de mettre certains éléments de ceux-ci en évidence.
Tableaux de bord
Les couleurs de la nouvelle image de marque furent intégrées à l’intérieur des tableaux de bord de produits tels qu’Alida Analytics. En collaboration avec l’équipe de développeurs, quelques explorations furent effectuées avec des librairies de graphiques 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 améliorer la cohérence entre ces derniers.
Réflexions
Ce projet a eu un impact significatif sur les différents produits et a reçu beaucoup de commentaires positifs par les utilisateurs. La nouvelle navigation ainsi que la page d’accueil furent particulièrement appréciées pour leur compréhensibilité. À 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 :
- Écouter et respecter le point de vue des autres pour contribuer à un bon esprit d’équipe;
- Favoriser une atmosphère de partage au sein de l’équipe afin d’apprendre de l’expérience des autres;
- Partager rapidement les nouvelles idées afin de nourrir les discussions.