Élaborer un système de conception à la mesure d’un géant des télécommunications

Conception et contenu · 5 avr. 2018

Notre cheminement vers la création du système de conception de TELUS

Par: Jack Reeves & Alexandra Fedyk

Chez TELUS, nous prenons notre marque très au sérieux. La conception visuelle peut avoir un impact marqué sur le niveau de qualité, de service et de soutien auquel les clients s’attendent. Par conséquent, ce que nous créons se doit absolument de refléter nos valeurs. Ceci dit, la conception collaborative n’est pas facile à gérer; impossible d’en réduire l’échelle. Et comme l’esthétique est subjective, s’assurer que toutes nos équipes internes et nos partenaires fournisseurs externes s’entendent parfaitement sur l’allure que devraient avoir plus de 36 000 pages Web relève un peu du vœu pieux.  

Pourquoi élaborer un système de conception

C’est au début de l’année 2015 qu’a commencée l’histoire de notre système de conception. Toutefois, pour bien en comprendre le cheminement, il nous faut remonter à la naissance de TELUS Digital. En 2013, nous analysâmes ce qui se produisait dans le domaine élargi des technologies, et réalisâmes que pour demeurer actuels, il nous faudrait cesser de confiner le numérique au stade de canal commercial pour plutôt l’intégrer à toutes nos activités. Une équipe distincte vit alors le jour, et on y encourageât l’adoption d’une culture d’innovation. Faisant rapidement ses preuves, l’équipe élabora la meilleure expérience de télécommunications de sa catégorie. Quant au reste, vous le connaissez…

Ou du moins, c’est ce qu’on crût. Sans doute, les fondements techniques ayant servi à former ce groupe jouèrent-ils un rôle crucial dans le succès qu’il connut. Toutefois, alors même que l’équipe multipliait les compétences et les accomplissements, des fissures commencèrent à se former. L’expérience client se mit à perdre des plumes et à se fragmenter. Et les délais d’exécution gagnèrent en longueur.  

Captures d’écran démontrant les irrégularités entre les pages Web avant la venue du système de conception de TELUS.

Pour Shawn Mandel, responsable du service numérique chez TELUS, il était évident que les irrégularités de conception entravaient notre capacité à livrer les meilleures expériences possibles à nos clients. Son mandat –  voir à supprimer tous les problèmes d’homogénéité, quel que soit le moyen.  

Pour quiconque travaillant sur le plancher à cette époque, la racine du problème n’avait rien de bien mystérieux – l’échelle. Ce qui se contrôlait facilement au sein d’une équipe de 25 tournait au cauchemar lorsque ce nombre s’élevait à 250. Au fil de la croissance de l’équipe, il fallut modifier le jeu de règles CSS élaborées au départ, et la conception d’un nouveau cadre de conception qui évoluerait au même rythme qu’elle devint de plus en plus impérative. 

Qu’est-ce qu’un système de conception

Les designers traditionnels de type ‘papier et crayon’ réalisèrent qu’en acceptant d’emblée quelques règles (grilles, palettes de couleurs et typographie), ils pouvaient assurer la résolution efficace de gros problèmes conceptuels grâce à l’implication de plusieurs personnes à la fois. C’est ce que les systèmes de conception modernes contribuent au développement numérique. Ils définissent les éléments et motifs d’interface usager que les designers numériques peuvent utiliser sans avoir à sans cesse recréer des expériences clients homogènes.  

Bien qu’au tout début de notre cheminement, les systèmes de conception numériques ne fussent pas un concept nouveau – ils en étaient néanmoins à leurs balbutiements. Twitter avait « conquis le Web » avec Bootstrap en 2012 et deux ans plus tard, Google lança son Material Design, le système de conception exhaustif qui se cache derrière tous ses produits modernes. Le saut énorme entre Bootstrap et Material Design reposa sur la façon dont Google mit en application la théorie de conception atomique de Brad Frost. Au lieu de structurer une page au moyen d’une série d’éléments d’IU, vous aviez la possibilité de les regrouper en concepts réutilisables plus importants, créant ainsi un système de molécules et d’organismes moléculaires. Et comme tout bon admirateur de lego pourrait vous le dire – avec un système de ce type, l’imagination est la seule limite.

