Au-delà des guides stylistiques : leçons tirées de la conception évolutive à TELUS

Conception et contenu · 12 juill. 2018

J’ai travaillé au sein d’une multitude de petites équipes de conception au cours de ma carrière. Mes collègues et moi utilisions tous les mêmes outils, ce qui facilitait le partage. Nous avions une structure de dossiers (relativement) organisée pour chaque projet, et la collaboration reposait sur des conversations et des rencontres en personne. La belle vie, quoi.

Puis, j’ai commencé à travailler pour Koodo. C’était ma première expérience dans une équipe de conception qui se consacrait à de nombreux projets liés à une même marque. Chaque concepteur devait utiliser le même langage de conception et l’appliquer uniformément. La solution pour assurer l’uniformité? Un guide stylistique des ressources d’interface utilisateur partagées créées dans Photoshop, baptisé Normes numériques de Koodo.

Les guides stylistiques n’ont rien de complexe. Ils contiennent généralement un logo, une palette de couleurs et certains composants de conception utilisés dans les applications selon un ensemble de directives.

Cependant, nous savions que pour créer un guide stylistique efficace qui peut être utilisé par plusieurs équipes, nous devions respecter les critères suivants :

  1. Harmonisation des outils

  2. Format facile à partager

  3. Guide du bon usage

Vers un système de conception

Les systèmes de conception sont la suite logique des guides stylistiques. Ils regroupent généralement un catalogue de concepts, des composants codifiés ainsi que des documents sur les normes, l’usage et les meilleures pratiques.

Forte des connaissances acquises lors de l’élaboration des normes numériques de Koodo, j’ai grossi les rangs de la société mère de Koodo, TELUS, et entrepris l’élaboration du système de conception de TELUS.

En tant que responsable de la conception, je voulais améliorer l’expérience client à TELUS en créant un système de conception efficace qui dépasserait le cadre de TELUS Digital pour être utilisé dans l’ensemble de l’entreprise. Les systèmes de conception présentent de nombreux avantages, maisFabricio Teixeira en souligne trois principaux :

1. Efficacité pour votre équipe : Les systèmes de conception font économiser temps et argent. Au lieu de créer des composants à partir de zéro, les concepteurs et les développeurs peuvent réutiliser des pièces existantes et créer de nouvelles pages avec plus d’efficacité et de rapidité.

2. Cohérence pour vos utilisateurs : Les systèmes de conception permettent à votre équipe de créer des expériences familières pour votre public afin d’éliminer les incohérences et d’assurer une expérience uniforme à chaque interaction avec l’entreprise.

3. Économie pour votre entreprise : L’efficacité est synonyme d’économies. Les systèmes de conception permettent d’automatiser le processus de conception, ce qui signifie que les entreprises ont la possibilité d’en faire plus avec moins.

Définir la mission

Le projet de système de conception présentait les mêmes difficultés qu’à Koodo, mais à plus grande échelle. TELUS compte quatre entités principales (Mon TELUS, Solutions mobiles, Services interentreprises, Solutions résidentielles). Chacune d’entre elles compte plusieurs escouades (les entités sont composées d’équipes liées par un intérêt ou un sujet commun; les escouades forment des sous-ensembles au sein de ces entités). Nous n’avions donc pas seulement trois équipes. Nous avions plus de 20 équipes et fournisseurs qui rapportaient les problèmes suivants :

  • manque d’uniformité dans l’application des normes de conception;

  • beaucoup d’efforts sont nécessaires pour tenir à jour les fichiers;

  • ajout de composants aux fichiers : une tâche pénible;

  • travail en double des équipes, qui doivent toujours repartir de zéro;

  • aucune source unique d’information relative à la conception (ou de code);

  • conceptions antérieures désorganisées et difficiles à mettre à jour;

  • manque d’uniformité dans les outils technologiques et de conception, ce qui rend la création et la mise à jour difficiles.

La mission de notre équipe se résumait ainsi : simplifier le processus de production pour que les équipes puissent se concentrer sur la prestation d’expériences client cohérentes et transparentes du début à la fin.

Vers l’efficacité, la cohérence et l’évolutivité

Accroître l’efficacité

À l’instar de Koodo, TELUS disposait déjà d’un guide stylistique. Nous avons donc commencé par transférer les composants existants dans le nouveau système. Cette étape a assuré la parité des produits dès le début. Nous voulions dresser la liste des composants les plus utilisés sur le site de TELUS pour pouvoir nous attaquer aux composants clés en priorité.

