Systèmes de design
Refactoring du portail web d'Ubity
Entreprise
Ubity
Durée
8 mois
Année
2019
Le brief
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.
Mon rôle
- Coinitiateur du refactoring
- Design d'interface (UI)
Équipe
- Victor Bruzeau (UX/UI designer)
- Cédric Thivolle (Développeur)
Recherche
Planification de la refonte
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.
Évaluation de l’interface
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.
Défis
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 ?
Solution
Une refonte basée sur un framework
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.
Une interface pensée pour la marque blanche
La nouvelle interface a également été conçue pour être rapidement personnalisable afin de refléter l’image de nos partenaires marque blanche.
Promouvoir la directive de style
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).
Adopter les meilleures pratiques
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).
Conclusion
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 :
- Ce projet a permis de faire évoluer les conversations entre designers et développeurs d’une discussion centrée sur l’aspect cosmétique pour se concentrer sur l’amélioration de l’expérience utilisateur.
- Notre site de documentation a aidé les développeurs à livrer de nouvelles fonctionnalités plus rapidement, car le temps passé à la révision du code a été considérablement réduit.
- La bibliothèque de composants (UI Kit) a grandement amélioré notre processus de design et la rapidité avec laquelle nous testons nos idées.
Leçon à retenir
- Une erreur que nous avons commise au départ a été de laisser notre équipe de développement utiliser Bootstrap sans créer de directives. De nombreuses incohérences ont commencé à apparaître à nouveau, car choisir un framework ne signifie pas avoir une directive de style claire !
- Une collaboration fréquente entre designers et développeurs est la partie la plus cruciale dans la création d’un système de design fonctionnel. C’est aussi une occasion unique pour renforcer les liens entre les employés de l’entreprise.