Ein System für alles – wie UX-Design bei FRITZ! Hardware und Software verbindet

Juliane Brandt ist UX-Designerin bei FRITZ! und als Fachleitung Design System verantwortet sie die gemeinsame Grundlage, auf der alle Interface-Entscheidungen im Haus aufbauen. Die Arbeit von Juliane und ihrem Team findet sich in jedem Interface wieder, mit dem Nutzerinnen und Nutzer direkt mit unseren Produkten interagieren, wie zum Beispiel in der FRITZ!Box-Oberfläche oder den FRITZ!-Apps.

Ein Designsystem, das alles zusammenhält

Seit 2019 ist Juliane bei FRITZ!, davor: Werbeagenturen, dann Produktseite, immer wieder das gleiche Gefühl: zu spät im Prozess, zu wenig Einfluss auf das, was wirklich entschieden wird. Was sie zu FRITZ! gezogen hat, war die Aussicht, Produkte von Anfang an mitdenken zu dürfen. Nicht erst, wenn das Konzept steht und es nur noch darum geht, etwas gut aussehen zu lassen. Sondern von Beginn an. Eingestiegen als UI-Designerin, verantwortet sie heute als Fachleitung ein Projekt, das die gesamte Designbasis von FRITZ! neu aufbaut.

FRITZ! entwickelt Netzwerkgeräte und Smart-Home-Produkte: Router, Repeater, smarte Steckdosen und Heizkörperregler, die in Millionen europäischer Haushalte im Einsatz sind. Entwickelt in Berlin, gefertigt in Europa: ein Technologieunternehmen, das Hardware und Software vollständig unter einem Dach baut.

Eine Infrastruktur für alle

„Viele denken, dass ein Designsystem im Wesentlichen nur eine Komponentenbibliothek ist“, sagt Juliane. „Es ist vielmehr eine Verzahnung von Design und Entwicklung. Das Designsystem gibt diesem Prozess eine Form und Ausrichtung, mit der wir langfristig unsere Produkte weiterentwickeln.“

Bei FRITZ! kommt eine besondere Anforderung hinzu. Die Produkte dürfen technisch komplex sein, aber niemals kompliziert wirken. „Das Ziel ist immer, es so einfach wie möglich zu machen, aber auch so tief wie nötig“, beschreibt Juliane die Gratwanderung. Beide Nutzungsszenarien, das intuitive Anmelden eines Geräts ebenso wie die VPN-Konfiguration, brauchen eine durchdachte Grundlage.

Atome, Tokens, Organismen und der Wechsel zu Figma

Strukturell folgt das Design System dem Prinzip des Atomic Design. Den Ausgangspunkt bildet bei FRITZ! ein zentraler Brand-Hub, aus dem Tokens abgeleitet werden, das Fundament des Systems. Tokens funktionieren zweistufig: Erst werden einfache Variablen definiert, etwa ein reiner Farbwert. Diesen werden dann Verwendungsregeln zugewiesen, zum Beispiel welche Farbe für primäre Elemente steht, welcher Abstand wo gilt. Aus diesen Atomen entstehen Komponenten wie Buttons oder Dropdowns, die wiederum zu größeren Einheiten zusammengesetzt werden, etwa einer Karte aus Button, Bild und Text.

Der Effizienzvorteil zeigt sich bei Änderungen: Wird ein Token aktualisiert, werden alle Komponenten, die es verwenden, automatisch mitgezogen. „Aber man muss diese Stellen noch immer im Hinterkopf haben. Eine kleine Änderung kann große Auswirkungen haben“, betont Juliane.

Das Team steckt mitten im Umbau: Der Wechsel von Sketch auf Figma und damit die Chance, das Design System von Grund auf neu aufzubauen. Auch das Rebranding der Marke FRITZ! fließt mit ein. Figma verspricht eine stärkere Verzahnung mit der Entwicklung und effizientere Abläufe durch Automatisierungen im Deployment.

Prozesse, die funktionieren und Menschen, die mitdenken

Ein neues Feature beginnt nicht mit dem ersten Frame, sondern mit Fragen: Was soll gelöst werden? Welche technischen Rahmenbedingungen gelten? Wer muss von Anfang an im Boot sein? Dafür gibt es Kick-offs gemeinsam mit Product Management, Frontend- und Backend-Entwicklung. „Weil jeder so eine Vorstellung von einem Feature hat und dass sich die nicht unbedingt deckt, merkt man immer erst, wenn man miteinander gesprochen hat.“

Feedback kommt aus vielen Richtungen: vom Testengineering, das Wissen über Randfälle und Nutzungsszenarien mitbringt, aus Labor- und Inhouse-Phasen, und nach dem Release auch über den Support und App-Bewertungen.

Was als Nächstes kommt

Der Umbau läuft: das neue Design System, das Rebranding, die wachsende Bedeutung der MyFRITZ!-App. Vieles geschieht parallel. KI spielt dabei eine wachsende Rolle: beim Erstellen und Vertesten von Prototypen, Iterationen in der Konzeptphase und auch bei der Dokumentation. „Ich glaube, dass der Faktor Mensch nie komplett wegfallen wird“, sagt Juliane. „Um neue Dinge zu schaffen, braucht es noch immer jemanden, der prüft: Passt das denn eigentlich?“

„Man merkt, dass viele Leute da sind, die Lust haben, was zu verändern“, sagt Juliane. Wer gestalten will, findet bei FRITZ! ein Umfeld, das genau das möglich macht.

kommentar field