Présentation de Paste – Un nouveau système de conception pour Twilio

Récemment, notre équipe de livraison Twilio a examiné Pastele nouveau système de conception créé par Twilio pour une utilisation en interne. La conférence Signal a offert un excellent aperçu de Paste – Comment nous avons construit un système de conception unifié et inclusif pour nourrir l'UX de Twilio. Si vous avez un pass Signal, je vous encourage à le regarder sur demande.

Dirigée par Twilions Aayush Iyer (responsable principal, Design Systems) et Jade Pennig (responsable de l'ingénierie, Design Systems), la discussion a donné un contexte intrigant sur comment Paste est né et les problèmes qu'il résout.

Le besoin décrit

Au fur et à mesure que Twilio s'est développé, le besoin d'une interface utilisateur/UX cohérente dans l'espace produit a augmenté avec lui. Les principaux moteurs de l'évolution de Paste incluent :

• La Twilio Console est utilisée pour administrer, configurer et prendre en charge tous les services de Twilio. La conception de l'interface utilisateur pour la console a toujours été un effort conjoint entre divers groupes de produits. De plus en plus, il souffre d'incohérences, d'un manque de modèles et de composants reproductibles et réutilisables et de difficultés de maintenance. Twilio a fait un pas de géant pour répondre à ces préoccupations plus tôt cette année avec une refonte globale, en partie à l'aide de Paste.
• Les acquisitions (SendGrid, Segment, etc.) apportent leur propre langage de conception, modèles et approches.
• L'interface utilisateur Flex. est un énorme pas en avant dans la personnalisation pour les agents et les superviseurs des centres de contact. Mais il a toujours des limites et des incohérences dans la façon dont et dans quelle mesure les composants peuvent être réutilisés et stylisés.

La session Signal a fourni des exemples de ces incohérences – dont j'ai personnellement fait l'expérience. Ceux-ci incluent des actions et des modèles incohérents pour la « copie dans le presse-papiers », des variations dans la manière dont les alertes et les messages sont affichés dans l'interface utilisateur, et différentes interfaces utilisateur et approches pour filtrer les données. Ces incohérences augmentent la charge cognitive. Ils ne parviennent pas non plus à fournir un moyen intuitif et clair d'apprendre à utiliser l'interface utilisateur sur la base de modèles établis. . Comme mentionné dans la session, « Il est difficile de donner la priorité à l'accessibilité lorsque vous vous déplacez rapidement ». Réalisez : TOUS les titres en MAJUSCULES sont généralement interprétés par les lecteurs d'écran comme des acronymes

Cas d'utilisation dans nos pratiques de livraison

En tant que partenaire de Twilio, les ingénieurs de Perficient passent souvent du temps à créer des plug-ins pour Flex. Nous pouvons également personnaliser les interfaces utilisateur destinées aux clients, comme le chat Web. Dernièrement, nous avons également constaté une augmentation des solutions utilisant une suite plus large de services Twilio en dehors de Flex. Les applications utilisant Twilio Video, Programmable Voice et Programmable Messaging peuvent nécessiter la création d'éléments d'interface utilisateur, qu'ils soient destinés au client ou simplement pour permettre l'administration.

Nous avons des ingénieurs front-end expérimentés dans notre équipe. Mais plus généralement, c'est le vieux problème des développeurs, et non des concepteurs frontaux, qui essaient de composer l'interface utilisateur. Comme je l'ai dit à quelques personnes : « Je ne suis pas un concepteur d'interface utilisateur front-end, mais j'ai séjourné dans un Holiday Inn Express hier soir. Félicitations aux 5 d'entre vous qui comprendront cette blague.

Le fait est que je suis heureux pour tout ce qui aide nos ingénieurs à créer des interfaces utilisateur qui s'assemblent rapidement et de manière cohérente.

Comment le système de conception de pâte aide

Coller aide en fournissant des valeurs par défaut raisonnables, un excellent modèle de boîte, des approches de style cohérentes et une manière avisée de styler les composants React. Souvent, lors de la personnalisation des interfaces Twilio, nous souhaitons qu'un bouton ou un autre élément corresponde au langage de conception utilisé par les autres produits Twilio. Cela nécessite généralement des essais et des erreurs, et ne semble jamais être tout à fait exact.

En raison de la conception originale de Flex UI version 1.x, nous avons été un peu enfermés dans les anciennes versions des choses. Par exemple, si vous souhaitez utiliser MUI (Material UI), vous devez utiliser la version que Flex 1.x utilise, qui est une version 3.x. MUI est maintenant sur la version 5. Une grande partie du travail intéressant, des améliorations, des nouveaux modèles et des composants modernes ont évolué.

Twilio a ajouté la prise en charge des nouvelles versions de React au cours de la dernière année. Avant cela, Flex UI était épinglé à une ancienne version de React. Cela a créé certaines limitations dans l'utilisation d'options et d'approches plus récentes autour des bibliothèques de styles. Nous espérons, sur la base de certaines des démos que nous avons vues pendant Signal, que certains aspects du système de conception Paste commenceront également à faire leur chemin dans les futures versions de Flex.

Prochaines étapes

Paste est disponible dès maintenant dans votre propre développement front-end. Il utilise une approche thématique d'abord. Les thèmes initiaux sont basés sur la récente refonte de la console Twilio et le langage de conception SendGrid. Une caractéristique clé de Paste est la transparence. Toutes les feuilles de route sont publiques et une approche collaborative des changements est privilégiée.

Prochainement :

• Modes de couleur (le toujours populaire Mode sombre par exemple)
• la possibilité de personnaliser en profondeur les composants pour répondre à vos besoins uniques
• un concepteur de thème WYSIWYG

Si tout cela vous intéresse et que vous souhaitez en savoir plus, lisez quelques articles supplémentaires de l'équipe Paste. Nous pensons que cette bibliothèque va attirer beaucoup plus d'attention au cours de la prochaine année, c'est donc le moment idéal pour commencer à s'y familiariser.

À propos de l'auteur <!– :   cswartzentruber, Directeur, Customer Engagement Solutions–>

Directeur des solutions d'engagement client, sur la plate-forme du centre de contacts Twilio Flex et d'autres services Twilio. Mon expérience s'étend sur 25 ans, y compris le développement d'applications Microsoft et front-end, les communications unifiées, l'architecture et les services d'entreprise, Azure, AWS, la conception de bases de données et un peu de tout le reste.

Plus de cet auteur