Il nous fallait créer un système de conception facile à adopter, qui comportait des normes liées à la marque, à l’accessibilité et au codage, pour permettre aux équipes responsables de l’exécution de se concentrer sur ce qui compte vraiment et de résoudre de nouveaux problèmes.

Nous avons établi un cadre pour déterminer la « valeur » et la cote de chaque composant en fonction des facteurs suivants :

1. Le composant s’inscrit-il dans l’image de la marque?

Pour ceux qui ne la connaissent pas, la marque TELUS est réputée pour ses animaux-vedettes, l’utilisation d’images inspirées de la nature, une conception simple et épurée, la mise en valeur des espaces vides et son ton amical. Nous mettons tout en œuvre pour tenir notrepromesse d’un monde simplement meilleur. Comment intégrer tout cela dans un système de conception?

Nous y sommes parvenus en gardant les choses simples et en optant pour un cadre évolutif. Ce cadre repose d’abord sur les principes de la marque, auxquels se superposent nosprincipes de conception, nos styles fondamentaux et les composants.

Des détails simples et subtils, comme des animations et du mouvement, sont ajoutés auxcomposants pour indiquer les interactions. Les composants sont réactifs à la fois dans l’esquisse et dans le code, de sorte que les concepteurs et les développeurs peuvent les modifier pour les utiliser avec différentes clôtures et tailles d’écran.

2. Le composant est-il accessible?

À la base, un produit accessible est facile à utiliser et à comprendre, et il est à la portée de tous. Pour offrir une expérience accessible à nos clients, nous devons impérativement tenir compte de ces principes de base. – Oskar Westin, spécialiste de l’accessibilité

Comme pour tout produit numérique de TELUS que nous concevons, le système de conception se veutinclusif. Chaque composant conçu et intégré au système doit être réactif, mais aussi accessible. Du point de vue de la conception, chaque composant devait respecter ou dépasser leslignes directrices sur l’accessibilité du contenu du site Web (WCAG 2.0 AA). Nous devions également nous assurer de ne pas utiliser la couleur comme seul indicateur d’interaction, mais d’ajouter aussi un changement de forme pour renforcer la capacité de suggestion.

3. Le composant a-t-il été testé?

En plus de tester les composants pour en valider le bon fonctionnement avec un éventail de navigateurs, de tailles d’écran et de plateformes, nous nous assurons qu’ils sont exploitables. Nous avons testé les composants avec de vrais utilisateurs, en contexte, chaque fois que nous le pouvions. Nous avons simulé des cas d’utilisation des prototypes pour nous assurer que les composants sont faciles à utiliser et à comprendre pour nos clients.

4. Le composant peut-il être utilisé de nouveau?

Le potentiel de réutilisation est un critère important lorsqu’on songe à ajouter un composant au système. Il n’y a pas que le système de conception qui doit pouvoir être adapté à différentes équipes; c’est le cas également de ses composants.

Nous avons examiné comment chaque composant pouvait être utilisé dans le contexte des différentes entités, en tenant compte des variations de contenu (Mon TELUS par rapport à Solutions mobiles, par exemple).

Quels types de variantes devons-nous ajouter pour nous assurer qu’un composant convient à toutes les équipes? Peut-il rester tel quel, ou faut-il le scinder en deux?

En prenant appui sur ce cadre, nous avons envoyé des sondages, animé des ateliers et organisé des séances de remue-méninges avec toutes les équipes afin de dresser une liste de composants de base. En partenariat avec les responsables de la conception, nous avons ensuite procédé à la vérification de toutes les pages actives pour trouver les composants les plus utilisés.

L’information ainsi recueillie a permis à notre équipe de classer les composants par ordre de priorité et de déterminer lesquels inclure dans la version 1 du Système de conception de TELUS. Nous sommes parvenus à cerner les composants les plus utiles à nos équipes responsables de l’exécution, pour leur permettre de gagner en efficacité. Nous avons été en mesure de définir une liste minimale de composants viables pour le système, qui est devenue notre liste de composants à traiter. Quant aux composants les plus essentiels, ils ont été inscrits sur la liste de composants à ajouter à la version 1.0.

Nous utiliserons ce cadre pour évaluer l’ajout d’autres composants à notre système.

Uniformité

L’uniformité commence dès la conception. Lorsque nous harmonisons nos concepts, il est plus facile d’assurer l’uniformité.

Étape 1. Harmonisation des outils

