Hero-Bild der Masterarbeit Frontend Showcase mit Dashboard auf großem Monitor in Büroumgebung.
Hero-Bild der Masterarbeit Frontend Showcase mit Dashboard auf großem Monitor in Büroumgebung.

/

Frontend Showcase

/

Frontend Showcase

Frontend Showcase

Frontend Showcase

Informationsvisualisierung für autonome Fahrzeugflotten

Informationsvisualisierung für autonome Fahrzeugflotten

Rolle

UX/UI-Designer

Tools

Figma, Jira

Fokus

Informationsvisualisierung

Jahr

2024

Über das Projekt

Ziel der Masterarbeit war die Entwicklung und Evaluierung eines UI/UX-Konzepts für ein Frontend-Showcase, das komplexe Fahrzeug- und Flottendaten verständlich visualisiert.

Im Fokus standen Informationsvisualisierungkognitive Entlastung und interaktive Dashboards, um große Datenmengen aus den Systemen MoSyLive View und BeIntelli zugänglich zu machen.

Das Ergebnis ist ein interaktiver Prototyp, der die Leistungsfähigkeit autonomer Flotten in Echtzeit erfahrbar macht.

Bestehendes Dashboard-System mit komplexen Echtzeitdaten und überladenen Diagrammen, die schwer zu interpretieren sind.
Bestehendes Dashboard-System mit komplexen Echtzeitdaten und überladenen Diagrammen, die schwer zu interpretieren sind.

Herausforderung

Vorhandene Systeme wie MoSy oder Live View waren informationsreich, aber visuell überladen.
Die größte Herausforderung war, komplexe Echtzeitdaten klar und intuitiv darzustellen, ohne den Nutzer zu überfordern.
Ziel war es, ein Dashboard zu gestalten, das visuell ansprechendfunktional und effizient navigierbar ist.

Designprozess

Der Entwicklungsprozess folgte einem iterativen UX-Vorgehen mit Fokus auf User-Centered Design.

  • Low-Fidelity-Prototyping zur Layoutstruktur

  • High-Fidelity-Prototyping in Figma mit interaktiven Karten und Filterfunktionen

  • Nutzertests und Feedback-Schleifen zur kontinuierlichen Optimierung

Low-Fidelity-Prototyp des neuen Dashboards mit Tabellenstruktur für Fahrzeugdaten.
Low-Fidelity-Prototyp des neuen Dashboards mit Tabellenstruktur für Fahrzeugdaten.
High-Fidelity-Prototyp des Frontend Showcase Dashboards mit interaktiver Karte und Filterfunktionen.
High-Fidelity-Prototyp des Frontend Showcase Dashboards mit interaktiver Karte und Filterfunktionen.
Finales Dashboard des Frontend Showcase mit Leistungsdaten, Fehlermeldungen und Aktivitätsdiagramm.
Finales Dashboard des Frontend Showcase mit Leistungsdaten, Fehlermeldungen und Aktivitätsdiagramm.

Informationsvisualisierung

Ein zentrales Ziel war die Reduktion der kognitiven Belastung.
Farbcodierte Statusanzeigen, interaktive Filter und Diagramme (z. B. Anomaly Timeline) halfen, kritische Informationen hervorzuheben.
Dadurch konnten Benutzer schneller Anomalien erkennen und Entscheidungen treffen.

Evaluation

Zur Bewertung der Benutzerfreundlichkeit wurden die Methoden UEQ+ und NASA TLX eingesetzt.
Die Ergebnisse zeigten eine hohe Effizienz und geringe mentale Belastung.
Die Benutzer empfanden die Visualisierungen als verständlich, ansprechend und hilfreich für ihre Arbeit.

Bewertungsdiagramme zur Benutzerfreundlichkeit: Balkendiagramm der Skala Mittelwerte
Bewertungsdiagramme zur Benutzerfreundlichkeit: Balkendiagramm der Skala Mittelwerte
Bewertungsdiagramme zur Benutzerfreundlichkeit: ASA TLX Ergebnisse zur mentalen Belastung.
Bewertungsdiagramme zur Benutzerfreundlichkeit: ASA TLX Ergebnisse zur mentalen Belastung.
Auswertungsgrafiken mit Balkendiagrammen zu Skala Mittelwerten und Wichtigkeit der Faktoren aus der UX-Evaluation.
Auswertungsgrafiken mit Balkendiagrammen zu Skala Mittelwerten und Wichtigkeit der Faktoren aus der UX-Evaluation.
Auswertungsgrafiken mit Balkendiagrammen zu Skala Mittelwerten und Wichtigkeit der Faktoren aus der UX-Evaluation.
Auswertungsgrafiken mit Balkendiagrammen zu Skala Mittelwerten und Wichtigkeit der Faktoren aus der UX-Evaluation.

Ergebnisse & Erkenntnisse

Die Arbeit belegt, dass gute Informationsvisualisierung UX signifikant verbessert.

  • Klare visuelle Kodierung reduziert Frustration

  • Interaktive Elemente erhöhen Kontrolle und Effizienz

  • Ein konsistentes Farbsystem steigert Orientierung und Vertrauen

Ausblick

Zukünftige Entwicklungen könnten den Einsatz von Machine Learning und Predictive Analytics integrieren, um Muster automatisch zu erkennen und die Entscheidungsfindung weiter zu unterstützen.

Bereit

für das

nächste Kapitel

Ich bin offen für neue Herausforderungen, die mich wachsen lassen und meine Arbeit weiterentwickeln.
Ständig lernend, ständig besser werdend.
Wenn du jemanden suchst, der Design-Sensibilität mit technischer Präzision verbindet –
ich freue mich, von dir zu hören.

UX/UI Designer Arne Schüler arbeitet an seinem Schreibtisch an einem Designprojekt auf zwei Monitoren.

Bereit

für das

nächste Kapitel

Ich bin offen für neue Herausforderungen, die mich wachsen lassen und meine Arbeit weiterentwickeln.
Ständig lernend, ständig besser werdend.
Wenn du jemanden suchst, der Design-Sensibilität mit technischer Präzision verbindet –
ich freue mich, von dir zu hören.

UX/UI Designer Arne Schüler arbeitet an seinem Schreibtisch an einem Designprojekt auf zwei Monitoren.

© 2025 Arne Schüler. All rights reserved.