Asos rationalise ses workflows de design avec Figma

Le site de vêtements et de cosmétiques ASOS est devenu incontournable pour les jeunes adultes du monde entier. Rien d’étonnant, puisque ses clients ont accès à une large sélection de 900 marques, dont celles d’ASOS, comme ASOS Design, Topshop, Topman et Collusion.

Le site est connu pour son parcours client agréable et intuitif. Les retours sont faciles à faire et l’expérience globale est cohérente de bout en bout sur tous les appareils, que l’on consulte la version desktop ou mobile, depuis des applications Android ou iOS.

De plus, avec 10 langues et plus de 200 marchés, ASOS accepte de nombreux modes de paiements et propose à ses utilisateurs du monde entier une expérience qui leur est adaptée.

Comme on peut l’imaginer, le design a un rôle central dans toutes les activités d’ASOS, ce qui a amené l’entreprise à utiliser Figma. Ainsi, elle a pu rationaliser son design system, réduire ses coûts, implémenter des outils et des processus de pointe, et améliorer la collaboration inter-services.

La mode en ligne : un marché plein d’opportunités

Pendant la pandémie, le secteur de la mode en ligne a connu une croissance rapide ; il poursuit sa maturation grâce aux progrès mondiaux en matière de technologie et de logistique.

Les clients aiment le côté pratique et rapide du shopping en ligne, sans oublier ses prix compétitifs, ses offres et ses expériences d’achat personnalisées disponibles sur de nombreux canaux. Ils utilisent aussi les réseaux sociaux pour montrer les marques qu’ils portent et s’influencer les uns les autres, ce qui peut apporter un succès viral aux produits.

Kate Brook-Hart, head of product design chez ASOS, explique qu’il est primordial de prendre en compte le cycle de vie des produits numériques avant, pendant et après l’expérience d’achat. Son équipe veille donc à ce que ces points de contact soient intégrés d’un bout à l’autre des phases de discovery et de design. Pour cela, un design system fiable est essentiel.

Une équipe design soudée

L’équipe design d’ASOS rassemble plus d’une douzaine de designers de tous les niveaux, qu’ils soient junior, senior, entre les deux ou lead.

• Les product designers font partie de l’équipe digital product, et ils travaillent en étroite collaboration avec plus de 25 product managers, épaulés par deux product ops.
• Chaque designer s’occupe d’un domaine précis, comme l’acquisition et le taux d’engagement, le parcours d’achat, les modes de paiement, le paiement final ou l’après-vente. Certaines équipes ont des missions spécifiques comme Visage + Corps, Sport ou Étudiants.
• Ils travaillent de manière rapprochée avec des développeurs, des architectes, des ingénieurs QA au sein des différentes équipes de la plateforme pour faire naître des idées, construire, tester, expérimenter et lancer de nouvelles fonctionnalités.

Au sein de l’équipe, Jack Marsden, lead product designer, et Sean Conlon, product designer, travaillent tous les deux sur le paiement final.

Depuis qu’il a rejoint ASOS en avril 2022, Sean conçoit les expériences de bout en bout, de la recherche à la création des mockups finaux. « Ce qui me motive, dit-il, c’est l’impact que je peux avoir en tant que designer. Mes parcours utilisateurs vont servir à des millions de personnes dans le monde, et ils peuvent avoir un impact non négligeable sur les performances de l’entreprise. C’est très gratifiant ! »

L’équipe de Kate compte aussi un expert en accessibilité. ASOS est fière de porter des valeurs de diversité et d’inclusion, que ce soit en interne ou à travers l'expérience utilisateur qu’elle propose.

Ce qu’il y a d’unique chez ASOS, c’est l’étroite collaboration entre les designers, les product managers et de nombreuses parties prenantes issues des trois principales équipes : technologie et data, vente et relations clients, et ressources humaines et gestion.

Passer de trois outils combinés à Figma

Avant que les équipes d’ASOS ne se lancent sur Figma, elles utilisaient principalement trois outils : un pour le design, un pour la gestion de fichiers et de projet, et un autre pour les prototypes. Cette organisation présentait un certain nombre de points de friction pour les développeurs et leurs collègues.

Ils devaient utiliser trois outils : un pour le design, un pour les prototypes et un pour la livraison aux développeurs. Passer d’une variante de composant à une autre leur était difficile : il fallait enregistrer puis fermer l’outil, ce qui rendait l’idéation et le design lents et inefficaces. « Importer des composants depuis le design system, faire des modifications à la volée, ou même simplement ouvrir un fichier était très compliqué, » explique Jack.

Il leur fallait créer des listes de liens et de fichiers séparés pour obtenir des retours de la part des parties prenantes, mais aussi pour que les développeurs aient accès aux designs.

