Naviguer jusqu'au contenu principal

Comment NIO innove et livre rapidement grâce à Figma

Dans le secteur automobile, les choses évoluent parfois lentement. Cette industrie s'est habituée à des cycles de trois à cinq ans, allant de la conception d'une voiture à sa mise sur le marché. Et en raison de la façon dont le logiciel doit être profondément intégré au matériel, il n'est pas rare que le travail d'UX à effectuer sur les écrans embarqués soit terminé des années avant que le véhicule n'arrive sur le marché.

Cependant, les nouveaux entrants sur le marché veulent avancer plus rapidement. Nécessitant une nouvelle identité visuelle pour sa nouvelle sous-marque, firefly, le constructeur automobile chinois NIO a souhaité une agence capable d'innover, d'itérer et de livrer rapidement. Il a trouvé dans l'agence de design forpeople le partenaire adéquat.

Basé à Londres et à Amsterdam, forpeople possède une expertise couvrant divers domaines, notamment le design graphique, produit, spatial et d'interaction, ainsi que le mouvement, la rédaction, la recherche et la stratégie. Il était le partenaire parfait pour NIO, qui souhaitait créer un point de vue distinct sur le marché – se concentrant sur l'utilisateur et sur une expérience plus homogène.

Le défi consistait à concevoir une marque et un système d'identité visuelle distincts frappants, significatifs et cohérents tout au long de l'expérience utilisateur. Mais forpeople savait que la clé résidait dans une collaboration intense et des boucles de feedback continu avec les responsables du design de NIO à Munich et en Chine. Elle a pour cela fait appel à Figma.

écrans de mise en page météo avec logos et véhicule utilisant des curseurs pour collaborerécrans de mise en page météo avec logos et véhicule utilisant des curseurs pour collaborer
En collaborant dans Figma avec l'équipe de NIO, forpeople a pu rapidement avancer et faire progresser les designs.

« Si vous regardez l'histoire de la collaboration entre les agences et les clients, la plupart comptaient généralement sur des diaporamas traditionnels. Nous partagions des fichiers, nous étions en conference call en train d'examiner des documents statiques, demandant au client de passer à la diapositive suivante », raconte James Addison, directeur créatif chez forpeople. « Mais cela ne suffit pas lorsque vous créez des tonnes de visuels, avez besoin de prototypes interactifs et avez un client innovant qui doit avancer rapidement. Pour cela, nous avions besoin de Figma, et très rapidement, Figma est devenu notre hub créatif et un élément central de la collaboration reposant au cœur de notre partenariat. »

Une identité et la liberté de briller

Développer un nouveau système d'identité visuelle est un processus approfondi et détaillé. Pour la nouvelle marque automobile de NIO, forpeople s'est inspiré de la manière dont les lucioles se déplacent et brillent et des environnements avec lesquels elles interagissent.

Marius Holletzek, directeur du design et de la stratégie de l'expérience de marque chez NIO :

« Nous voulions que la marque soit inséparable de la voiture elle-même – non pas une réflexion après coup, mais quelque chose de vivant en elle. Inspirée par le langage de design de la voiture et la magie des lucioles, notre approche créative axée sur la "liberté de briller" capture un esprit d'individualité qui transparaît dans chaque détail, de la typographie et des couleurs à la façon dont la marque se déplace et s'exprime. Tout cela a été conçu avec Figma comme plateforme de choix pour développer et partager des idées. »

écrans et icônes de divers modes et interactions avec superposition de curseursécrans et icônes de divers modes et interactions avec superposition de curseurs
Le projet a impliqué plusieurs cycles d'itération via une boucle de feedback continu dans Figma.

Après ces débuts, forpeople a commencé à travailler sur le logo. « Nous avons examiné une quantité d'idées et de variantes pour le logo, et c'est là que la nécessité d'une collaboration rapide s'est manifestée », dit James. « Ce n'est pas le genre de projet que l'on peut envoyer au client puis attendre son feedback. Il y avait de multiples cycles d'itération, de multiples commentaires sur chaque logo, nous avions besoin d'une boucle de feedback continu que d'innombrables fichiers PDF envoyés par e-mail ne pouvaient garantir. »

Avec Figma, forpeople a créé pour tous les aspects du projet un hub collaboratif unique où l'équipe design de NIO à Munich pouvait faire des commentaires, tandis que l'équipe de forpeople a pu faire avancer rapidement les designs.

L'expérience embarquée créée dans Figma utilise des effets de mouvement subtils conçus pour ravir les utilisateurs.

