Wie ASOS mit Figma Design-Workflows optimiert

Das Mode- und Kosmetikunternehmen ASOS ist zur Anlaufstelle für modebewusste junge Erwachsene aus aller Welt geworden. Kein Wunder: Kund*innen können aus einer großen Auswahl von 900 Marken wählen, einschließlich der hauseigenen Marken von ASOS wie ASOS Design, Topshop, Topman und Collusion.

ASOS überzeugt online durch ein intuitives, nahtloses Shopping-Erlebnis – ob am PC, Smartphone oder über ihre Apps für Android und iOS. Problemlose Rücksendungen und konsistente Nutzererfahrungen sind hier Standard.

Dazu kommt die globale Reichweite: Das Angebot ist in 10 Sprachen verfügbar und deckt über 200 Märkte ab, unterstützt durch weltweite Zahlungsoptionen und ein lokal angepasstes Einkaufserlebnis.

Design steht bei ASOS an erster Stelle. Daher hat das Unternehmen Figma ins Boot geholt. Dies führte zur Optimierung des Design-Systems, Kosteneinsparungen, verbesserten Tools und Prozessen und stärkte die teamübergreifende Zusammenarbeit.

Einzigartige Marktchancen für Online-Modeunternehmen

Die Mode-E-Commerce Branche wuchs während der Pandemie rasant und entwickelte sich mit globalen Fortschritten in Technologie und Logistik weiter.

Das moderne Publikum schätzt den unkomplizierten und raschen Einkauf im Netz, gelockt durch attraktive Preise, Online-Specials und maßgeschneiderte Shopping-Erlebnisse über diverse Plattformen. Via Social Media stellen Menschen stolz ihre neuesten Errungenschaften zur Schau, wodurch Trends entstehen und Mode viral geht.

Kate Brook-Hart, die bei ASOS das Produktdesign leitet, betont die Bedeutung einer ganzheitlichen Betrachtung des digitalen Produktlebenszyklus – vom ersten Klick bis zum Teilen nach dem Kauf. Ihr Team bezieht daher jeden Kundenkontakt in seine kreativen und gestalterischen Überlegungen ein. Ein solch kohärentes Vorgehen setzt ein solides Design-System voraus.

Ein gut vernetztes Designteam

Das Produktdesignteam von ASOS ist beeindruckend vielseitig und setzt sich aus Designer*innen verschiedener Erfahrungsstufen zusammen – von Associate über Mid-Level und Senior bis hin zu Lead.

• Die Produktdesigner*innen sind Teil des Digital Product Teams, das eng mit über 25 Produktmanager*innen zusammenarbeitet und von zwei Product Operations Manager*innen unterstützt wird.
• Jede*r einzelne Designer*in spezialisiert sich auf einen konkreten Produktbereich, sei es Akquisition & Engagement, Einkaufserlebnis, Zahlungsoptionen, Checkout-Prozesse oder den Kundenservice nach dem Kauf. Zudem gibt es spezielle Missions-Teams, die sich Bereichen wie Gesichts- und Körperpflege, Sportbekleidung oder Angeboten für Studierende widmen.
• In ihrer Arbeit stehen sie in engem Kontakt mit Entwickler*innen, Systemarchitekt*innen und QA-Expert*innen aus diversen Plattform-Teams. Gemeinsam konzipieren, entwickeln, testen und launchen sie innovative Funktionen.

Zum Team gehören auch Jack Marsden, ein leitender Produktdesigner im Checkout-Bereich, und Sean Conlon, ein Produktdesigner, der ebenfalls im Checkout-Bereich tätig ist.

Seit seinem Einstieg bei ASOS im April 2022 hat Sean seinen Schwerpunkt auf den gesamten Designprozess gelegt – angefangen bei der Forschung bis hin zur Entwicklung von detailreichen, hochauflösenden Designs. „Was mich motiviert", sagt er, „ist der enorme Einfluss, den man als Designer*in bei ASOS erzielen kann. Deine Entwürfe erreichen Millionen von Nutzer*innen weltweit und können einen maßgeblichen Einfluss auf den Erfolg des Unternehmens haben. Das ist unglaublich inspirierend!"

In Kates Team wird auch der Aspekt der Barrierefreiheit nicht vernachlässigt: Ein Mitglied kümmert sich speziell um dieses wichtige Thema. ASOS betont die Bedeutung von Diversität und Inklusion, wobei der Fokus sowohl auf internen Prozessen als auch auf einem inklusiven Kundenerlebnis liegt.

Das Besondere an ASOS ist die intensive Zusammenarbeit verschiedener Bereiche: Produktdesigner*innen, Produktmanager*innen und zahlreiche andere Stakeholder*innen vernetzen sich unternehmensweit. Dabei rücken drei Kernbereiche besonders eng zusammen: Technologie & Daten, Handel & Kund*innen (Commercial & Customer) sowie People & Operations.

Dank Figma: Drei Tools in einem

Bevor ASOS mit Figma durchstartete, waren drei separate Tools im Einsatz: eines für Design, eines für Dateimanagement und Kollaboration und das dritte für Prototyping. Dieses Setup stellte sich jedoch als problematisch für Designer*innen und ihre Kollaborateur*innen heraus:

