Ubity
8 mois
2019
Ubity est une entreprise qui fournit des solutions de téléphonie aux petites et moyennes entreprises et qui figure actuellement parmi les dix premiers opérateurs au Canada. Depuis la création de l’entreprise en 2007, Ubity offre un portail web, Studio, pour aider ses clients à gérer eux-mêmes leur système téléphonique.
Pendant plus de 10 ans, plusieurs générations de développeurs et designers se sont succédé dans la conception de Studio sans posséder de directives de style claires. Sans surprise, de nombreuses incohérences d’interface ont alors petit et petit émergé jusqu’à devenir apparentes aux yeux des utilisateurs, cette situation entraînant des frictions au sein même de notre équipe. Améliorer la façon dont nous construisions notre interface était désormais une nécessité.
En juillet 2019, Ubity a été acquis par Telus, l’un des trois plus grands fournisseurs de télécommunications au Canada.
La plupart des grandes entreprises ont des équipes dédiées travaillant à la refonte de leurs interfaces. Faisant partie d’une équipe de deux personnes travaillant à temps partiel sur ce projet, notre première tâche a été de créer un plan d’action que nous pouvions exécuter de manière réaliste.
Pour aborder cette refonte, j’ai commencé par faire l’inventaire des différentes mises en page et composants utilisés dans l’ensemble de l’interface. L’objectif était d'identifier des composants que nous pourrions éventuellement réutiliser et de repérer des incohérences graphiques.
1. Convaincre l’équipe de direction : nous devions démontrer les avantages que ce projet apporterait à l’équipe tout en garantissant que nous pourrions l’exécuter en même temps que d’autres projets prévus dans le calendrier produit.
2. Développer une interface orientée marque blanche : plusieurs partenaires d’Ubity utilisaient le portail web comme plateforme de marque blanche. Notre solution devait être facilement personnalisable et maintenable.
3. Développer de meilleures pratiques : ce projet ne pouvait avoir d'impact réel que s’il était largement utilisé par notre équipe de développement. Comment pouvions-nous nous assurer que nos collaborateurs adopteraient et contribueraient à notre directive de style ?
Une fois l'évaluation de l'interface utilisateur terminée, plutôt que de recréer notre interface à partir de zéro, nous avons décidé d'utiliser Bootstrap, un framework front-end populaire, comme base pour la nouvelle interface.
Chaque composant préalablement identifié dans l’interface existante a ensuite été retravaillé en utilisant Bootstrap et nos directives de style. La vidéo présentée ci-dessous est un extrait de la documentation présentant la refonte de plus de 70 boîtes de dialogue.
Une fois retravaillé, chaque composant de la nouvelle interface a été répertorié dans un inventaire.
Nous avons également recrée la mise en page de notre page principale afin qu’elle intègre tous les éléments d’interface dont nous avions besoin.
La nouvelle interface a également été conçue pour être rapidement personnalisable afin de refléter l’image de nos partenaires marque blanche.
Une fois la nouvelle directive de style validé par notre équipe, nous voulions nous assurer que tous les développeurs et designers l’utiliseraient régulièrement. Nous avons donc rendu ces directives accessibles en créant un site web de documentation ainsi qu’une bibliothèque de composants (UI Kit).
Enfin, pour limiter les incohérences qui pourraient survenir par la suite, nous avons introduit une méthodologie où tout nouvel élément d’interface non documenté serait évalué par notre équipe avant de pouvoir être intégré dans notre bibliothèque de composants.
Cette approche a grandement amélioré la cohérence générale de notre interface (et notre santé mentale).
Depuis le début de sa mise en œuvre, notre directive de style a été un succès et l’un des projets dont je suis le plus fier. Outre la cohérence de l’ensemble de l’interface, les avantages sont multiples :