2021Automotive HMI · UX/UI · Front-End
City Transformer
Ein wandelbares Elektrofahrzeug – übersetzt in eine klare Multi-Display-Experience
Für das israelische Mobilitäts-Start-up entwickelte ich in sechs Monaten die UX und das visuelle System für Fahrerdisplay, Infotainment und Smartphone-App – vom Research bis zur programmierten Oberfläche im fahrenden Prototyp.
Projekt ansehen
- Meine Rolle
- UX/UI Design · Prototyping · Front-End
- Ergebnis
- PHUD · Infotainment · Fahrzeug-App
- Zeitrahmen
- 6 Monate bis zur Fahrzeugintegration
- Kernidee
- Ein System für zwei Fahrzeugbreiten
Das Fahrzeug verändert seine Breite. Die Bedienlogik bleibt vertraut.
Der City Transformer fährt im schmalen City Mode besonders platzsparend und wechselt für höhere Fahrstabilität in eine breitere Konfiguration. Research, Nutzungsszenarien und User Flows klärten, wie dieser ungewöhnliche Zustandswechsel über App, Fahrerdisplay und Infotainment sofort verständlich wird.
Eine Journey über Smartphone und Fahrzeug
Jedes Interface übernimmt eine eindeutige Aufgabe. Gemeinsame Zustände, Begriffe und Farbcodes verbinden die Kontaktpunkte zu einem System, das vor dem Einsteigen beginnt und nach der Fahrt weiterführt.
Fahrzeug-App
Status & Remote-Funktionen
NFC-Zugang
Öffnen & Fahrbereitschaft
Fahrerdisplay
PHUD · Fahrdaten im Blick
Infotainment
Navigation & Komfort
Vorbereiten
Reichweite prüfen
Einsteigen
Per NFC öffnen
Orientieren
Fahrstatus erfassen
Transformieren
Fahrmodus erkennen
Abstellen
Parken & laden
Schmal & urban
Blau kennzeichnet die kompakte Fahrzeugbreite. Informationspositionen und Bedienmuster bleiben unverändert.
Breit & fahrstabil
Gelbgrün und eine animierte Silhouette bestätigen den Wechsel in die breite Fahrkonfiguration.
Vom ersten Wireframe zum integrierten Prototyp
Die Oberfläche entstand in mehreren klaren Iterationen. Frühe Low-Fidelity-Entwürfe prüften Informationshierarchie und Funktionsumfang; darauf folgten visuelle Richtungen für Fahrerdisplay und Infotainment, die schließlich als animiertes HMI auf der Fahrzeughardware umgesetzt wurden.
Mein Beitrag: vom ersten Flow bis zum integrierten Prototyp
Ich verantwortete den vollständigen UX/UI-Prozess und übersetzte ihn anschließend selbst in eine lauffähige Front-End-Anwendung. Alle Displaygrafiken, Icons, Animationen und visuellen Zustände entstanden als gemeinsames Designsystem für PHUD, Hochformat-Infotainment und App.
Der Designprozess – kompakt und nachvollziehbar
Discover
Nutzungskontexte, Fahrzeuglogik und mentale Modelle für den Breitenwechsel verstehen.
Define
Journey, User Flows und Informationsarchitektur über App, PHUD und Infotainment ordnen.
Design & Test
Wireframes, Moodboards, UI-Varianten und animierte Zustände iterativ erproben.
Build & Integrate
Oberflächen programmieren, auf Embedded Hardware testen und im Fahrzeug optimieren.
Interaktion statt statischer Screens
Vom Moduswechsel bis zur Navigation
Drei Interfaces, klar verteilte Aufgaben
Primary Display
Geschwindigkeit, Energie, Warnungen und Fahrzeugzustand bleiben im direkten Sichtfeld und reagieren klar auf den Moduswechsel.
Infotainment
Navigation, Musik, Klima, Rückfahrkamera, Konnektivität und Einstellungen sind für das vertikale Touchdisplay organisiert.
Smartphone-App
NFC-Zugang, Batteriestatus und Ladeklappensteuerung verlängern die Experience über das Cockpit hinaus.
Visuelles System
Ein gemeinsames Raster, eigene Icons, Animationen und Farbsemantik verbinden alle drei Oberflächen.
Ein Fahrzeugkonzept mit internationaler Anerkennung
Die Auszeichnungen würdigen den City Transformer als Gesamtfahrzeug. Mein Beitrag innerhalb des Projekts war das UX/UI-System aus PHUD, Infotainment und App sowie dessen Front-End-Umsetzung und Integration.
German Design Award
Gold in der Kategorie Passenger Vehicles für das wandelbare, urbane Fahrzeugkonzept.
Quelle ansehenGerman Innovation Award
Gold in Automotive Technologies für die innovative Kombination aus Kompaktheit und Fahrstabilität.
Quelle ansehenABC Award
Höchste Auszeichnung in der Kategorie Transportation.
Quelle ansehenEuropean Product Design Award
Auszeichnung des CT-1 als Top Design im Bereich Transportation.
Quelle ansehenCore77 Design Award
Internationale Anerkennung für das ganzheitliche Mobilitäts- und Produktdesign.
Quelle ansehenGreen Product Award
Prämiert als zukunftsweisendes Produkt für nachhaltige urbane Mobilität.
Quelle ansehenErgebnis
Senior UX/UI bedeutet für mich: Verantwortung bis ins Fahrzeug
Das Ergebnis war kein isolierter Screenentwurf, sondern eine konsistente Experience über drei Geräteklassen. Ich verband Research, Informationsarchitektur und visuelles Design mit eigener Front-End-Entwicklung und Fahrzeugtests – bis zum funktionierenden Multi-Display-Prototyp.