Trusted Shops optimiert sein Design-System mit Figma

Seit seiner Gründung im Jahr 1999 hat sich Trusted Shops durch sein Gütesiegel, authentische Nutzerfeedbacks und den umfassenden Käuferschutz einen Namen gemacht. Und hinter den Kulissen revolutioniert das Unternehmen aktuell sein Design.

Im Jahr 2022 hat Trusted Shops Figma großflächig eingeführt, um seine Design-Systeme und -Sprache sowohl für B2B- als auch B2C-Anwendungen zu optimieren und zu standardisieren.

Figma hat dabei nicht nur die Prozesse für Designer*innen, Programmierer*innen und UX-Expert*innen verbessert, sondern auch die Erstellung moderner Prototypen und den Austausch von Dateien erheblich vereinfacht. Hier erfährst du mehr über die Zusammenarbeit von Trusted Shops und Figma.

Trusted Shops

Etwa 30.000 Online-Shops weltweit setzen auf das Trusted Shops Gütesiegel, das vertrauenswürdige Online-Shops auszeichnet. Die hohen Anforderungen für die Vergabe des Gütesiegels beinhalten Faktoren wie Datenschutz, Rückgaberecht, Lieferzeiten und Preistransparenz. Und damit hat Trusted Shops eine einzigartige, vertrauenswürdige Community aufgebaut.

Oliver Pitsch, bei Trusted Shops verantwortlich für User Experience & Product Marketing, berichtet, dass es im Unternehmen zahlreiche designorientierte Teams gibt. Beispielweise gibt es Teams für Produktdesign und Content und Lokalisierung, die sich aus Content-Designer*innen, UX-Writern, technischen Redakteur*innen und Lokalisierungsmanager*innen zusammensetzen. Zusätzlich gibt es ein Produktmarketingteam mit Produktmarketingmanager*innen und Grafikdesigner*innen.

Alle diese Teams arbeiten eng mit den über zehn interdisziplinären Produktteams von Trusted Shops zusammen, insbesondere mit dem Team für Produktdesign. Und alle sind mittlerweile versierte Figma-Nutzer*innen.

„Meine Rolle in Bezug auf Figma ist vielfältig“, erklärt Oliver Pitsch.

• Als Director UX hat er das Produktdesign, den Content und die Lokalisierung des gesamten Produktportfolios unter seiner Aufsicht.
• Als Director Product Marketing bringt er die Bereiche Marketing und Produktmarketing zusammen, um technische Produktinformationen in griffige Marketingsprache und Material für produktbezogene Marketingkampagnen zu übersetzen.
• Zudem ist er als Mitglied des Product Leadership Teams mitverantwortlich für die Ausrichtung der Produktstrategie. Kurz gesagt, Oliver hat viel zu tun.

Eine einheitliche Designsprache für B2B und B2C

Oliver berichtet von einer besonders „faszinierenden Herausforderung“ bei Trusted Shops: Das Unternehmen hat sowohl einen breiten B2B-Kundenstamm, der täglich seine Lösungen nutzt, als auch Millionen von Verbraucher*innen, die täglich auf die Produkte zugreifen. Beide Nutzergruppen interagieren über die Produkte von Trusted Shops direkt miteinander.

Die Aufgabe des Design-Teams bei Trusted Shops besteht darin, ein markenkonformes, wiederverwendbares System von Assets zu entwickeln und zu pflegen. Dieses System muss die Designsprache für B2B und B2C standardisieren, während es gleichzeitig flexibel genug bleibt, um spezielle Designs und Muster für unterschiedliche Zielgruppen zu ermöglichen.

Die bisher von dem Unternehmen genutzten Design-Tools stellten zusätzlich eine Herausforderung dar. Eines davon wurde im Jahr 2020 übernommen, was eine Migration erforderlich machte. Einem anderen fehlten die Funktionen zur Teamzusammenarbeit und Versionierung, die Trusted Shops jetzt benötigt. Oliver fügt hinzu, dass die Verwaltung eines umfangreichen Design-Systems mit dem bisherigen Tool ebenfalls zu komplex war. Es wurde Zeit, sich Figma mal genauer anzusehen.

Trusted Shops und Figma

Für Oliver Pitsch war der Wechsel von den bisherigen Tools zu Figma ein logischer Schritt. „Wir haben Figma getestet und waren sofort begeistert. Es überzeugte durch hohe Geschwindigkeit, bot alle Funktionen, die wir uns erhofft hatten, und war zudem sehr kosteneffizient“, berichtet er.

Die Entscheidung fiel daher zugunsten einer Migration zu Figma Organization, da diese Plattform alle benötigten Funktionen bereitstellte. Dazu zählen unternehmensweite Verwaltung des Design-Systems, Versionskontrolle und -verzweigung sowie SSO (Single Sign-On).

„Sicherheit ist fundamental, wenn es um Vertrauen geht. Daher sind Funktionen wie SSO in Figma Organization für uns von zentraler Bedeutung“, betont Oliver.

Trusted Shops hat sich für die Design-System-Familie Helios entschieden. Helios bietet spezifische Toolkits für verschiedene Produktbereiche, wobei sämtliche Designentscheidungen auf der „Helios Foundation“ – einem gemeinsamen Toolkit – basieren.

