In guter Gesellschaft: Wie Einzelhändler Figma nutzen, um den E-Commerce zu verbessern

Ob es darum geht, Kreislaufwirtschaften zu fördern oder über verschiedene digitale Berührungspunkte hinweg zu übersetzen – die Welt des E-Commerce ist anspruchsvoller geworden. Um Vertrauen aufzubauen, eine reibungslose Customer Journey zu ermöglichen und eine einheitliche Markenbotschaft zu erzählen, ist ein konsistentes –und überzeugendes – digitales Erlebnis ein Muss.

Wir haben mit Teams führender Marken gesprochen, um herauszufinden, wie sie diese Ziele erreichen und ihre Prozesse mit Figma weiterentwickeln. Hier erfährst du, wie Nuuly den Bekleidungsverleih organisiert, wie Ruggable seine E-Commerce- und Marketing-Touchpoints verbindet und wie Design Business Company im Gleichschritt mit GitHub arbeitete, um ein Schaufenster zu entwickeln, das entscheidend für Entwickler*innen ist.

Wie Nuuly die Benutzererfahrung beim Leihen von Bekleidung optimiert

Während einige Unternehmen das Leihen von Kleidung für besondere Anlässe normalisiert haben, versuchen neuere Akteure wie Nuuly, das 2019 gegründet wurde, es im Alltag populär zu machen. „Nuuly feiert die Idee der Veränderung“, sagt Laura Petrini, Direktorin für Benutzererfahrung bei Nuuly. „Wir geben den Kunden die Möglichkeit, ihren Stil zu ändern, damit sie sich ausdrücken und ihrer Kreativität freien Lauf lassen können.“

Um dieses Versprechen zu erfüllen, hat Nuuly ein nahtloses Leiherlebnis geschaffen, das Abonnent*innen zu schätzen wissen und lieben gelernt haben. Da Bekleidungs-Abonnementdienste noch in den Kinderschuhen stecken, hat Nuuly zudem viel eigene Technologie entwickelt, um die andere Seite des Verleihs zu unterstützen: zirkuläres Bestandsmanagement, Reinigung und Reparaturen. Das bedeutete, zwei Designsysteme von Grund auf zu erstellen – eines für Kunden und eines für die Verleihlogistik – beide mit einzigartigen Zielen und einem skalierenden Unternehmen im Blick. „Wir haben unser Designsystem mit Farb- und Schrifttoken eingerichtet, die leicht ausgetauscht werden können, sodass die Marke Spielraum hat, um mit den Jahreszeiten zu wachsen – ganz wie wir unseren Kunden Spielraum geben, ihren Stil auszuleben“, sagt Laura.

Obwohl die Technologie, die der Verleihlogistik zugrunde liegt, komplex ist, ist es Nuulys Ziel, es den Kund*innen so einfach wie möglich zu machen, sich an eine neue Art des Einkaufens zu gewöhnen. „Wir haben Erfahrungen auf ihre einfachste, intuitivste Form reduziert“, sagt Laura. Zum Beispiel repräsentiert die My Nuuly-Funktion der Sites die Nuuly-Tasche einer Kundin oder eines Kunden und führt sie durch über 26 mögliche Verleihstatus – von dem, was jetzt passiert, bis zu dem, was als Nächstes erwartet wird.

Das Management und die Skalierung der Designsysteme hinter all dieser Komplexität führten das Team 2023 zur Einführung von Figma. „Unsere ursprünglichen Designsysteme wurden aufgrund von Beschränkungen der Dateigröße aufgeteilt, und da sie mit unserem Server synchronisiert werden mussten, war die Leistung langsam“, sagt Erica Benamy, Principal UX Designer bei Nuuly. „Wir haben letztendlich insgesamt 16 Dateien verwaltet. Den Umstieg auf Figma haben wir daher als Gelegenheit genutzt, um alles in zwei einfachen Figma-Bibliotheken zu konsolidieren und neu zu gestalten.“

Die Nutzung von Figma hat die Workflows erheblich beschleunigt. „Wir gestalten in einem viel schnelleren Tempo“, sagt Erica. Die Verwendung der nativen Prototypen-Tools von Figma hat den Designer*innen auch geholfen, den Entwickler*innen die erwarteten Interaktionsmuster während der Designübergabe besser zu kommunizieren, sagt sie: „Es hat uns viel wendiger gemacht und das Gefühl gegeben, wirklich im Einklang miteinander als Organisation zu sein.“

Nuulys UX-Migration zu Figma hat andere Abteilungen dazu veranlasst, dasselbe zu tun. Die Content-Design- und Studiofotografie-Teams entwerfen jetzt in Figma zusammen mit dem UX-Team. Und mit Tools zur Zusammenarbeit wie FigJam und Figma Slides hat sich das weitere Nuuly-Unternehmen ebenfalls zusammengeschlossen, um zusammenzuarbeiten, zu brainstormen und Verbesserungen der Customer Journey wie den Thrift Shop zu überprüfen, der Abonnent*innen Zugang zu Schlussverkaufsstilen gibt, die sie nicht leihen müssen, um sie zu kaufen.

