Gespräch buchen

Select Language

Porsche Modellübersicht

Mit dem Porsche Car Configurator konfigurieren Sie Ihren Traumwagen ganz individuell. Von Modell, Farbe und Felgen bis hin zu Interieur und Sonderausstattung – alles in einer interaktiven Echtzeit-Vorschau.

FINANZIERT

8,9 Mio. $

Live-Website ansehen

Verraten Sie uns, was Sie bauen.

Überblick

Der Porsche Car Configurator bekam ein umfassendes Redesign. Der Grund? Die alte Version passte einfach nicht mehr zu den Bedürfnissen moderner User – besonders auf dem Smartphone. Mit unserem neuen Version 3 Design System haben wir die Plattform auf ein neues Level gehoben: cleaner, edler und deutlich zugänglicher. Das Ziel: Ein bewusst minimalistisches Interface, damit Ihre Kunden ihr Traumauto Schritt für Schritt konfigurieren können – ohne Ablenkung, ohne Hürden. Dieses Redesign basiert auf echtem User-Feedback. Wir haben Usability-Schwachstellen in der Modellübersicht konsequent eliminiert und komplett neu gedacht, wie wichtige Informationen in jeder Phase der Digital Journey präsentiert werden.

Porsche-Fahrzeugkonfigurator

Mit dem Porsche Car Configurator gestalten User ihr Traumfahrzeug ganz individuell – von Modell und Farbe über die Räder bis hin zum Interieur. Alles erlebbar in einer interaktiven Echtzeit-Vorschau.

Zeit für ein Upgrade

Der Porsche Car Configurator hat ein Redesign erhalten, da die alte Version nicht mehr zeitgemäß war – vor allem auf Smartphones. Mit dem neuen Design-System (Version 3) bot sich die Chance, alles übersichtlicher, moderner und nutzerfreundlicher zu gestalten. Das neue Design ist bewusst minimalistisch und aufgeräumt. So finden sich User leichter zurecht und konfigurieren ihr Traumauto Schritt für Schritt ohne Ablenkungen.

Die Neugestaltung basierte auf direktem User-Feedback, um gezielt Usability-Schwachstellen zu beheben. Gleichzeitig konnten wir das neue Design-System (V3) implementieren. Eine perfekte Gelegenheit, um den Konfigurator grundlegend auf das nächste Level zu heben.

Probleme bei Ihrer User Research

Fehlende Infos zu den Modellen

In der alten Ansicht gab es nur Bilder und Namen – ohne technische Details, Preise oder Highlights.
Die Folge: Besonders neue oder weniger erfahrene Nutzer hatten Mühe, die Modelle einzuordnen und zu vergleichen.

Reizüberflutung durch unstrukturiertes Layout

Die alte Version zeigte alle Modelle gleichrangig nebeneinander. Ohne klare Struktur oder visuelle Führung.

Die Folge: Nutzer fühlten sich schnell überfordert und wussten nicht, wo sie anfangen sollten.

Kein klarer Call to Action (CTA)

Ein eindeutiger Button für den Start der Konfiguration fehlte. Nutzer mussten auf das Modell klicken, ohne zu wissen, was passiert.

Die Folge: Unsicherheit beim nächsten Schritt und unnötige Denkarbeit.

Fehlende Infos zu den Modellen

Reizüberflutung durch unstrukturiertes Layout

Die alte Version zeigte alle Modelle gleichrangig nebeneinander. Ohne klare Struktur oder visuelle Führung.

Die Folge: Nutzer fühlten sich schnell überfordert und wussten nicht, wo sie anfangen sollten.

Kein klarer Call to Action (CTA)

Ein eindeutiger Button für den Start der Konfiguration fehlte. Nutzer mussten auf das Modell klicken, ohne zu wissen, was passiert.

Die Folge: Unsicherheit beim nächsten Schritt und unnötige Denkarbeit.

Wie lösen wir die Probleme?

Fehlende Infos zu den Modellen