Nach Einrichtung und Onboarding-Unterstützung durch Figma ermöglichte Trusted Shops zunächst einem begrenzten Personenkreis Zugriff, um den Weg für weitere Designer*innen zu bereiten. Obwohl ein schneller Import von Dateien möglich gewesen wäre, entschied sich Trusted Shops bewusst dafür, sämtliche Designdateien neu zu erstellen, um die Konsistenz ihrer gemeinsamen Attribute zu gewährleisten.

Hierbei kam die „Auto Layout“-Funktion von Figma zum Einsatz, die den Prozess erheblich erleichterte. „Trotz einer umfangreichen Liste mit mehr als 150 unterschiedlichen Dateien ist es uns gelungen, alle Designs innerhalb von nur neun Wochen zu migrieren oder neu zu erstellen“, berichtet Oliver. Anschließend konnten die Teams Figma nutzen, um Designs zu erstellen und kollektiv daran zu arbeiten. "Das war für uns der eigentliche Startschuss für das Design mit Figma", erklärt Oliver.

Für die Produktdesigner*innen gestaltete sich die Lernkurve weniger steil als zunächst angenommen, und das Feedback vom Team war nach Olivers Worten „supergut“.

Gelöste Probleme

Dank Figma konnten Oliver und seine Teams vier zentrale Herausforderungen meistern:

1. Verwaltung des Design-Systems

Figma ermöglichte die Nutzung mehrerer Bibliotheken für eine breite Palette von Projekten, Produkten und Teams.

2. Versionskontrolle und -verzweigung

Mit Figma konnte eine umfangreiche Versionskontrolle und -verzweigung realisiert werden, wodurch Assets separat dupliziert und angepasst werden konnten.

3. Verbesserung der Zusammenarbeit

Figma verbesserte die Kollaboration zwischen Designe*rinnen und Entwickle*rinnen erheblich.

4. Prototyping

Die Möglichkeiten zur Erstellung realistischerer und interaktiverer Prototypendesigns für Benutzertests und Studienzwecke wurden durch Figma ebenfalls stark verbessert.

Ablauf eines typischen Projekts

Ein Projekt beginnt üblicherweise in Confluence, wo die sogenannten „Discovery-Dokumente“ abgelegt sind. Das sind im Wesentlichen schriftliche Vorlagen, die für die jeweiligen Funktionen oder Produkte essentiell sind.

Die Designer*innen nutzen dann Whimsical für das Wireframing. Die Wireframes und Discovery-Dokumente werden mit dem Team und allen Beteiligten besprochen und abgestimmt. Diese werden dann als Prototypen in Figma übertragen, um das Design für die verschiedenen Zustände festzulegen. „Hier führen wir alle Diskussionen rund um die eigentlichen Designdetails“, so Oliver.

Anschließend werden die Prototypen von Nutzerinnen getestet und sowohl für Research-Zwecke als auch für die interne Abstimmung mit den Beteiligten genutzt. Schließlich arbeiten Designer*innen und Entwickler*innen zusammen daran, die Designs zu programmieren und in ein Trusted Shops Produkt zu integrieren.

Die umfassende Implementierung von Figma

Figma hat sich mittlerweile in allen Geschäftsbereichen von Trusted Shops durchgesetzt, in denen Designer*innen tätig sind, einschließlich Produktentwicklung, Marketing, Vertrieb und Customer Success.

Es gibt 30 Editor*innen und viele weitere Betrachter*innen. Produktdesigner*innen erstellen und verwalten Designs in Figma, während Content-Designer*innen und UX-Writer Figma für die Content-Erstellung verwenden. Entwickler*innen und Produktmanager*innen nutzen ihre Figma-Konten, um Assets zu überprüfen und Kommentare hinzuzufügen. Das UX-Team setzt FigJam für die Zusammenarbeit ein.

Oliver betont dazu: „Es gibt viele Gründe, Figma zu mögen. Aus meiner Sicht ist der bedeutendste, dass die Zusammenarbeit in den Dateien einfacher und effizienter ist als bei anderen Tools.“

​​Mit Figma war es beispielsweise möglich, Interaktionen auf der Ebene des Prototypdesignsystems zu integrieren. Dadurch konnten Prototypen mit großem Funktionsumfang mit nur wenigen Klicks global verfügbar gemacht werden.„Unsere Prototypen befinden sich jetzt auf einem ganz anderen Niveau als vorher“, sagt Oliver.

Vor der Implementierung von Figma musste Trusted Shops mit Sketch und Abstract zwei verschiedene Tools verwenden. Mit Figma ist nur noch ein Tool erforderlich, was sowohl Zeit als auch Mühe einspart und eine unternehmensweite Vereinheitlichung der Design-Systeme und -Sprachen für B2B und B2C ermöglicht.

Oliver zieht Bilanz: „Unsere Designer*innen sind alle begeistert von Figma, das ist für uns ein großer Erfolg. Und es erleichtert uns die Rekrutierung.“ Denn Designer*innen arbeiten gern mit Figma und fragen oft im Bewerbungsprozess danach. Ab sofort kann Trusted Shops auch hier vertrauensvoll überzeugen.