UI/UX Design für Saas
Automotive Telemetry & Formula Engine
Replacing complex Excel workflows with a node-based configuration editor inspired by 3D node graphs.
Aufgabe
Ein führendes Automotive-Entwicklungsteam nutzte für die Erstellung komplexer Berechnungsformeln zur Fahrzeug-Telemetrie ein historisch gewachsenes, hochkomplexes Excel-System. Die Validierung und Konfiguration von Signalen (wie Spannung oder Stromstärken) erfolgte in unübersichtlichen Tabellenstrukturen. Dies führte zu immens langen Einarbeitungszeiten für neue Ingenieure. Zudem traten bei der manuellen Formeleingabe häufig Fehler auf, die später im Order-Management-System zu Fehlbuchungen bei Testfahrzeugen führten.
Task
Als Lead UX/UI Designer lag meine Aufgabe darin, dieses Excel-Chaos in eine moderne, skalierbare und fehlerresistente Web-Anwendung zu überführen. Das Ziel war ein intuitives Interface, das:
Die Einarbeitungszeit neuer Fachanwender drastisch reduziert.
Fehleingaben bei mathematischen Formeln und Signalverknüpfungen systematisch verhindert.
Den Konfigurationsprozess ohne Medienbruch direkt an das Order-Management für Testfahrzeuge anbindet.
Vorgehen
Cross-Domain UX Ansatz
Ich erkannte, dass klassische Formular-UIs der Komplexität nicht gerecht wurden. Inspiriert von 3D-Software wie Blender führte ich ein node-basiertes Interaktionsmodell ein, das komplexe Signalströme (BMS_Spannung, Strom) und mathematische Operatoren (Compute, Trigger) als visuelle Datenfluss-Logik abbildet.
Smart Method Library & Guardrails:
Entwicklung eines kontextsensitiven Flyout-Menüs mit Suchfunktion für vordefinierte Berechnungsmethoden. Ergänzend implementierte ich typisierte Validation-Rules für Verbindungslinien (Bezier Edges) und Node-Parameter, um ungültige Verknüpfungen direkt auf dem Canvas zu unterbinden.
Design-System-Infrastruktur:
Erstellung einer modularen Komponentensprache in Figma auf Basis dynamischer Variables und Auto-Layouts für konsistentes Prototyping und effizienten Frontend-Handoff.
Closed-Loop Integration:
Konzeption einer nahtlosen Schnittstelle, die fertig konfigurierte Formeln automatisch mit dem Order-Dashboard synchronisiert, inklusive visueller Status-Feedbacks (TESTING, REJECTED).
Ergebnis
Massiver Effizienzgewinn:
Die Einarbeitungszeit für neue Ingenieure wurde von mehreren Wochen auf wenige Tage reduziert.
Null-Fehler-Toleranz:
Durch integrierte Guardrails im Node-Editor wurden Berechnungs- und Eingabefehler bei Telemetrie-Formeln nahezu eliminiert.
Durchgängiger Prozess:
Die direkte Anbindung an den Order-Prozess verhinderte manuelle Übertragungsfehler und beschleunigte die Einbuchung von Versuchsreihen auf Prüffahrzeugen erheblich.
High-Precision
Hohe Modell-Varianz
Omnichannel
Konsistente Schrittführung
Live-Calculation
Transparente B2B/B2C-Preise
Dependency Logic
Workflow Optimization
Technical UI Design
Enterprise UI