Lösung: Zeigen Sie alle wichtigen Fahrzeugdaten direkt in der Übersicht. So entscheiden Ihre Nutzer schneller – ohne Extra-Klick.

Visueller Overload durch unruhiges Layout

Lösung: Strukturieren Sie Inhalte in klaren, visuell getrennten Cards. Das gibt Orientierung und entlastet das Auge.

Kein klarer Call to Action (CTA)

Lösung: Platzieren Sie unübersehbare „Konfigurieren“-Buttons. Das zeigt den nächsten Schritt und macht den Einstieg kinderleicht.

Fehlende Infos zu den Modellen

Lösung: Zeigen Sie alle wichtigen Fahrzeugdaten direkt in der Übersicht. So entscheiden Ihre Nutzer schneller – ohne Extra-Klick.

Visueller Overload durch unruhiges Layout

Lösung: Strukturieren Sie Inhalte in klaren, visuell getrennten Cards. Das gibt Orientierung und entlastet das Auge.

Kein klarer Call to Action (CTA)

Lösung: Platzieren Sie unübersehbare „Konfigurieren“-Buttons. Das zeigt den nächsten Schritt und macht den Einstieg kinderleicht.

Einige Erkenntnisse aus unserer Recherche

Wichtige Infos (wie Preis oder Features) fehlten – das macht den direkten Modellvergleich schwer.

Es gab keinen klaren CTA, um mit der Konfiguration zu starten.

Wiederkehrende User haben keinen klaren CTA gefunden, um ihre gespeicherte Konfiguration zu laden.

Wichtige Infos (wie Preis oder Features) fehlten – das macht den direkten Modellvergleich schwer.

Es gab keinen klaren CTA, um mit der Konfiguration zu starten.

Wiederkehrende User haben keinen klaren CTA gefunden, um ihre gespeicherte Konfiguration zu laden.

Designprinzipien

Orientierung schaffen

Designen Sie das UX/UI so, dass Nutzer sofort verstehen, welche Modelle verfügbar sind, wie sie sich unterscheiden und was der nächste Schritt ist.

Informationen sichtbar machen

Wichtige Details wie Preis, Fahrzeugtyp und Features gehören direkt auf den Tisch – für schnelle Vergleiche und klare Entscheidungen.

Wiederkehr leicht machen

Sorgen Sie dafür, dass wiederkehrende Nutzer genau da weitermachen können, wo sie aufgehört haben – mit direktem Zugriff auf gespeicherte Konfigurationen.

Orientierung schaffen

Designen Sie das UX/UI so, dass Nutzer sofort verstehen, welche Modelle verfügbar sind, wie sie sich unterscheiden und was der nächste Schritt ist.

Informationen sichtbar machen

Wichtige Details wie Preis, Fahrzeugtyp und Features gehören direkt auf den Tisch – für schnelle Vergleiche und klare Entscheidungen.

Wiederkehr leicht machen

Sorgen Sie dafür, dass wiederkehrende Nutzer genau da weitermachen können, wo sie aufgehört haben – mit direktem Zugriff auf gespeicherte Konfigurationen.

Feinschliff

Wir haben verschiedene Versionen der Modell-Übersicht gestaltet und iterativ getestet. Das User-Feedback hat uns gezeigt, welche Infos wirklich zählen und was wegfallen kann. Das Ergebnis: ein klar strukturiertes, konsequent nutzerzentriertes UX/UI-Design.

Übergabe

Für einen reibungslosen Übergang vom Design zur Entwicklung habe ich alles direkt in Figma dokumentiert u2013 inklusive Kommentaren und klaren Anmerkungen zu Funktionen und Layouts. Zudem wurden alle Assets in einer separaten Handoff-Datei organisiert und direkt in den Jira-Tickets verlinkt. So konnte das Entwickler-Team sofort durchstarten.

Mit visuellen Status-Markern in Figma habe ich jederzeit gezeigt, welche Bereiche final bereit für die Devs waren und woran noch gearbeitet wurde. Das hielt das Team immer up-to-date und verhinderte Missverständnisse.

