Systèmes de design

Refactoring du portail web d'Ubity

Entreprise

Ubity

Durée

8 mois

Année

2019

Vue d'ensemble du système de design

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.

Plan d'action du système de design
Pour mener à bien cette refonte, nous avons dû décomposer le projet en de nombreuses tâches plus petites

É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.

Incohérences graphiques
Des styles très disparate étaient initialement visibles dans l’interface...
Incohérences dans les boîtes de dialogue
... ainsi que de nombreuses variations dans des composants identiques. Cela témoignait de générations de développeurs et designers s’étant succédé sans posséder de directives de style claires.

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.

Mise en page : avant et après

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.

White label examples

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).

Site web de documentation
Notre site web de documentation (ui-docs-mtl.ubity.com) est accessible au public
Notre bibliothèque de composants (UI Kit) est accessible dans Figma, notre outil de design d'interface

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 :

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.
Voir plus de projets