Deutsche Bahn
UI/UX Dashboard Design
Über das CRM System von BSI werden die Fahrzeugflotten der Deutschen Bahn Connect verwaltet. Das System beinhaltet führend alle Informationen zu Fahrzeugen und Fahrern. Durch die Verwendung eines Dashboards sollen Berichte visualisiert werden.
Hierbei ist das CRM die zentrale Datenplattform, in welchem alle Informationen zum Fahrzeuglebenszyklus gespeichert werden.
Problem
Übersicht aller Berichte auf einen Blick
Vielzahl von Schnittstellen und Quellen
Unübersichtliche Darstellung von Informationen
Datenkonsistenz und -qualität
Allgemeine Ziele
Transparenz
Verständlichkeit von komplexen Statistiken
Einfache Visualisierung von Daten/Datensätzen
Konsistente Visualisierung
effiziente Überwachung des Fahrzeuglebenszyklus sowie schnelle Reaktion auf potenzielle Probleme
einfache Übermittlung von Informationen
Monitoring und Überwachung
Aufgaben
Visualisierung von Berichten
Entwurf eines Dashboards
Erstellung von User Flows
Aufbau/Anpassung von UI-Komponenten
Erstellung eines Prototypens in Sketch
Prüfung und Abstimmung von Anforderungen
Dokumentation der einzelnen Refinements in Confluence
DesignZiele
Benutzerakzeptanz
Barrierefreiheit
Informationsarchitektur: Klar strukturierte und leicht auffindbare Inhalte
Responsive Design: Optimale Darstellung auf Desktop, Tablet und mobilen Geräten
Integration/Anpassung bestehender UI-Komponenten
Benutzerfreundlichkeit & Einfachheit: Ein intuitives und klares Interface, das leicht verständlich ist und eine schnelle Navigation ermöglicht
Designprozess
Designprozess
Cockpit
Validierung/Priorisierung von Werten
zentraler Überblick unterschiedlicher Berichte
Weiterleitung zu detaillierten Ansichten/Berichten
In Zukunft geplant:
Farbliche Kennzeichnung/Statusanzeige von Werten > Vergleichbarkeit, Aufforderung zur Aktion vom Nutzer
Ampelsystem/Kennzeichnung durch Icons > Barrierefreiheit
Die Deutsche Bahn plant zu prüfen, ob eine automatisierte Codierung und Bewertung von Zahlen integriert werden kann, um eine farbliche Codierung oder die Verwendung von Icons zu ermöglichen
Priorisierung > Handlungsaufforderung Nutzer
Weiterleitung zu ausführlichen Berichten
Einfache Darstellung von Information
Reduktion von komplexen Berichten
Individualisierbarkeit
Eine Personalisierung vom Dashboard kann durch die Verwendung vom Move-Icon und der damit verbundenen Verschiebung von Elementen stattfinden.
Dadurch kann der Nutzer Anzeigen priorisieren und das Dashboard Design individuell anpassen. Je nach Nutzergruppe und Berechtigungen werden gewisse Elemente ausgeblendet.
Skalierbarkeit
Ein 12-Grid-Layout passt sich im responsiven Design durch an verschiedene Bildschirmgrößen an. Das Grid-System teilt den Bildschirm in 12 gleichgroße Spalten auf, die kombiniert und durch Margins oder Padding voneinander getrennt werden können.
Vergleichbarkeit
Im Design spielt die Unterscheidung von Werten durch Symbole wie „+“, „-“, „>“, und „<“ eine zentrale Rolle, um wichtige Informationen auf einen Blick verständlich und übersichtlich darzustellen. Diese Symbole sind visuelle Indikatoren, die dem Benutzer helfen, Veränderungen, Trends oder Vergleiche schnell zu erkennen und zu interpretieren.
Key Results
NexT Steps MVP
qualitative/quantitative Usertestings
Abgleich mit Datenbank um Echtzeit-Aktualisierung zu ermöglichen
Analyse Feedback und mit Optimierung MVP
Ladezeitoptimierung