Ausgangslage
Variantendichte in Tabellenform
Die Opel-Modelle wurden in einer sehr hohen Variantendichte angeboten: mehrere Ausstattungslinien (Selection, Edition, Drive, Color Edition, Innovation …), diverse Motor-/Getriebe-/Antriebskombinationen, Dutzende Farben, Felgen, Innenraum-Materialien, Optionspakete und Zubehör – und das über die gesamte Modellpalette hinweg. Der bestehende Online-Konfigurator musste diese Komplexität modellübergreifend abbilden, ohne den Nutzer beim Kaufentscheidungsprozess zu verlieren.
Typisch für Automotive-Konfiguratoren dieser Zeit: sehr datenlastige Vergleichstabellen (Verbrauch, CO2-Klasse, Leistung), zahlreiche Abhängigkeiten zwischen Optionen (z. B. "nur in Kombination mit Paket X verfügbar" oder gegenseitige Ausschlüsse) und ein langer, stark transaktionaler Prozess vom ersten Klick bis zur Händleranfrage.
Reales Opel-Projekt, entstanden in einem dreiköpfigen Designteam (ein Head of Design, zwei UI-Designer). Meine Rolle war UI-Design mit deutlicher Überschneidung zu UX – ich habe also nicht nur die visuelle Umsetzung verantwortet, sondern auch an der Interaktions- und Informationslogik mitgearbeitet.
Aufgabe
Einen Konfigurationsprozess gestalten, der trotz hoher Informationsdichte und komplexer Produktlogik so einfach und geführt wie möglich bleibt. Im Kern ging es darum, den stark workflow-getriebenen, technischen Auswahlprozess in ein Interface zu übersetzen, das:
dem Nutzer jederzeit Orientierung gibt, wo er im Prozess steht und was seine Wahl kostet,
große Optionsmengen so gruppiert, dass sie auf einen Blick erfassbar sind,
Abhängigkeiten und Konflikte zwischen Optionen klar sichtbar macht, statt sie zu verstecken,
Vergleichbarkeit (zwischen Trims, Motoren, Paketen) ermöglicht, ohne die Auswahl selbst zu verkomplizieren,
den Prozess für Anbieter/Hersteller monetär sinnvoll hält (Upsell/Cross-Sell), ohne aufdringlich zu wirken,
am Ende zuverlässig in eine Konversion (Testdrive, Händlerangebot, PDF-Export) mündet.
Vorgehen
Klare, lineare Schrittführung mit Rückkehr-Option
Der Prozess wurde in sechs klar benannte Schritte gegliedert (Trim Level, Engine, Exterior, Interior, Others, Summary), jederzeit sichtbar in der oberen Navigation und frei anspringbar – wichtig bei einem Prozess, in dem Nutzer erfahrungsgemäß zurückspringen, um Kombinationen zu vergleichen.
Persistente Kosten- und Fortschrittsübersicht
Eine fixe Sidebar zeigt durchgängig Preis bzw. Leasingrate, das aktuelle Fahrzeug-Setup und den nächsten Schritt (NEXT-CTA). So bleibt die wichtigste Entscheidungsgröße – der Preis – unabhängig vom Scrollzustand immer präsent, ohne dass der Nutzer sie aktiv suchen muss.
Unterteilung großer Optionsmengen in Tabs
Innerhalb eines Schritts (z. B. Exterior) wurden die Optionen weiter in Unterkategorien wie Colors, Wheels, Packs, Options, Accessories gegliedert. Das reduziert die auf einmal sichtbare Informationsmenge und macht auch sehr große Kataloge (z. B. 15+ Lackfarben) überschaubar.
Ein wiederkehrendes visuelles Vokabular für Auswahlzustände
Ausgewählte Optionen sind per Haken markiert, inkompatible/konfliktbehaftete Optionen durch ein rotes Ausrufezeichen, empfohlene Optionen durch ein Stern- bzw. Daumen-hoch-Icon. Dieses konsistente System ermöglicht es, Status und Handlungsempfehlung zu erfassen, ohne Fließtext lesen zu müssen.
Pakete transparent und vergleichbar gemacht Optionspakete
(z. B. "Trend-Pack Color Edition") listen explizit die enthaltenen Leistungen auf und verlinken direkt zu vergleichbaren Alternativpaketen (Pack A–F), damit der Nutzer die Bündel gegeneinander abwägen kann, statt sie isoliert bewerten zu müssen.
Kontextuelle Empfehlungen statt Pop-up-Upselling
Hinweise wie "Save when combined with this pack" oder "Comfort Pack recommended" wurden direkt an der jeweiligen Option platziert – Cross-Selling als integrierter Teil der Entscheidung, nicht als Unterbrechung des Flows.
Datenlastige Vergleiche klar strukturiert
Die Motorentabelle bündelt technische Kennwerte (kW/PS, Verbrauch, CO2-Klasse) in einer klaren Tabellenstruktur mit Farbcodierung der Effizienzklasse; Detailinformationen wurden hinter (i)-Icons ausgelagert, um die Tabelle selbst lesbar zu halten.
Side-by-Side-Vergleich als eigene Ansicht
Für den direkten Trim-Vergleich wurde eine separate, horizontal scrollbare Matrixansicht entwickelt, in der abweichende Ausstattungsmerkmale zwischen den Linien optisch hervorgehoben (unterstrichen) sind – Unterschiede werden dadurch sofort erkennbar, ohne jede Zeile einzeln lesen zu müssen.
Zusammenfassung als Abschluss- und Konversionspunkt
Die finale Summary-Seite bündelt alle gewählten Optionen inkl. Bild, Preis und Änderungsmöglichkeit, zeigt das EU-Energielabel, Rabatte und zusätzliche Services, und führt gezielt zu den nächsten Schritten (Testdrive vereinbaren, Händlerangebot anfordern, PDF-Download).
Ergebnis
Einordnung & Business-Impact
Übersetzung der komplexen Opel-Modellpalette in modulare Interface-Bausteine zur drastischen Senkung der kognitiven Last. Implementierung linearer Schrittführung, permanenter Preistransparenz und kontextueller Empfehlungen zur Beschleunigung des Funnels bis zum Conversion-Ziel (Testdrive, Angebot, PDF).
Testing-Ergebnisse & System-Validierung
In Nutzertests erreichten Probanden ihr Ziel spürbar schneller – getrieben durch eine hochgradig skalierbare Informationsarchitektur. Das neue Statussystem aus Haken, Warnsymbolen und Empfehlungen löste komplexe Machbarkeits- und Ausschlussprüfungen im Selektionsprozess transparent auf.
Eigene Rolle
Als UI-Designer mit UX-Anteil im dreiköpfigen Core-Team verantwortlich für die Schnittstelle aus Interaktionslogik und visueller UI-Governance. Fokus auf der Konzeption der Schrittführung, der Status-Architektur für System-Konflikte sowie der visuellen Ausgestaltung der Paketvergleiche.
Value & Handoff
Überführung der variantenreichen B2C/B2B-Logik in ein praxistaugliches UI-Framework. Enger Schulterschluss mit dem Engineering-Team zur Validierung der technischen Machbarkeit sowie zur fehlerfreien Implementierung der Regelwerke und Konfigurations-Ausschlüsse im Frontend.
