CityTransfromer HMI – 2021

Projektübersicht

Im Jahr 2021 habe ich am UX/UI-Design und Front-End-Development für das innovative Fahrzeugprojekt City-Transformer mitgewirkt. Dieses Projekt wurde von einem israelischen Start-up ins Leben gerufen, das einen kompakten Elektro-Kleinstwagen entwickelt hat. Der City-Transformer zeichnet sich durch seine einzigartige Fähigkeit aus, die Breite auf einen Meter zu reduzieren und somit auch auf Motorrad-Parkplätzen Platz zu finden. Er bietet Platz für zwei Personen hintereinander und hat eine Reichweite von rund 180 Kilometern.

Projekthighlights

Im Rahmen dieses Projekts habe ich den kompletten Designprozess durchlaufen, von der Ideenfindung und Mock-Up-Erstellung bis hin zum Prototypen und zur finalen programmierten Umsetzung im Fahrzeug. Ein besonderes Merkmal des City-Transformers sind die drei Displays bzw. Interaktionsmöglichkeiten, die ich entwickelt habe:

Entwicklungsprozess

Der Entwicklungsprozess umfasste sechs Monate intensiver Arbeit. Ich durchlief alle Phasen des Designprozesses, von der Entwurfs- und Mock-Up-Phase bis hin zum Prototyping und zur finalen Implementierung im Fahrzeug, als eigenständiges Programm. Die Herausforderungen dieses Projekts lagen in der Integration verschiedener Technologien und der Sicherstellung einer nahtlosen Benutzererfahrung. 

https://www.youtube.com/watch?v=eXE74_cJUVw

PHUD (Primary Heads-Up Display)

• Anzeigen: Fahrgeschwindigkeit, Kilometerstand, Uhrzeit, Temperatur, Fahrzeugzustand, Icons und Warnsymbole, Energiestand des EV
• Design: Klar und übersichtlich mit intuitiven Symbolen und Warnhinweisen
• Anzeigenmodi:
  • Verkleinerter Modus:
    • Farbe: Blau
    • Geschwindigkeit: Maximal 30 km/h
    • Beschreibung: Das PHUD zeigt ein emotional ansprechendes, minimalistisches Design, ähnlich eines Reflexionsspiegels, und verwendet ein blaues Farbschema, wenn das Fahrzeug in seiner schmalen Konfiguration ist.
  • Verbreiterter Modus:
    • Farbe: Gelbgrün
    • Geschwindigkeit: Maximal 95 km/h
    • Beschreibung: Nach der Spurverbreiterung durch einen Knopfdruck am Lenkrad wechselt das Farbschema zu einem gelbgrünen Ton, und das Fahrzeug zeigt seine volle Leistung.

Infotainment-Display

• Form: Hochkant-Tablet
• Funktionen:
  • Musik-Player: Integration von Spotify
  • Webbrowser: Zugang zu Internetanwendungen
  • App-Integration
  • Klimakontrolle: Anpassung der Innenraumtemperatur
  • Navigationssystem: Designte eigene Anzeige auf Open Source Basis
  • Rück Kamera mit distance Anzeige.
  • Einstellungen: Bluetooth, WLAN, Bildschirmhelligkeit, Lautstärke
• Design: Modern und benutzerfreundlich mit intuitiver Navigation

Herausforderung: Unterbringung vieler Informationen, übersichtlich auf kleinem Raum. Funktions- und Animations Development, knappes Zeit Management

Smartphone-App

• Funktionen:
  • NFC-Feld: Öffnen und Schließen des Fahrzeugs an der Frontscheibe
  • Ladeklappe: Öffnen und Schließen
  • Laden des Fahrzeugs: Überwachung des Batteriestands
• Design: Einfach und intuitiv, ähnlich wie bei der App für den ACM City One

Fahrzeugbeschreibung

Der City-Transformer wurde als Lösung für die Parkplatznot in städtischen Gebieten entwickelt. Mit seiner verstellbaren Spurbreite kann er sich an enge Gassen und Parklücken anpassen, ohne auf Komfort zu verzichten. Die klimatisierte Kabine bietet Platz für zwei Passagiere und sorgt für eine angenehme Fahrt. Der City-Transformer kombiniert umweltfreundlichen Elektroantrieb mit innovativem Design und hat mehrere Auszeichnungen erhalten, darunter den

German Design Award,

den German Innovation Award Gold,

den European Product Design Award,

den Core 77 Design Award und den

ABC Best of the Best 22.

Grafische Gestaltung

Alle grafischen Elemente der Displayanzeigen, einschließlich Icons und visueller Darstellungen, wurden von mir gestaltet. Das Ziel war es, ein einheitliches und ansprechendes Erscheinungsbild zu schaffen, das die Benutzerfreundlichkeit unterstützt und die Markenidentität des City-Transformers stärkt.

Benutzeroberfläche

Die Benutzeroberfläche wurde so gestaltet, dass sie eine einfache und intuitive Bedienung ermöglicht. Dies umfasst sowohl das PHUD und das Infotainment-Display als auch die Smartphone-App. Alle wichtigen Funktionen sind leicht zugänglich und klar strukturiert, um den Nutzern eine stressfreie und effiziente Handhabung zu ermöglichen.

Mit diesem Projekt habe ich eine innovative und benutzerfreundliche Lösung für die städtische Mobilität geschaffen, die den hohen Anforderungen an Design, Funktionalität und Praktikabilität gerecht wird.

https://t-egner.de/wp-content/uploads/2024/06/CTPHUD_1.mp4