Orientierung schaffen

Damit Ihre Nutzer Modelle mühelos vergleichen können, haben wir die Modellübersicht neu gestaltet: Ein klares Card-Layout zeigt wichtigste Daten und Preise auf einen Blick. Jede Card liefert sofort genug Kontext für die richtige Entscheidung – ganz ohne Extraklicks.

Prägnante „Konfigurieren“-Buttons weisen intuitiv den Weg. Wiederkehrende Nutzer steigen über die Option „Gespeicherte Konfiguration laden“ direkt wieder ein – das sorgt für nahtlose Kontinuität und eine persönliche Customer Journey.

Für mehr Interaktion und Entdeckerfreude sorgt ein smarter Hover-Effekt: Bewegt man den Cursor über das Fahrzeugbild, rotiert es elegant und zeigt neue Perspektiven. Diese feine Micro-Interaction macht das Stöbern lebendig und erleichtert die visuelle Entscheidung.

Eine clevere visuelle Hierarchie und großzügiges Spacing reduzieren die kognitive Last. So wählen Ihre Kunden ihr Modell schneller, einfacher und mit Freude aus.

Klarheit und Orientierung für Ihr passendes Modell.

Die aktualisierte Modellübersicht der 911er-Reihe macht den Vergleich jetzt noch einfacher: Detaillierte Cards zeigen Leistungswerte und Preise auf einen Blick. Ein klares Layout sorgt für schnelle Orientierung, während visuelle Filter eine intuitive Sortierung nach Variante, Jahr oder Getriebe ermöglichen.

Für eine sichere Entscheidung rufen Sie technische Daten direkt über die Modell-Card auf oder starten den direkten Vergleich. So finden sowohl Neukunden als auch treue Porsche-Fans mühelos das passende Modell.

Zusammen mit den rotierenden Fahrzeug-Vorschauen beim Hovern wird aus einer ehemals unübersichtlichen Liste ein interaktives Tool, das Lust auf Entdeckungen macht.

Echter Hebel

Höhere Abschlussquote durch bessere Orientierung

Die verbesserte Übersicht und Vergleichbarkeit helfen Nutzer*innen, schnellere und sicherere Entscheidungen zu treffen. Das reduziert Absprünge und steigert die Zahl abgeschlossener Konfigurationen.

Stärkere Markenwahrnehmung

Das cleane, hochwertige Interface spiegelt die Premium- Markenwerte von Porsche wider. Es sorgt für eine digitale Experience, die perfekt zur Qualität der Fahrzeuge passt.

Höhere Kundenbindung & wiederkehrende Besuche

Features wie gespeicherte Konfigurationen und gezielte Filter für Modellvarianten stärken das Engagement. Das erhöht die Wahrscheinlichkeit für wiederkehrende Besuche und sichert langfristiges Conversion-Potenzial.

Höhere Abschlussquote durch bessere Orientierung

Stärkere Markenwahrnehmung

Das cleane, hochwertige Interface spiegelt die Premium- Markenwerte von Porsche wider. Es sorgt für eine digitale Experience, die perfekt zur Qualität der Fahrzeuge passt.

Höhere Kundenbindung & wiederkehrende Besuche

Mehr Projekte

Voicery

Webdesign und Umsetzung für Voicery · 2026. Für dieses spezialisierte KI-Voice-Produkt brauchte es eine cleane, moderne und conversion-starke UX/UI. Technisch anspruchsvoll, um sofortige Glaubwürdigkeit zu vermitteln. Gleichzeitig einfach gehalten, damit der Kernnutzen für jeden User sofort greifbar ist.

Axonex AI

Ein umfassendes Figma-zu-Framer-Projekt für Axonex AI im Jahr 2026. Als visionäres KI-Unternehmen brauchten sie eine makellose Umsetzung ihres komplexen Webdesigns. Entstanden ist eine voll animierte, responsive Website. Absolut originalgetreu, blitzschnell und flüssig auf jedem Device.