• Das Arbeiten mit drei unterschiedlichen Tools für Design, Prototyping und die Weitergabe an Entwickler*innen war umständlich und ineffizient.
• Der Wechsel zwischen unterschiedlichen Designkomponenten war mühsam. Das ständige Speichern und Schließen behinderte den kreativen Flow. Jack beschreibt das Arbeiten so: „Das Einbinden von Designsystemkomponenten, spontane Designänderungen oder auch nur das bloße Öffnen einer Datei fühlte sich so träge an, als würde man im Schlamm stecken.“
• Um Feedback von Stakeholder*innen zu erhalten oder Entwickler*innen Zugriff auf die Designs zu ermöglichen, mussten Teams ständig separate Link- und Dateisammlungen pflegen.
• Der Prozess, Dateien aufzurufen oder zu aktualisieren, war nicht nur langsam, sondern auch umständlich. Designer*innen waren gezwungen, separate Design-Versionen (Branches) anzulegen und zu speichern. Hinzu kam, dass die Designs nicht in Echtzeit aktualisiert wurden und ein remote Zugriff schwierig war.

Mit Figma hebt ASOS ab

Der Umstieg auf Figma markierte für ASOS einen wichtigen Schritt – eine von Designer*innen aller Hierarchiestufen geforderte und unterstützte Initiative. "Dank Figma können wir bei ASOS schneller und nahtloser designen, kollaborieren und stets mit den führenden Tools der Branche Schritt halten", betont Jack.

ASOS erkannte den Bedarf an Veränderung und entschied sich für das umfassende Figma Organization-Abo.

Kate erinnert sich: „Meine erste Begegnung mit Figma war während der Covid-Pandemie. Wir hatten das Tool zwar noch nicht ausprobiert, aber die Arbeit von zu Hause bedeutete ein 'Jetzt oder nie'. Da persönlicher Kontakt nicht mehr möglich war, dachte ich: 'Mit Figma können wir in Echtzeit zusammenarbeiten. Versuchen wir es einfach'. Innerhalb von zwei Tagen war ich vollständig in Figma eingearbeitet.“

Figma löste ein ganz bestimmtes Problem für die Designer*innen von ASOS. Da so viele interne Teams – wie Commercial, Studios und Merchandising – an der digitalen Produktentwicklung beteiligt waren, wurde das Teilen von Dateien zur Herausforderung. Doch mit Figma blieben geteilte Links konstant, selbst wenn die zugehörige Datei verschoben wurde. Dieser Aspekt erwies sich als echter Game Changer.

Die Produktdesigner*innen nutzen Figma als Haupteditor, wobei andere Teammitglieder über ihren gesicherten Single-Sign-On-Zugang mühelos auf Dateien zugreifen und darin mitarbeiten können.

Zu dieser breitgefächerten Nutzergruppe zählen Abteilungen wie Programmierung, Produktentwicklung, Marketing, Handel und Commercial. Aber auch Mitarbeiter*innen aus HR, Finanzen, Audit sowie Logistik und Lieferung profitieren davon. In Figma können sie alle nahtlos mit dem Produktteam interagieren, wodurch erhebliche Zeit- und Kostenersparnisse erzielt werden.

Mittlerweile ist Figma in zahlreichen Digital-Product-Projekten integriert und erstreckt sich über die gesamte Kundenerfahrung. Darüber hinaus findet es Anwendung in internen Vorhaben, beispielsweise in der firmeneigenen Software. Letztere ermöglicht es dem Studios-Team, direkt vor Ort benötigte Assets zu generieren.

Bei ASOS ist das Leben mit Figma gleich 5-fach leichter

1. Design-Geschwindigkeit

• Vor Figma wurden Designs lokal gespeichert und auf Dateifreigabeplattformen hochgeladen.
• Weil Figma cloudbasiert ist, erlaubt es ein flüssiges und schnelles Design durch Funktionen wie Auto-Layout, mit dem Dinge im Design ein- und ausgeblendet werden können.

2. Prototyping

• Für das Prototyping war ein separates Tool erforderlich, um realistische Prototypen zu erstellen und Links für Benutzertests freizugeben.
• Figma kann einen originalgetreuen Prototyp erstellen und ermöglicht sofortige Aktualisierungen, was Zeit und Geld in der Benutzertestingphase spart.

3. Zusammenarbeit

• Früher wurden Design-Dateien per E-Mail geteilt und Feedback über mehrere Schritte eingeholt.
• Figma ermöglicht das Teilen von Einzellinks für eine einfache Zusammenarbeit und direktes Feedback, transformiert Design-Kritiken und Konsistenz. Business-Stakeholder*innen können ebenfalls direkt Feedback geben.

4. Design-System

• Vor Figma war das Design-System von ASOS fragmentiert.
• Designer*innen finden das Design-System mit Figma einfach zu bedienen und zu warten. Komponenten können ebenfalls unkompliziert in Designs implementiert werden.

5. Präsentationen

• Die Präsentation von Prototypen war vor Figma kompliziert.
• Mit den Prototyping-Funktionen von Figma können Designer*innen Prototypen im Kontext präsentieren und ihnen so Leben einhauchen.

Durch Figma erzielte ASOS greifbare Ergebnisse

Dank Figma konnte ASOS drei separate Tools in einem vereinen, wodurch der Designprozess vereinfacht und wertvolle Arbeitszeit sowie Kosten eingespart wurden.

Darüber hinaus verbesserte Figma die Synergie zwischen Designer*innen, Produktmanager*innen und Entwickler*innen und ermöglichte ASOS, sein Design-System fortlaufend zu optimieren. Die Nutzung modernster Design-Tools macht ASOS auch für potenzielle Talente attraktiver.

Insgesamt, sagt Kate, hat Figma die Zusammenarbeit, die Produktivität und das Präsentieren unter den Designer*innen und unter den Stakeholder*innen im Unternehmen wesentlich erleichtert. „Unsere finalen Design sind hochwertiger, was auch die Übergabe an die Entwickler*innen viel geschmeidiger macht und Entwickler*innen und Designer*innen im Unternehmen näher zusammenbringt.“