Transition du kit d'interface utilisateur au système de conception dans QIWI

Le système de conception est devenu aussi à la mode et presque un outil indispensable pour une entreprise informatique que l'utilisation de tableaux kanban et agile. Il existe de nombreuses définitions d'un système de conception: quelqu'un ne comprend par lui qu'un kit d'interface utilisateur, tandis que quelqu'un pense qu'un système de conception inclut nécessairement une base de composants dans le code.



D'après la façon dont nous avons compris qu'il est temps de passer d'un kit d'interface utilisateur à un croquis pour afficher les styles dans le code - sous la coupe.

Par où avons-nous commencé


Tout d'abord, nous avions un kit d'interface utilisateur esquissé pour chacune des plates-formes - Web, iOS, Android. Nous avons également lancé un guide Wordpress qui décrit comment utiliser et combiner des composants et explique sur quoi le style QIWI est basé. L'utilisation d'un seul kit d'interface utilisateur et de guides permet d'accélérer le travail des concepteurs et de rendre visuellement les interfaces des produits sur différentes plates-formes.

Un seul kit d'interface utilisateur est utilisé dans QIWI Wallet , QIWI Piggy Bank , QIWI Bonus , QIWI Cashier , QIWI Teamplay , nous l'utilisons également lors de la conception d'interfaces pour de nouveaux produits. Le nombre de produits lancés étant en constante augmentation, la création de modèles de pages internes était une étape logique. Les modèles de pages frontales contribuent à réduire le niveau de divergence des styles et à accélérer considérablement les processus de conception.



Dans un premier temps, nous avons obtenu un système de conception visuelle, sur la base duquel nous pouvons désormais déployer un système de conception en code.

Et maintenant


Nous avons commencé à remplir le système de conception cet été. Désormais, les développeurs de différentes équipes et tous les concepteurs de QIWI Wallet travaillent sur le système de conception.

Au stade initial, nous avons activement communiqué avec les entreprises qui ont déjà mis en œuvre avec succès le système de conception. Afin de comprendre ce qui tombera dans le système de conception et de déterminer les styles, nous organisons régulièrement des réunions avec l'équipe de conception à l'intérieur.

Un aspect important lors de la création d'un système de conception est la communication avec l'équipe de développement, l'une des idées du projet est de créer une communauté de développeurs et de concepteurs de différentes équipes qui travailleront ensemble pour le créer et le remplir, partager l'expérience les uns avec les autres.

Maintenant, nous sommes toujours en cours, le processus est en cours, les plans pour l'année prochaine sont de remplir la base des composants principaux et en même temps d'ajouter des composants uniques pour les produits individuels, les segments B2B et B2C.

Cependant, tous les produits QIWI ne sont pas inclus dans le système de conception. Par exemple, la conscience n'y est pas incluse - le style visuel de ce produit est délibérément différent.

Comment est le travail


Lorsqu'un nouveau composant apparaît, nous le coordonnons au sein de l'équipe de conception et le mettons dans le kit d'interface utilisateur, puis il entre dans Zeplin et Abstract. L'abstrait vous permet de mettre en page des mises en page, c'est une sorte de Git pour les designers. À partir du kit d'interface utilisateur, le composant fini entre dans le référentiel sur GitHub, où les développeurs peuvent le trouver.



Maintenant, le système de conception est en cours de remplissage, il a déjà les composants de base. Viennent ensuite les modèles et modèles plus grands + les composants de produits uniques.

Le système de conception est utile pour tous les participants aux processus de produit:

  • pour les entreprises - le système de conception permet 2 fois plus rapidement de lancer de nouvelles solutions et de tester les hypothèses de produits;
  • pour l'équipe - il existe une base de données unique de composants testés, ce qui augmente la vitesse et la qualité du travail;
  • pour les utilisateurs - aide à créer une expérience utilisateur unifiée dans la famille de produits QIWI.

Maintenant, nous travaillons pour rendre le système de conception flexible et personnalisable pour de nouveaux styles.

L'une des tâches principales consiste à transférer les produits existants vers un seul système. Cela vous aidera à vous débarrasser de l'héritage dans la conception et le code et à maintenir constamment à jour les interfaces de produit et de service.

Source: https://habr.com/ru/post/fr433780/


All Articles