Für die Kund*innen von Nuuly bedeutet dies schnellere Verbesserungen und Innovationen in ihrem Erlebnis. Für das Nuuly-Team bedeutet es mehr Zeit zur Zusammenarbeit, kreativen Erkundung und einer Art kundenorientiertem Design-Denken, das die Beziehung von Nuuly zu ihren Abonnent*innen fördert.

Wie Ruggable für konsistente digitale Oberflächen sorgt

Als Alicia Clapper, Director of UX Product Design, vor sechs Jahren zu Ruggable kam, wurde sie in mehrere parallele, isolierte Workflows geworfen. Dies führte zu unharmonischen Erfahrungen über die digitalen Plattformen hinweg – von Anzeigen in sozialen Medien über die Startseite bis hin zu Produktdetailseiten – und damit zu einer unschlüssigen Customer Journey. Da Ruggable-Käufer*innen oft 10 Tage oder länger benötigen, um einen Teppich nach dem Stöbern zu kaufen, war es entscheidend, zwischen all diesen Berührungspunkten Konsistenz herzustellen, insbesondere in einem zunehmend wettbewerbsintensiven Umfeld.

„Historisch gesehen waren das UX- und E-Commerce-Team ziemlich getrennt von der Marke und dem Kreativteam“, sagt Alicia. Eine Social-Media-Kampagne würde ein eigenes Set an Bildern zeigen, während die Website ein anderes nutzte. „Wir hatten nie wirklich viel Insight in das, was sie taten, und umgekehrt, bis die Dinge live gingen.“

Dies war teilweise der Fall, weil ihre Arbeit auf mehrere Tools verteilt war und dann manuell in Google Drive geteilt wurde. Ohne eine zentrale Komponentenbibliothek waren Elemente wie Farben, Schriftarten, Schaltflächen und Fußzeilen schwer zu verwalten. „Wir kopierten und fügten einfach von einer Seite zur anderen ein und bearbeiteten sie basierend auf dem Projekt und dem Inhalt”, sagt Alicia. „Es war sehr manuell und schuf viel Raum für Fehler von einem Projekt zum anderen. Versionskontrolle existierte nicht, daher mussten wir wirklich sicherstellen, dass wir die neuesten Dateien kopierten. Ich weiß nicht, ob ich das überhaupt als ‚Verwalten‘ eines Designsystems kategorisieren würde.”

Vor fünf Jahren begann das UX-Team mit einer Migration zu Figma, um alles in Ausrichtung zu bringen. Jetzt können sie neue Designs entwerfen, Prototypen erstellen und testen – alles an einem Ort. Außerdem ist der Übergang vom Design zur Entwicklung dank Dev Mode zehnmal schneller als zuvor. Statt Annotationen manuell zu erstellen, können Designer*innen einfach ein Kästchen ankreuzen, um die Dateien vorzubereiten. „Das Gefühl war: ‚Das ist perfekt. Wir brauchen nichts weiter.‘“ sagt Alicia. Jetzt gibt es weniger Hin und Her zwischen Designer*innen und Entwickler*innen, und es ist klar, welche Version eines Designs am aktuellsten ist.

Nach der Einladung als Mitarbeiter*innen bei Figma sind nun auch die Teams für Brand, Kreativität, Retention und Akquisition von Ruggable der Plattform beigetreten. „Wir konnten das Kreativteam einbeziehen, indem wir einfach Links teilten und es ihnen ermöglichten, Kommentare zu spezifischen Dingen zu hinterlassen, die ihrer Meinung nach besser zur Marke passen“, sagt Alicia. „Die Einfachheit, unser Designsystem in Figma nach unserem Rebranding 2024 zu aktualisieren und zu implementieren, inspirierte andere Teams ebenfalls, es nutzen zu wollen. Das war ein großer Auslöser für eine breitere Akzeptanz.“ Jetzt bringt Alicia mehrere Teams für funktionsübergreifende Meetings und Brainstorm-Sessions in FigJam zusammen. „Eine unserer Produktmanager*innen hat sogar einen Kommentar dazu abgegeben, wie unterhaltsam, ansprechend und produktiv die Meetings sind“, bemerkt sie.

Dieser neue Standard für Engagement und Zusammenarbeit war entscheidend, um ein konsistentes Kundenerlebnis zu schaffen, was für den Markenaufbau wesentlich ist. „Es gibt eine Vertrautheit, die bei den Menschen Anklang findet“, sagt Alicia. „Und es stärkt wirklich das Vertrauen in die Marke und ermöglicht ihnen, das zu finden, wonach sie suchen, und den Kauf zu tätigen.“

Wie GitHub und Design Business Company Entwickler*innen Freude bereiten