Nous avons d’abord dû convenir d’un outil de travail. Ça peut sembler assez simple, mais nous avions au sein de notre équipe de conception des utilisateurs de Photoshop, de Sketch, de Zeplin et d’Invision. Il fallait donc choisir un outil, et un seul, pour créer un système de conception que toutes les équipes pourraient utiliser. Nous avons finalement opté pourSketchcomme outil de conception et pourInvision comme outil de prototypage et de transfert.

Notre choix s’étant arrêté sur Sketch, nous avons créé un fichier maître qui a été publié avec chaque version du système de conception. Le code correspondait à la conception. Nous avons pu dire adieu aux volumineux fichiers Photoshop de plus de 250 Mo, et accueillir à bras ouverts la simplicité de l’outil Sketch.

Étape 2. Partage de la bibliothèque de composants

Les mises à jour viennent compliquer l’utilisation d’un système de conception. À l’origine, chaque nouvelle version du code s’accompagnait d’un nouveau fichier Sketch. Les concepteurs devaient télécharger ce nouveau fichier maître, à partir duquel ils pouvaient travailler. Cette façon de faire serait géniale si tous les projets partaient de zéro. Dans la réalité, la plupart des équipes étaient en plein processus de conception au moment de la publication d’une nouvelle version, ce qui les forçait à modifier manuellement leurs concepts.

Comme il s’agissait d’un exercice fastidieux, les concepteurs ne s’en donnaient généralement pas la peine, ce qui entraînait des incohérences dans la conception et le code. Devant la pluie de commentaires négatifs, nous avons dû trouver une solution qui nous permettrait de publier de nouvelles versions sans remplacer chaque fois le fichier maître.

En janvier 2018, InVision a lancé la version bêta deDSM (Design System Manager). Grâce à notre renommée dans le milieu des systèmes de conception, InVision nous a approchés dès les phases initiales pour mettre à l’essai le nouvel outil. Celui-ci permettait le classement par catégories, la mise à jour et la modification des composants ainsi que leur partage avec les concepteurs à chaque nouvelle version. Il permettait de régler les permissions en fonction de l’utilisateur et de créer de multiples bibliothèques de composants avec dossiers.

Grâce à DSM, nous avions désormais la capacité de publier des versions tout en permettant aux concepteurs de ne retenir que les changements par rapport à la dernière mise à niveau. Les concepteurs étaient avisés de la mise à niveau et avaient le choix d’accepter les modifications ou de s’en tenir à la version actuelle. Les modifications s’intégraient automatiquement à leur projet en cours dans DSM. Comme les composants étaient stockés dans le nuage et que les noms étaient conservés, les composants modifiés ne faisaient qu’écraser les anciens. Les concepteurs n’avaient plus besoin de récupérer les composants mis à jour séparément, ce qui assurait l’uniformité du code et réduisait le refactorage.

Grâce à ces importantes améliorations, nous étions désormais en mesure d’intégrer les changements à nos composants codifiés. Nous délaissions un modèle monolithique au profit de versions à la pièce, pour créer un système de conception simple et facile à mettre à jour pour l’ensemble des entités et des plateformes.

Nous disposions enfin d’une source unique pour la conception (et le code). Une plateforme qui servirait de tremplin pour le développement à venir.

Étape 3 : Lignes directrices

Pour que les équipes sachent quand et comment utiliser les composants, nous devions nous doter de lignes directrices. Nous avons donc élaboré des directives liées à l’usage, des meilleures pratiques et des exemples, entre autres choses. Les documents sont accessibles à tous sur la page de notrecatalogue de composants. Nous avons utiliséStyleguidist pour générer automatiquement la documentation et ajouter des exemples d’application à l’intention des utilisateurs. Les documents permettent également de modifier le code directement sur la page en suivant les consignes pour voir des exemples réels.

Notrebibliothèque de composants DSM contient également de la documentation à l’intention des concepteurs qui souhaitent en savoir plus sur l’utilisation des éléments et des composants.

As described below

Évolutivité

Nous avions pour mission de créer un système de conception en mesure d’évoluer sur plusieurs plans :

  1. Premièrement, le système devait pouvoir être déployé dans de multiples équipes au sein de TELUS Digital, chez des fournisseurs externes et, éventuellement, à l’échelle de TELUS.

  2. Deuxièmement, nous devions tenir compte de l’adaptation du système à de multiples applications au-delà du web. La technologie et les outils que nous choisissions pourraient-ils s’adapter aux courriels, aux applications natives, etc.?