atomdesign-57-230-922-293-1522939270

© Frost, Brad. « Méthodologie de conception atomique. » Atomic Design par Brad Frost, atomicdesign.bradfrost.com/chapter-2/.

La voie étant déjà tracée, TELUS Digital tentât de trouver de quelle façon appliquer ce concept à notre entreprise, infrastructure et à nos équipes. Nous lûmes tout ce qui s’était écrit à ce sujet afin de trouver solution à nos problèmes, et discutâmes avec Salesforce, Google et Adobe pour découvrir ce qui les avait aidés. En fin de compte, ce fut la citation de notre Gestionnaire en stratégie conceptuelle qui nous mit sur la bonne voie : 

« Simplifions les choses pour notre équipe, qu’elle puisse offrir un service hors pair à nos clients. »Neal McGann, Directeur de la stratégie de conception   

Avec un tel repère pour nous guider, il devint évident que la principale composante de notre système de conception reposait sur la participation et le soutien de la communauté; sans eux, nous échouerions assurément. Nous dressâmes alors une liste de neuf principles de conception qu’en tout temps, nous convînmes de respecter. De ce tremplin, nous nous attelâmes ensuite à la création d’un système de conception vivant sur lequel il était possible d’itérer. 

Ce fut ce désir d’être adopté par la communauté qui nous poussât à structurer notre système de conception autour de React. La plateforme de TELUS Digital, l’environnement permettant d’assurer la continuité technique entre les équipes, avait récemment été rebâtie autour de React et d’une structure en nœuds. Cette décision fût fantastique, car elle nous limitât à la gestion d’un seul langage, Javascript, au lieu de la multitude de variables codebase en place un an auparavant. De plus, React étant axé sur les composantes, ceci le rendit idéal à la création d’actifs de conception réutilisables.

Bâtir un système central solide

Au départ, nous décentralisâmes le développement du système. Toutefois, sans la présence d’une direction claire et d’un cadre préexistant, nous réalisâmes rapidement qu’il serait trop complexe d’obtenir un consensus éclairé. Nous retournâmes donc à la planche à dessin. Changeant vite de tactique, nous élaborâmes un système de conception ‘central’ strictement axé sur le système de conception de TELUS (TDS). Cette approche centralisée nous aida à accélérer la communication et la planification initiales – sans pour autant nous faire perdre contact avec nos connexions communautaires. Nous démantelâmes les silos interéquipes et analysâmes ce qui avait fonctionné par le passé, ce dont nous avions besoin pour le futur, et ce dont nos équipes avaient le plus besoin à l’heure actuelle. Nous créâmes des séances de remue-méninges conceptuels autour de ces exigences et travaillâmes avec la communauté afin de prioriser nos ‘atomes’/composantes. Ces atomes devinrent plus tard notre Minimum Lovable Product et TDS Version 1. 

Entre les versions alpha et bêta, 55 lancements virent le jour en l’espace de 12 mois. Nous les déployâmes aussi tôt et rapidement que possible aux équipes communautaires choisies, de sorte à recueillir le plus grand nombre de commentaires. L’objectif : déterminer les réussites, les échecs et la justification des deux avant de passer à la prochaine composante. Ces rétroactions communautaires jouèrent un rôle crucial dans la publication si expéditive de la version 1.0.  

C’est en janvier 2018 que le lancement de TDS auprès de toutes les équipes et les fournisseurs au sein de l’écosystème TELUS se fit avec succès. Il est maintenant prêt pour la production et incarne la mission numérique de TELUS : permettre à nos clients et membres d’équipe de faire ce qu’ils veulent, en toute simplicité. Il fonctionne bien et a été adopté plus rapidement que prévu, alors que les veilles expériences sont abandonnées sur une base hebdomadaire.

Fonctionnement de TDS 

TDS ne se limite pas à une chose; il s’agit d’une plateforme holistique qui intègre au même endroit le code, la documentation, les directives et la gestion de la conception. C’est là que sont regroupés tous nos directives de conception numériques, configurations de codes et éléments d’IU. 

