Zugang

Mit deinem Zugangscode siehst du alle Projekte und Downloads.

← alle projekte
Design Systems

Umbrella Design System

Aus isolierten Sicherheitsprodukten ein tokenisiertes, markenübergreifendes System, das Tempo, Standing und Strategie des Produktdesigns neu definierte.

Jahr
2019–2024
Rolle
Head of Product Design · Design System
Umfang
Design-Strategie · Tokens · Team-Leadership
Kunde
Avira / Gen Digital
Umbrella Design System

Ein Sicherheitsunternehmen verkauft Vertrauen. Vertrauen entsteht auch daraus, dass eine Schutz-Software auf jedem Gerät gleich aussieht und gleich funktioniert. Genau das war der Zustand nicht: Windows, macOS, Mobile und die Webdienste hatten je eigene Geschichten, eigene Ausnahmen, intern sogar eigene Namen.

Bevor wir bauten, haben wir gefragt. Soll eine Schutz-Software aussehen wie das Betriebssystem, in dem sie läuft, oder wie die Marke, der man vertraut? Wir haben die Skala in Stufen gestaltet und mit Nutzern getestet. Das Ergebnis war nicht das erwartete: Kunden wollten mehr Marke sehen, nicht weniger.

Avira · Design System

Aus Silos ein System

Isolierte Sicherheitsprodukte wurden zu einem tokenisierten, markenübergreifenden System, das Tempo, Standing und Strategie des Produktdesigns neu definierte.

60 % Marke statt Betriebssystem Ergebnis der Nutzertests
4 Plattformen, ein System Swift · Kotlin · Windows · React Native
2 Tage bis zum Beweis Hackathon: Tokens in nativem Code
4 Wochen bis zum Markenwechsel Norton-macOS – vorher nicht vorgesehen
Umbrella Design System, Übersicht
Inventur

Bestand aufnehmen, dann konsolidieren

Umbrella Design umfasste mehr als eine Komponentensammlung: Farbe, Typografie, Raster und Layout, eine Icon-Bibliothek — und die Content Voice, also die Frage, wie ein Sicherheitsprodukt spricht, wenn es Gefahr meldet, ohne Panik auszulösen.

Der entscheidende Schritt kam 2022: semantische Design Tokens. Nicht „dieses Blau“, sondern „die Farbe für eine Warnung“. Die Architektur trennte globale von semantischen Werten, hielt Hell- und Dunkelmodus getrennt und war von Anfang an pro Marke ausgelegt. Damit beschreibt ein Token nicht mehr das Aussehen, sondern die Bedeutung.

Ob das über eine Präsentation hinaus funktioniert, haben wir an einem Hackathon in zwei Tagen bewiesen — die Token-Struktur ließ sich in echte native Entwicklung ausspielen: Swift, Kotlin, die Windows-Umgebung und React Native. Ein Beweis, den man in zwei Tagen führen kann, überzeugt eine Entwicklungsorganisation schneller als ein Konzept, das ein halbes Jahr diskutiert wird.

avira-umbrella-design-system-02.png
avira-umbrella-design-system-09.png
Ein System, das Tempo, Standing und Strategie des Produktdesigns neu definierte.
Semantische Tokens

Tokens machten das Team schnell

Mit semantischen Tokens wurde das Team so schnell und effektiv, dass daraus die Grundlage entstand, eine neue Design-Strategie zu validieren.

Komponenten-Bibliothek
Wirkung · Impact

Neues Standing fürs Produktdesign

Die Wirkung ging über die Technik hinaus: Produktdesign wurde neu positioniert, UX Research in ein eigenes Team ausgegliedert, dazu ein starkes Design-Maturity-Assessment und drei Beförderungen. Design-Strategie direkt mit dem CTO.

Auf dem tokenisierten Stack entstand später ein launch-fertiger Norton-macOS-Proof-of-Concept in rund vier Wochen: der Beweis, dass ein White-Label-System einen Markenwechsel ohne großen Dev-Aufwand trägt.

Weitere Projekte für Avira (Part of Gen™)

Alle Projekte von Avira (Part of Gen™)