Als beliebte Entwicklerplattform sah GitHub die Möglichkeit, seinen Online-Shop sowohl zur Stärkung der Marke als auch zum Aufbau einer Community zu nutzen. Um dies zu ermöglichen, hat sich GitHub mit dem Kreativ-Team Design Business Company zusammengetan, um ein herausragendes Einkaufserlebnis auf Shopify zu schaffen, das Sammlerstücke rund um das Programmieren, Kleidung und Lifestyle-Produkte anbietet. Das Projekt erforderte ein neues Designsystem, Markenartikel, Produktfotografie und Verpackung, was alles in Figma durchgeführt wurde. Die Neugestaltung hat das GitHub-Team nicht nur davor bewahrt, umständliche manuelle Aktualisierungen im Store vornehmen zu müssen, sondern sie hat auch Raum für Spielereien in Form von entwicklerzentrierten „Easter Eggs“ geschaffen, die viel über die Markenidentität von GitHub aussagen.

Gegründet von Stewart Scott-Curran, Judson Collier und Jordan Egstad, erfolgt die Einbindung von DBCo in die Kliententeams für jedes Projekt, weg von dem früher dominierenden Agentur-weiß-es-besser-Prinzip, das einst die Designbranche beherrschte. Anstatt Ideen alle paar Wochen oder Monate zu präsentieren, bietet DBCo Einblicke darin, was und wie es gestaltet, um eine fortlaufende Konversation mit seinen Klienten zu schaffen, bei denen es sich in der Regel um Early- und Mid-Stage-Start-ups handelt, die responsiv und flexible Workflows erwarten. „Die Kunden können uns dabei helfen, die Richtung so viel schneller zu korrigieren“, sagt Jordan. „Das spart enorm viel Zeit.“

Sobald ein Projekt startet, lädt DBCo die Kunden zu einem gemeinsamen Figma-Moodboard ein, wo jeder Ideen einbringen und Kommentare hinterlassen kann. „Das ist unsere erste Verteidigungslinie, wenn es darum geht, Feedback zu sammeln, wegen des Kontexts und der Granularität, die es uns bietet“, sagt Judson. Der Neugestaltung des Ladens waren mehr als zwei Dutzend Menschen beteiligt, darunter Stakeholder vom GitHub-Shop, Brand-, Design- und Web-Teams sowie Barrierefreiheitsberater*innen. Alles in der Datei zu kartieren bedeutete, dass diese Mitarbeiter*innen jederzeit leicht einsteigen und sich im Projekt zurechtfinden konnten.

Nach der Brainstormingphase war es an der Zeit, das Designsystem zu entwickeln. Um den Prozess zu beschleunigen, beginnt DBCo mit einer universellen Grundlage, die es das Construct Design System nennt, das mit Figma-Variablen eingerichtet ist. Als Ausgangsrahmen trifft Construct „den Sweet Spot zwischen einem hilfreichen System und zu vielen Einschränkungen“, sagt Jordan, der berichtet, dass es anderthalb Tage Arbeit auf nur 30 Minuten komprimiert.

Prototypen zu erstellen war ebenfalls ein wesentlicher Teil des Prozesses, insbesondere wenn es darum ging, die Produktseiten zum Leben zu erwecken. Diese Designs beinhalteten oft acht Varianten – von Größe über Farbe bis hin zur Anpassung – die bedingte UI und „nerdige, eigenwillige Entwicklermomente“ erforderten, wie Jordan beschreibt. Wenn jemand zum Beispiel den Konami-Code eingibt, werden die Websitebilder in ASCII-Kunst umgewandelt. „Entwickler*innen nutzen Worte und Buchstaben als Werkzeuge, also dachten wir: ‚Wir müssen einen Weg finden, diese Worte zu animieren und zum Leben zu erwecken‘“, sagt er. „Wir entwickelten verschiedene Bewegungsstudien und integrierten sie in Prototypen, um wirklich ein Gefühl dafür zu bekommen, wie die Benutzeroberfläche mit verschiedenen Übergängen, Button-Hover-Status und dergleichen reagieren würde. GitHub bei der Visualisierung der Designs zu helfen und ihnen ein greifbares Gefühl zu geben, war wirklich hilfreich, um eine Entscheidung zu treffen.“

Am Ende führte die enge Zusammenarbeit mit mehreren Teams in derselben Datei zu einem kohärenten Einzelhandelserlebnis, vom Browsen über den Checkout bis zur Lieferung, für das anspruchsvolle Publikum von GitHub. „Entwickler*innen sind gute Bullshit-Detektoren“, sagt Judson. „Wir wurden herausgefordert, sicherzustellen, dass wir der Form und der Arbeit der Entwickler*innen treu bleiben, denn was auch immer wir machten, wollten wir es auf einem sehr hohen Niveau tun.“

E-Commerce bedeutet heutzutage viel mehr, als eine Kundin oder einen Kunden dazu zu bringen, auf „In den Warenkorb legen“ zu klicken. Mit dem Wachstum des Markts werden herausragende digitale Erlebnisse für alle Schritte der Customer Journey, von der Markenbekanntheit bis zum eigentlichen Kauf, wichtiger werden. Es ist essenziell, Raum für Teams zu schaffen, um ehrgeizige Ideen zu brainstormen, schnell einen Prototyp zu erstellen und diese den Kund*innen zu präsentieren. Erfahre mehr darüber, wie Teams Figma nutzen, und nimm Kontakt für eine Demo auf.