Le processus utilisé pour accéder aux fichiers et les mettre à jour était lent, les designers devaient créer des sous-dossiers et s’y tenir. Le travail n’était pas mis à jour en temps réel et y accéder à distance était impossible.

Des premiers pas à l’envol avec Figma

« Passer à Figma était une étape indispensable que les designers ont appelée de leur vœux, raconte Jack. Figma aide ASOS à concevoir ses produits digitaux avec plus d’efficacité, à fluidifier le travail en équipe et à disposer des outils les plus innovants du marché, » ajoute-t-il.

Le moment de faire le grand saut était arrivé. ASOS a choisi le forfait Organisation pour se lancer.

« La première fois que je me suis servie de Figma, se souvient Kate, c’était pendant le covid. On n’avait pas encore testé l’outil, mais c’était le moment ou jamais : nous travaillions tous de chez nous et se voir était impossible, du moins en face à face. Je me suis dit, “on peut travailler dessus en temps réel. Essayons !” Et deux jours plus tard, j’étais entièrement convaincue par Figma. »

Figma a résolu un problème majeur pour les designers d’ASOS. Les équipes investies dans le développement des produits digitaux étaient si nombreuses que le partage de fichiers en devenait un enjeu considérable. Les relations clients, le studio photo et même le merchandising étaient impliqués. Ce qui a changé la donne avec Figma ? Le fait que les liens restent identiques, même en cas de déplacement du fichier.

À ce jour, les designers sont les principaux éditeurs dans Figma, mais voir les fichiers et collaborer est facile pour leurs collègues, grâce à un accès sécurisé via une connexion unique à Figma.

Ces utilisateurs-là viennent des équipes chargées du développement, du produit, du marketing, du commercial, mais aussi des ressources humaines, de la finance, de l’audit, de la logistique et des livraisons. Au sein de Figma, ils travaillent en simultané avec l’équipe responsable des produits digitaux, ce qui permet de gagner du temps, de l’argent et de réduire l’effort nécessaire.

Désormais, Figma joue un rôle à part entière au sein de tous types de projets numériques, qu’il s’agisse de l’expérience client dans sa totalité ou de celle du logiciel utilisé par le Studio pour créer des assets sur place.

Cinq façons dont Figma a réduit la complexité chez ASOS

1. Un design rapide

• Avant Figma, le nombre d’outils employés rendait les processus de design complexes. Les fichiers étaient stockés en local, puis partagés via une plateforme dédiée.
• Figma accélère le processus de design : le logiciel est dans le cloud, il est rapide, et des fonctionnalités comme l’auto-layout permettent l’ajout et la suppression facile d’éléments à des mock-ups.

2. Le prototypage

• Un outil différent était nécessaire pour créer des prototypes réalistes et partager des liens destinés aux tests utilisateurs.
• Avec Figma, les prototypes sont fidèles à la réalité et il est possible de faire des modifications à la volée, d’où un gain de temps et d’argent à l’étape des tests utilisateurs.

3. La collaboration

• Avant, les fichiers de design étaient partagés par e-mail et plusieurs étapes étaient nécessaires pour la prise en compte des retours.
• Figma a rendu possible le partage de lien pour favoriser la collaboration et le feedback, ce qui transforme les design critiques, renforce la cohérence et permet aux parties prenantes de l’entreprise de commenter directement les designs.

4. Le design system

• Avant de passer à Figma, le design system d’ASOS était fragmenté.
• Avec Figma, utiliser et garder à jour le design system est plus facile pour les designers, tout comme l’intégration dans les mock-ups de composants issus de la bibliothèque.

5. Les présentations

• Auparavant, présenter des prototypes n’était pas toujours simple.
• Dans Figma, les fonctionnalités dédiées aux prototypes permettent aux designers de les présenter dans leur contexte et de rendre leurs présentations plus vivantes.

ASOS obtient des résultats concrets avec Figma

Figma a permis à ASOS de fusionner trois outils en un. Le workflow de design s’en est trouvé simplifié, a fait gagner beaucoup de temps à l’équipe et a réduit les coûts de l’entreprise.

Figma a aussi renforcé la collaboration entre les designers, les products managers et les développeurs, a donné à ASOS l’occasion d’améliorer son design system, puis de le garder à jour avec des outils de design de pointe, ce qui aide à attirer de nouvelles recrues.

« D’une manière générale, conclut Kate, Figma a rendu la collaboration, la production et les présentations beaucoup plus faciles pour les designers et les parties prenantes. Les designs finaux sont de meilleure qualité, ce qui facilite la livraison aux développeurs, rapprochant ces derniers des designers dans toute l’entreprise. »