Kontext

Im Rahmen der Digitalisierung des Firmenkundengeschäfts entstand ein internes Tool. Als UI-Designerin war ich Bindeglied zwischen Marketing und Entwicklung – mit Verantwortung für Struktur, Designlogik und Interaktionskonzept.

Herausforderung

Wie kann ein System Marken­konsistenz sichern und gleichzeitig variable Inhaltsmengen von 2 bis 20 Produkten abbilden?

Business-Ziel

  • Marketing: Markenkontrolle behalten, Inhalte zentral steuern

  • Außendienst: Reduzierte Prozesszeit und keine Abhängigkeit von IT-Support

User-Ziel

  • Firmenkunden: Benefits im eigenen Corporate Design präsentieren

Leistungen

Konzept Contentstruktur Wireframe Mockup Whitelabel Design Component Library Design Dokumentation Stakeholder- & Dev-Alignment

Ergebnis

Ein System, drei zufriedene Stakeholder

Durch strategische Moderation und pragmatische Designentscheidungen entstand ein Microsite-System, das Marketing, IT und Außendienst in einem Prozess vereint.

Laptop zeigt R+V Versicherung Microsite-Tool mit Willkommensbildschirm für Firmenmitarbeiter und modularer Navigation
Startseite des B2B-Tools: Zentraler Einstiegspunkt für Vertriebsmitarbeiter

  • Ein Login statt zwei Tools: Workflow von 2 auf 1 Screen reduziert

  • Alle Funktionen zentral: Versorgungsbausteine wählen, Medien kombinieren, Microsite generieren

  • Baukastenprinzip: gesenkte Hürde für den Außendienst

Laptop zeigt R+V WhiteLabel-Microsite
Generierte B2B2C-Microsite: White-Label-fähiges, modulares System

  • Content First: flexible Komponenten

  • Whitelabel-Design: Anpassung der Farben an das jeweilige Unternehmen

  • User-Zentriert: barrierefrei und responsiv

Prozess

Berechtigungen strukturieren Content-Flow

Die komplexen Versicherungsbausteine benötigen verschiedene Ebenen an Berechtigungen. Die Zentrale pflegt Inhalte ein, der Außendienst wählt daraus für Firmenkunden aus, das System generiert die Microsite. Ich habe mit dem Projektmanagement diesen Flow strukturiert – daraus ergab sich die komplette Tool-Logik.

Aufbau: Rollenmodell und Berechtigungen
Aufbau: Rollenmodell und Berechtigungen

Content-Architektur first:

Inhaltsfluss durch alle Rollen definieren.

workflow optimieren

Ein Screen statt zwei

Außendienstler müssen Versorgungsbausteine UND Medien auswählen. Ursprünglich in zwei getrennten Schritten – umständlich und zeitraubend.

Nach Team-Iterationen: User kombinieren fast immer beides. Ich habe beide Schritte zusammengeführt.

Vorher: Zwei Schritte bei der Auswahl der Inhalte
Vorher: Zwei Schritte bei der Auswahl der Inhalte
Nachher: Alle Bausteine und Medien zusammen. User wählen frei, was sie brauchen.
Nachher: Alle Bausteine und Medien zusammen. User wählen frei, was sie brauchen.

System skalieren

Von vielfältig zu responsiv strukturiert

Ein Produkt hat eine Spalte, ein anderes drei. Wie bleibt das responsiv? Ich habe in wöchentlichen Reviews mit Entwicklern und Marketing verschiedene Lösungen durchgespielt. Marketing wünschte Pagination, Dev brachte Screenreader-Anforderungen ein.

Aufbau: Produkt A = 1 Spalte vs. Produkt B = 3 Spalten
Aufbau: Produkt A = 1 Spalte vs. Produkt B = 3 Spalten

Accessibility first:

HTML-Tabellen statt Grafiken

Impact

Komplexität gemeistert, Microsites skaliert

Als UI-Designerin habe ich in diesem Projekt Content-Architektur mitentwickelt, Workflows optimiert und interdisziplinär moderiert.

Das Projekt schärfte mein Verständnis dafür, wie strukturelle Designentscheidungen direkt Effizienz, Skalierbarkeit und Akzeptanz beeinflussen – und legte den Grundstein für meine systematische Vertiefung in UX-Methoden.

Konkretes Ergebnis:

  • Reduzierte kognitive Last durch klare Content-Struktur

  • Skalierbare Microsites für 2–20 Produkte

  • Akzeptanz beim Außendienst geschaffen

Portrait 3D Diana Grafl

Bereit für klare Lösungen?

Sie suchen eine UX-orientierte Designerin mit Blick für Nutzer und Details? Ich freue mich auf den Austausch.

LinkedIn-Profil