Au départ, nous formions une équipe centralisée qui travaillait à l’élaboration d’un système de conception à l’intention des équipes responsables de l’exécution. Nous savions dès le début de l’aventure que nous devions ouvrir notre modèle de contribution pour permettre le déploiement du système dans de multiples équipes. Dès la version 1.0.0, nous avons donc entrepris la transition vers unmodèle fédéré. Les équipes ont ainsi pu commencer à contribuer au système, ce qui accélère peu à peu l’évolution du système.

Nous avons mis sur pied une communauté d’utilisateurs pour permettre aux équipes de concevoir, partager et modifier des composants dans une bibliothèque distincte qui vient enrichir le Système de conception de TELUS. Notre objectif ultime? Instaurer un sentiment d’appartenance au sein de la communauté d’utilisateurs du système. Nous présenterons lacommunauté d’utilisateurs du Système de conception de TELUS et sa contribution dans un autre article de blogue de la série consacrée au système de conception.

Pour ce qui est de permettre l’adaptation du système à de multiples applications au-delà du web, nous étudions actuellement diverses solutions de prise en charge d’autres plateformes. Nous vous en dirons plus à ce sujet au cours des prochains mois.

Système de conception efficace : pas de recette unique

Chaque système de conception est différent et répond à des besoins précis dans des contextes précis. Le guide stylistique statique de Koodo répond adéquatement aux besoins de l’entreprise; il aurait été inutile de concevoir un système plus complexe. Les grandes entreprises comme TELUS, qui comptent un grand nombre d’équipes, ont cependant besoin d’une solution plus sophistiquée.

Souplesse

Un bon système de conception est suffisamment souple pour s’adapter aux changements et aux variations. S’il est trop rigide, les équipes ne pourront pas l’utiliser facilement. S’il est trop souple, il ne garantira pas l’uniformité. Il faut instaurer un processus de gouvernance, sans mettre trop de bâtons dans les roues et ainsi créer de l’engorgement.

Capacité d’évolution

Un système de conception doit être en mesure d’évoluer de manière appropriée, en temps opportun. Le système comme tel doit pouvoir être déployé dans l’ensemble des équipes, et ses composants doivent être réutilisés de façon continue. Si le système permet le partage de composants réutilisables et une intégration sans heurts, les équipes qui souhaitent l’adopter pourront le faire beaucoup plus facilement.

Communication : c’est la clé!

La communication est extrêmement importante lorsqu’un système de conception touche de nombreuses équipes. Qu’il s’agisse d’informer les équipes de l’arrivée d’une nouvelle version, de changements ou de bogues, ou de collaborer à une conception susceptible de toucher toutes les équipes, l’équipe du Système de conception de TELUS doit être en mesure de communiquer avec les autres équipes. La communication va dans les deux sens. Nous devons aussi être à l’écoute des utilisateurs pour nous assurer de bien répondre à leurs besoins.

Documentation, documentation, documentation!

La documentation est tout aussi importante que la communication. Après avoir communiqué les changements ou les décisions relatives à la conception, il faut les consigner. Documentez les règles relatives à l’usage, les meilleures pratiques et les directives d’utilisation des composants, justifications à l’appui. Nous avons créé des procédures sur l’intégration des équipes, des directives pour commencer et ajouter des composants, des foires aux questions et de nombreux autres documents à l’intention des utilisateurs.

Bilan

L’élaboration du système de conception de TELUS a été toute une aventure. Nous sommes passés de la conception détaillée de composants réactifs, réutilisables, accessibles et souples en vue d’obtenir quelque chose de plus grand. Nous sommes très fiers de savoir que chaque composant du système a un effet immense sur le reste de TELUS et qu’il est largement utilisé par les équipes. La plupart des entreprises ne peuvent pas compter sur une équipe qui se consacre entièrement à leur système de conception. Je suis donc ravie de pouvoir affirmer que je participe à l’élaboration d’un tel système. Nous n’en sommes qu’au début, et je sais que l’avenir nous réserve de belles surprises!

Si vous souhaitez en savoir davantage sur le système de conception de TELUS, visitez notretoute nouvelle page d’accueil.


Lucy List est conceptrice de produits. Elle compte plus de 15 ans d’expérience dans divers domaines liés à la conception. Actuellement, Lucy est responsable de la conception à TELUS, où elle travaille avec diverses équipes interfonctionnelles. Elle a pour principale tâche de définir la stratégie qui sous-tend un système de conception évolutif et efficace pour les membres de l’équipe, en vue de créer une expérience cohérente pour les clients de TELUS.

Auteur:
""
Lucy List
Former Product Designer
Lucy List is defining the strategy for a design system that is scalable and efficient for team members; with the aim of creating a consistent experience for TELUS customers.