Dans les coulisses

"Beaucoup de cœur à l'ouvrage" : C'est pourquoi nos concepteurs et développeurs UX ont créé un système de conception .

23/12/2022

Traduction : traduction automatique

Photos: Christian Walker

Des boutons intuitifs, des liens utiles et des couleurs harmonieuses. Ensemble, les designers UX et les développeurs de logiciels veillent au bon fonctionnement de notre boutique en ligne. Leur collaboration est devenue plus facile grâce à un système de conception.

Dans cet entretien, Christina Heidt, développeuse de logiciels, et Leonardo Hauschild, UX designer en chef, expliquent ce qu'est le Design System et pourquoi il facilite le travail avec des équipes en pleine croissance.

Leonardo, comment puis-je imaginer votre travail?
Leonardo Hauschild, Lead UX Designer: Les sites Internet sont composés d'un frontend et d'un backend. Lorsque vous tapez www.galaxus.ch en tant que client, vous voyez notre front-end. Nous, UX designers, le concevons. Nous sommes responsables de l'apparence, de la fonctionnalité et de la facilité d'utilisation du site.

Et toi, que fais-tu, Christina?
Christina Heidt, développeuse de logiciels : J'écris le code qui met en œuvre les éléments conçus et les fonctionnalités envisagées.

Comment travaillez-vous ensemble?
Leonardo: Chaque UX designer travaille au sein d'une équipe cross-fonctionnelle avec des développeurs et un Product Owner. Nos UX designers sont donc répartis dans différentes équipes. Il en résulte beaucoup de travail de coordination. Car nous travaillons certes dans différentes équipes, mais nous devons nous assurer que la boutique en ligne ressemble à "Digitec Galaxus" et non à "Team Isotopes" ou "Team Endeavour". Avec notre structure, il est facile de tomber dans ce piège.

Christina: Le Design System est là pour contrer cela. Nous sommes aujourd'hui 150 développeurs. A un moment donné, nous avons réalisé : Nous avons besoin de moyens pour communiquer plus efficacement entre nous. Nous voulions créer un lieu où les informations convergeraient. Il doit permettre de concevoir une boutique qui a l'air cohérente et qui donne l'impression de l'être.

Cet endroit est le Design System?
Christina : Exactement. C'est une application web qui réunit notre outil de conception "Figma" et la base de code. On y voit comment certains éléments sont conçus dans l'outil de conception. A côté, on trouve les composants de code correspondants. L'application dispose également d'une fonction de recherche qui nous aide dans notre travail.

Quel était le principal problème avant l'introduction du système de conception?
Christina: Trouver les bonnes informations - par exemple, pour programmer une case à cocher. Certes, le composant "checkbox" existait dans Figma, mais il manquait le code pour le créer. En tant que développeur, vous vous demandez alors : pourquoi en est-il ainsi ? Le code de la case à cocher n'existe-t-il pas encore ? Dans de nombreux cas, la base de code était enregistrée sous un autre nom. Une autre question était la cohérence sur la page.

Qu'est-ce que vous voulez dire par là?

Christina: En tant que développeuse, si je ne trouve pas le composant dans le code, je le mets en œuvre moi-même. Mais nous avons alors le même élément plusieurs fois. La conception n'a pas toujours été mise en œuvre de la même manière dans ces implémentations multiples. Cela conduit à des incohérences. Ce problème a augmenté avec le nombre de personnes travaillant chez nous et l'accroissement de la base de code. Nous devons absolument filtrer les redondances et nous assurer que nous ne faisons pas les choses "presque de la même manière".

Leonardo: "Presque identique" est presque pire que complètement différent.

Software-Entwicklerin Christina Heidt und UX-Designer Leonardo Hauschild sprechen über das Design System von Digitec Galaxus.
Source : Christian Walker

Est-ce que l'utilisateur moyen que je suis remarque de telles incohérences?

Christina: Je pense que la plupart des gens ne le remarquent pas - sauf s'ils sont eux-mêmes designers. Mais inconsciemment, il se passe quelque chose. Vous vous rendez compte que l'interaction avec la boutique n'est pas aussi bonne qu'elle pourrait l'être. Dans le pire des cas, nos clients ne reconnaissent plus certains éléments parce qu'ils sont différents d'une page à l'autre. Ils risquent alors de tourner le dos à la boutique à cause de cette confusion. Si tout est différent, vous ne savez pas comment interagir.