À partir de logos statiques, l'équipe de forpeople a pu développer un mouvement. « On trouve deux écrans dans la voiture, et avec NIO nous avons décidé que les éléments visuels devraient pouvoir se déplacer d'un écran à l'autre », indique James. « Nous avons imaginé un orbe de lucioles qui se déplacerait à travers les deux espaces, voletant et clignotant à travers les écrans pour créer une expérience visuelle destinée à ravir les utilisateurs et à créer une expérience numérique fluide. »

Certains de ces concepts designs étaient des MP4 que l'équipe de forpeople a ajoutés à Figma, tandis que d'autres ont été créés directement dans Figma.

« Nous avons commencé par tester la façon dont l'interface elle-même pourrait se comporter et comment la marque pourrait prendre vie dans la voiture », explique James. « Avec Figma, nous avons examiné comment le texte pouvait se déplacer, comment le scintillement d'une luciole pouvait se traduire par un avertissement doux et comment l'innovation pouvait évoquer à la fois plénitude de l'âme et solidité. À travers ces premiers prototypes, nous avons établi une approche qui est devenue la base sur laquelle l'équipe de NIO à Shanghai a pu s'appuyer pour développer son propre prototype. Ça a vraiment été un effort mondial. »

Toutefois, l'un des résultats les plus remarquables de ce travail fut la connexion étroite que forpeople a établie avec les parties prenantes de NIO. Les deux équipes ont vu dans le plan de travail Figma le point central autour duquel développer des idées, ont donné vie à ces idées puis ont recueilli le feedback de toutes les parties prenantes.

« Nous avançons rapidement, et collaborer avec l'équipe de forpeople via Figma a amélioré l'efficacité de manière spectaculaire », affirme Marius. « Nous ne voulons pas regarder des tonnes de présentations, Figma nous permet de conserver une source de vérité unique, avec des boucles de feedback qui demeurent dans le fichier. »

Alors que l'essentiel de la collaboration a lieu avec les équipes de forpeople et de NIO intervenant dans le fichier depuis leurs bureaux du Royaume-Uni et d'Allemagne respectivement, le centre de design de NIO situé à Munich fournit un exemple fascinant de la façon dont les équipes visualisent les designs.

deux personnes regardant un grand écran avec un fichier figma et des écrans d'interface affichésdeux personnes regardant un grand écran avec un fichier figma et des écrans d'interface affichés
Le fait de passer en revue les fichiers Figma sur le powerwall de sept mètres de NIO a transformé la collaboration en personne.

C'est l'endroit où se trouve l'enceinte du powerwall de sept mètres de NIO. Celui-ci est généralement utilisé comme écran interactif et permet aux équipes de design et d'ingénierie de NIO d'examiner les véhicules à grande échelle pour évaluer et analyser un SUV virtuel avec une qualité de niveau cinéma. Mais c'est aussi l'outil parfait pour présenter un fichier Figma.

« Figma est conçu en toute sécurité pour la collaboration à distance. Mais quand nous l'intégrons à notre powerwall, le travail individuel est encore plus efficace. Le powerwall se transforme en un gigantesque plan de travail partagé où les équipes peuvent se rassembler, identifier plus rapidement les opportunités et transformer les idées en actions – ensemble, dans la même pièce », affirme Daniel Wegmann, responsable créatif chez NIO.

Le besoin de rapidité de NIO a remodelé le rythme du design automobile. Avec forpeople et Figma, l'équipe a coupé à travers la complexité pour créer, tester et affiner des idées en temps réel. Le résultat : une nouvelle identité audacieuse – et une référence nouvelle indiquant comment une collaboration rapide et ciblée peut créer un modèle avec lequel le design suit le rythme de manière ambitieuse.

Découvrez comment Figma permet d'optimiser le design

Un design d'exception peut aider votre produit et votre marque à se différencier. Et comme on ne crée de grandes choses qu'à plusieurs, Figma rassemble les équipes produit au sein d'un workflow de design rapide et plus inclusif.

Contactez-nous pour découvrir comment Figma peut aider votre entreprise à augmenter l'impact du design.

Nous verrons comment Figma peut vous aider à :

  • Centraliser chaque étape du processus de design, de l'idéation à la création en passant par la mise en œuvre
  • Accélérer les workflows de design avec des design systems partagés par toute l'entreprise
  • Favoriser l'inclusion au sein du processus de l'équipe avec des produits web accessibles et simples d'utilisation

Connect with our team

By clicking “Submit” you agree to our TOS and Privacy Policy.