Nous utilisons l’outil Design System Manager d’InVision pour distribuer plus de 35 composantes Sketch à nos designers en interfaces utilisateurs, expériences utilisateurs et en interactions. Grâce à ceci, les changements sont communiqués à toutes les équipes en même temps, et simplifient grandement un processus autrefois fort complexe. Pour appuyer la communauté dans le développement de composantes, nous avons également documenté les fondations de conception qui sous-tendent nos composantes – de cette façon, les designers qui étaient absents lors de la conception peuvent tout de même en comprendre la direction et la logique. 

Pour les développeurs, nous disposons d’un répertoire Github, où sont sauvegardées des versions de composantes React identiques à celles que les designers utilisent. Ce sont des packs npm indépendants, composables et individuels, qui comprennent tous les éléments de sémantique, de balisage accessible, de styles internavigateurs et de comportement réactif. Tous les efforts ont été déployés afin de réduire au maximum leur taille et d’y intégrer la logique d’IU. 

Toutes les demandes en lien à des problèmes et fonctionnalités sont recueillies par le biais de Github, et c’est Slack qui fournit le soutien. Chaque partie du système est documentée sur le site tds.telus.com afin d’aider à éduquer notre bassin d’utilisateurs et à leur fournir du contexte. Pour chaque composante, nous énonçons en détail les instructions d’utilisateur, le changelog, les processus de gouvernance, l’exécution d’exemples et la feuille de route des fonctionnalités.

Quelle est l’étape suivante pour TDS?

Ce n’est pas la fin. Notre parcours ne fait que commencer. Avec la version 1.0, nous avons sous la main les atomes et certaines des molécules les plus communes qu’il nous faut pour mettre au point des expériences de marque homogènes. Mais pour réellement simplifier la vie de nos équipes, nous devons revenir à notre vision originale d’un projet décentralisé sous gestion communautaire

Seulement par le biais de la décentralisation pouvons-nous vraiment développer une bibliothèque de modèles moléculaires qui correspond à nos besoins, et seule l’aide de la communauté pourra nous permettre de commencer à saisir les organismes les plus utiles. Par conséquent, au cours des prochains mois nous nous concentrerons à développer le produit, la pratique et la gouvernance afin de voir à ce que les équipes puissent s’en acquitter de façon efficace et efficiente. 

Alors que la communauté commence à se réapproprier le projet de l’équipe de projet, nous nous efforcerons d’améliorer encore davantage le système. Nous concentrerons nos énergies à fournir des significations supplémentaires, à structurer la façon dont les éléments peuvent et doivent interagir en harmonie les uns avec les autres, et à ajouter du contexte, de sorte que les gens puissent avoir une meilleure idée du moment opportun pour utiliser une approche donnée. Ceci comprend le fait de considérer des défis de conception plus complexes, tels ceux impliquant le mouvement, la profondeur et l’outillage sous-jacent. Nous envisageons un stade où les composantes ne seront plus conceptualisées dans Sketchpuis développées dans React, mais un où React génère directement les concepts et voit à ce que les deux soient toujours parfaitement identiques.

Merci de nous suivre

pastedImage0

Voici donc le système de conception de TELUS, et ce que nous avons accompli au cours des deux dernières années. Jusqu’à maintenant, le chemin a été tout simplement fantastique, et nous sommes reconnaissants envers TELUS d’avoir accepté d’intégrer des changements systémiques parfois plutôt difficiles. Toutefois, grâce au travail assidu et à la détermination de gens trop nombreux pour être nommés tous dans cette publication, nous disposons désormais d’un système qui simplifie la voie de la production pour notre équipe, et qui offre à nos clients une expérience améliorée. Il est rare de pouvoir travailler pour une entreprise qui apprécie suffisamment le design et la marque pour employer une équipe strictement dédiée aux systèmes de conception. 

Dans notre prochaine publication, nous examinerons en détail les défis techniques que nous avons rencontrés, et les solutions que nous considérons pour les relever – restez donc à l’affût pour un regard pointu sur l’aspect technique de l’ingénierie d’un système de conception.

Auteur:
Jack Reeves
Jack Reeves
Former Senior Strategist
Jack was a former Senior Strategist on our Design Strategy team. He is passionate about fostering authentic experiences and relationships to improve customers’ lives. Learn more about him at www.jackreeves.eu
Alexandra Fedyk
Alexandra Fedyk
Former Design Project Manager