Leonardo: En interne, nous ressentons la douleur dès que nous devons changer quelque chose dans l'interface utilisateur.

Pourquoi?

Leonardo: Supposons que nous devions donner un nouveau design à une case à cocher. Ensuite, les développeurs et les concepteurs UX cherchent la case à cocher et trouvent un élément à remanier. Cependant, il y a deux cases à cocher qui ont la même apparence, mais qui sont programmées différemment. Cette deuxième case à cocher rate le coup de peinture et hante donc encore la page sous son ancienne forme. Si toutes les cases à cocher identiques ne sont pas programmées de manière uniforme, c'est le chaos. Nous devons tout rechercher et remplacer manuellement. C'est exactement le problème avec le mode sombre potentiel.

Quel est le rapport entre le système de conception et le dark mode ?
.
Christina: Le Design System est une base importante. Sans lui, le mode sombre serait beaucoup plus complexe. Nous avons apporté certaines modifications au système de conception afin qu'il puisse prendre en charge le mode sombre. Nous avons donc fait un premier pas. C'est maintenant à tout le monde de décider de la suite à donner.

**Comment nos clients perçoivent-ils le système de design de l'extérieur ?Christina: Notre site sera plus cohérent. Ou plutôt, des éléments qui n'étaient pas cohérents auparavant vont disparaître. C'est un processus continu. C'est pourquoi le système de conception ne sera jamais terminé, car notre site est toujours en croissance et en évolution.Leonardo: Nous espérons surtout que les changements à grande échelle ne seront plus aussi douloureux pour nous. Cela signifie que lorsque nous colorons une case à cocher en rose, toutes les cases à cocher des différentes pages deviennent effectivement roses. Nous n'avons donc plus besoin de courir après des cases à cocher programmées de manière alternative pour les colorer manuellement en rose. Car ce processus est fastidieux.Qu'est-ce qui vous a le plus plu dans ce projet ? \Christina: Le Design System est notre propre développement et nous y avons mis beaucoup de cœur. Nous récoltons maintenant ce que nous avons semé - et c'est très cool. Nous avons créé une base pour faciliter la mise en œuvre de nouveaux projets et de nouvelles fonctionnalités. C'est beaucoup de travail, mais c'est un plaisir.Leonardo: C'est exactement ce que j'aime chez Digitec Galaxus : on ne s'ennuie jamais. Il y a toujours de nouvelles idées sur les choses que nous pouvons améliorer. Qui sait ce que nous allons entreprendre ensuite?Vous voulez voir comment nos cases à cocher, boutons ou couleurs sont développés et conçus ? Alors consultez notre système de conception ici.*Vous êtes intéressé par un emploi chez Digitec Galaxus ? Alors consultez notre portail de l'emploi.***

Cet article plaît à 47 personne(s)

Coya Vallejo Hägi

Editor

coya.vallejo@digitecgalaxus.ch

« Je veux tout connaître ! Je veux des bas terrifiants, des hauts enivrants, des milieux bien moelleux ! » : ces mots d'un personnage culte de la télévision américaine reflètent pleinement mes pensées. Je partage cette philosophie de vie, y compris au travail. Ce que cela signifie concrètement pour moi ? Je trouve que chaque histoire, de la plus insignifiante à la plus incroyable, a son charme.

Tech

Suivez les thèmes et restez informé dans les domaines qui vous intéressent.

Dans les coulisses

Actualités sur les fonctionnalités de la boutique, informations sur le marketing ou la logistique et bien plus encore.

Tout afficher

Ces articles pourraient aussi vous intéresser

Dans les coulisses
Fonction de comparaison : un marathon shopping qui roule
par Coya Vallejo Hägi
Dans les coulisses
IA et transparence des prix : projets et conclusions du Hackfest
par Martin Jungfer
Dans les coulisses
Des données à l'action : Le développement de produits en pleine mutation (partie 1)
par Ronny Wullschleger

23 commentaires

later

Recherche

"Beaucoup de cœur à l'ouvrage" : C'est pourquoi nos concepteurs et développeurs UX ont créé un système de conception .

Ces articles pourraient aussi vous intéresser

Fonction de comparaison : un marathon shopping qui roule

IA et transparence des prix : projets et conclusions du Hackfest

Des données à l'action : Le développement de produits en pleine mutation (partie 1)

23 commentaires

Top 10 catégories

Aller à

23 commentaires

Digitec Offre du jour