Zu Hauptinhalten gehen

Wie NIO mit Figma Innovationen schuf und schnell lieferte

Im Automobilsektor bewegen sich die Dinge manchmal langsam. Es ist eine Branche, die sich an drei- bis fünfjährige Zyklen vom Design eines Autos bis zu seiner Veröffentlichung gewöhnt hat. Und aufgrund der Art und Weise, wie Software tief in Hardware eingebettet werden muss, ist es nicht ungewöhnlich, dass die UX-Arbeit an Bildschirmen im Auto Jahre vor der Markteinführung des Autos abgeschlossen wird.

Neue Marktteilnehmer*innen möchten jedoch schneller vorankommen. Als der chinesische Automobilhersteller NIO eine neue visuelle Identität für seine neue Submarke firefly benötigte, wollte das Unternehmen mit einer Agentur zusammenarbeiten, die innovieren, iterieren und schnell liefern kann. Und es fand den richtigen Partner in der Designagentur forpeople.

Mit Sitz in London und Amsterdam verfügt forpeople über Fachwissen in verschiedenen Bereichen, darunter Grafik-, Produkt-, Raum- und Interaktionsdesign sowie Motion, Texterstellung, Forschung und Strategie. Sie waren der perfekte Partner für NIO, das einen eigenen Standpunkt im Markt schaffen wollte – mit Fokus auf die Benutzer*innen und ein nahtloses Erlebnis.

Die Herausforderung bestand darin, ein unverwechselbares Marken- und visuelles Identitätssystem zu schaffen, das in der gesamten Benutzer*innenerfahrung auffällt sowie bedeutungsvoll und konsistent ist. Aber forpeople wussten, dass der Schlüssel eine intensive Zusammenarbeit und kontinuierliche Feedbackschleifen mit NIOs Designleitungen in München und China sein würden. Und dafür setzten sie auf Figma.

Bildschirme mit Wetterlayout und Logos eines Fahrzeugs, mit Cursorn zur Zusammenarbeit.Bildschirme mit Wetterlayout und Logos eines Fahrzeugs, mit Cursorn zur Zusammenarbeit.
Durch die Zusammenarbeit mit dem NIO-Team in Figma konnte forpeople schnell vorankommen und das Design zügig weiterentwickeln.

„Wenn man sich die Geschichte ansieht, wie Agenturen mit Kunden arbeiten, verlassen sich die meisten typischerweise auf traditionelle Foliensatz. Wir haben Dateien geteilt, uns online getroffen und uns statische Dokumente angesehen sowie den Kunden gebeten, zur nächsten Slide zu wechseln“, sagt James Addison, Kreativdirektor bei forpeople. „Aber das reicht nicht aus, wenn man Tonnen von visuellen Inhalten erstellt, interaktive Prototypen benötigt und einen innovativen Kunden hat, der schnell vorankommen muss. Dafür brauchten wir Figma. Ziemlich schnell wurde daher Figma unser kreatives Zentrum und ein Kern für die Zusammenarbeit, die im Mittelpunkt unserer Partnerschaft stand.“

Eine Identität mit „Freedom to glow“

Die Entwicklung eines neuen visuellen Identitätssystems ist ein tiefgehender und detaillierter Prozess. Für die neue Automarke von NIO ließ sich forpeople von der Bewegung der Glühwürmchen inspirieren, wie sie leuchten und mit ihrer Umgebung interagieren.

Marius Holletzek, Direktor für Markenerlebnisdesign und Strategie bei NIO:

„Wir wollten, dass die Marke untrennbar mit dem Auto verbunden ist und nicht wie ein nachträglicher Gedanke wirkt, sondern etwas Lebendiges in ihm ist. Inspiriert vom Design des Autos und der Magie der Glühwürmchen, fängt unsere kreative Ausrichtung ‚Freedom to Glow‘ einen Geist der Individualität ein, der sich in jedem Detail widerspiegelt – von der Typografie und den Farben bis hin zur Art und Weise, wie die Marke sich bewegt und spricht. All dies wurde mit Figma als unserer Plattform entwickelt und geteilt, um Ideen zu entwickeln und auszutauschen.”

Bildschirme und Icons verschiedener Modi und Interaktion mit Cursor-Überlagerung.Bildschirme und Icons verschiedener Modi und Interaktion mit Cursor-Überlagerung.
Das Projekt umfasste mehrere Iterationsrunden über eine ständige Feedbackschleife in Figma.

Aus diesen Anfängen heraus begann forpeople, an dem Logo zu arbeiten. „Wir haben viele Ideen und Variationen für das Logo durchgespielt und hier kam der Bedarf an schneller Zusammenarbeit zum Tragen,“ sagt James. „Dies ist nicht die Art von Projekt, die man an den Kunden schicken und dann auf Feedback warten kann. Es gab mehrere Iterationsrunden, zahlreiche Kommentare zu jedem Logo. Wir benötigten einen ständigen Feedbackzyklus, der durch das Versenden endloser PDFs per E-Mail nicht gewährleistet werden konnte.“

Mit Figma erstellte forpeople ein einzelnes kollaboratives Zentrum für alle Aspekte des Projekts, bei dem das Designteam von NIO in München kommentieren konnte, während das Team von forpeople die Entwürfe schnell voranbringen konnte.

Das im Figma erstellte In-Car-Erlebnis nutzt subtile Bewegungseffekte, die den Benutzer*innen Freude bereiten sollen.

Aus statischen Logos konnte das Team von forpeople Bewegung entwickeln. „Es gibt zwei Bildschirme im Auto, und zusammen mit NIO haben wir beschlossen, dass visuelle Elemente von einem Bildschirm zum anderen bewegt werden können sollten,“ sagt James. „Wir entwickelten die Idee eines Glühwürmchen-Orbs, der sich über die beiden Bereiche bewegt, über Bildschirme flackert und blitzt, um ein visuelles Erlebnis zu schaffen, das Benutzer*innen Freude bereiten und ein nahtloses digitales Erlebnis kreieren sollte.”

Einige dieser Konzeptentwürfe waren MP4s, die das forpeople-Team zu Figma hinzugefügt hat, einige wurden direkt in Figma erstellt.

„Wir begannen damit, zu experimentieren, wie sich die Benutzeroberfläche selbst verhalten könnte und wie die Marke im Auto zum Leben erweckt werden könnte“, sagt James. „Mit Figma haben wir untersucht, wie sich Schrift bewegen könnte, wie das Flackern eines Glühwürmchens in eine sanfte Warnung übersetzt werden könnte und wie Innovation sowohl solide als auch seelenvoll wirken kann. Durch diese frühen Prototypen haben wir eine Richtung geformt, die zur Grundlage für das NIO-Team in Shanghai wurde, um darauf aufzubauen und es zu ihrem eigenen zu machen. Dies war wirklich eine weltweite Anstrengung.“

Aber eines der größten Ergebnisse dieser Arbeitsweise war die enge Verbindung, die forpeople mit den Stakeholdern bei NIO aufbaute. Beide Teams empfanden die Figma-Arbeitsfläche als zentralen Punkt, um Ideen zu brainstormen, in die Tat umzusetzen und anschließend Feedback von Stakeholdern in ihren jeweiligen Organisationen zu sammeln.

„Wir arbeiten schnell und die Zusammenarbeit mit dem Team von forpeople in Figma hat die Effizienz noch einmal drastisch verbessert,“ sagt Marius. „Wir möchten uns nicht durch Tonnen von Präsentationen arbeiten. Figma ermöglicht es uns, eine einzige Informationsquelle beizubehalten, mit Feedbackzyklen, die in der Datei bleiben.“

Während der Großteil der Zusammenarbeit mit den Teams von forpeople und NIO in den Dateien aus ihren Büros in Großbritannien und Deutschland stattfindet, kommt jetzt ein faszinierendes Beispiel dafür, wie die Teams Designs visualisieren, aus NIOs Designzentrum in München.

zwei Personen, die sich einen großen Bildschirm mit einer Figma-Datei und Benutzeroberflächen-Bildschirmen ansehenzwei Personen, die sich einen großen Bildschirm mit einer Figma-Datei und Benutzeroberflächen-Bildschirmen ansehen
Die Überprüfung der Figma-Dateien an der sieben Meter langen Power-Wall von NIO hat die persönliche Zusammenarbeit transformiert.

Dort befindet sich das sieben Meter lange „Power Wall“-Theater von NIO. Es wird typischerweise als interaktiver Bildschirm von NIOs Design- und Ingenieurteams genutzt, um Autos im Vollmaßstab zu begutachten und zu analysieren, und das in Kinoqualität. Es ist aber auch das perfekte Präsentationstool für eine Figma-Datei.

„Figma ist auf jeden Fall für die Remote-Zusammenarbeit gebaut. Aber wenn wir es auf unserer Power Wall einsetzen, wird die persönliche Arbeit noch effektiver. Es wird zu einer gigantischen gemeinsamen Arbeitsfläche, auf der Teams sich versammeln, schneller Chancen erkennen und Ideen in die Tat umsetzen können – zusammen, im selben Raum“, sagt Daniel Wegmann, Creative Lead bei NIO.

NIOs Bedürfnis nach Geschwindigkeit hat den Rhythmus des Automobildesigns umgestaltet. Mit forpeople und Figma hat das Team die Komplexität durchbrochen, um Ideen in Echtzeit zu kreieren, zu testen und zu verfeinern. Das Ergebnis: eine kühne neue Identität – und ein neuer Maßstab dafür, wie schnelle, fokussierte Zusammenarbeit ein Modell für Design schaffen kann, das mit den Ambitionen Schritt hält.

So kannst du mit Figma Designs skalieren

Großartiges Design hat das Potenzial, dein Produkt und deine Marke von der Masse abzuheben. Aber Großes entsteht nur gemeinsam. Figma vereint Produktteams in einem schnellen und inklusiveren Design-Workflow.

Kontaktiere uns, um mehr darüber zu erfahren, wie du mit Figma dein Design skalieren kannst.

Wir zeigen dir, wie dich Figma unterstützen kann:

  • Zusammenführung aller Schritte des Designprozesses an einem Ort – von der Ideenfindung über den Entwurf bis hin zur Umsetzung von Designs
  • Schnellere Design-Workflows dank unternehmensweit genutzter Designsysteme
  • Inklusivität bei den Abläufen im Produktteam dank intuitiver und benutzerfreundlicher webbasierter Produkte

Connect with our team

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