Deep DiveDigitalisierungMonitor + HandgerätNDA

Stationsanmeldung — von Papier zu digital, lückenlos nachvollziehbar.

Ziel: lückenlos nachvollziehen, wer welches Fahrzeug bearbeitet hat. Bisher lief das über eine Papierliste an der Station. Digital kamen komplexe Anmeldebedingungen dazu: Haupt- und Nebenarbeitsplätze, Anmeldung per Werksausweis oder Handgerät, Mehrtakter. Meine Aufgabe war, all das in ein kleines Anmeldefenster zu bringen, lesbar am Monitor und am Handgerät.

ProduktionsmonitorHandgerät (PDA)
Meine Rolle
UX Design:
Figma Komponente, Design System, Varianten, Erweiterungen, Zustände, Icon Design, Konzept
Team
Kunde, Fach- & Tech-PO, Scrum Master, Frontend, Backend, 2 UX
Oberflächen
Stationsmonitor (Touch, Handschuhe) + Handgerät
Status
Operativ
Kontext

Wer hat an welchem Fahrzeug gearbeitet? Bisher stand das auf Papier.

Die Zuordnung von Mitarbeitenden zu Fahrzeugen ist qualitäts- und sicherheitsrelevant und wird an ein zentrales Rückverfolgungssystem gemeldet. Vor der Digitalisierung lag dafür eine Liste an der Station.

Vorher

Papierliste an der Station

Zu Schichtbeginn eintragen, zu Schichtende austragen. Notiert wurden Startzeit sowie erstes und letztes bearbeitetes Fahrzeug.

Ziel

Durchgängig digital protokolliert

Anmelden per Werksausweis, Fahrzeuge automatisch verbuchen, Lücken sofort sichtbar machen, ohne den Takt zu unterbrechen.

Kernablauf

  1. Werksausweis scannenIdentifikation am Monitor oder per Handgerät
  2. Startfahrzeug wählenfrei wählbar aus der Fahrzeugliste
  3. Arbeitendas System zeigt die Produktionssicht
  4. Endfahrzeug wählenAbmeldung
  5. Automatisch verbuchtalle Fahrzeuge dazwischen werden zugeordnet
Design Challenge

Technische Abhängigkeit, wachsende Inhalte.

Nutzungskontext

Mehrmals pro Schicht, direkt am Bildschirm

Werker melden sich zu Schichtbeginn an und bei Pausen, Schichtwechsel und teils beim Arbeitsplatzwechsel ab und wieder an. Dafür gehen sie zum Bildschirm und melden sich direkt am Terminal an oder scannen mit dem Handgerät.

Fixer Raum

Anfangs frei, dann schnell fix

Einschränkungen durch:

  • Touch nur in der unteren Bildschirmhälfte
  • Handgerät: alles ohne Scrollen
  • Bis zu 3 Anmeldefenster nebeneinander (3-AP-Monitor)
Zwei Geräte

Monitor und Handgerät

Wie beide Geräte bei der Anmeldung zusammenspielen, war anfangs technisch offen. Wo möglich, sollte trotzdem ein gemeinsames Design entstehen statt eines pro Gerät.

Prozess & Rolle

Vom Team-Workshop zum abgenommenen System.

Die Stationsanmeldung war kein Einzelprojekt, sondern entstand im Team. Wichtig ist mir, klar zu trennen, was im Workshop entstand und was ich danach verantwortet habe.

  1. Entwicklung

    Technische Grundlagen klären

    Das Dev-Team klärte zuerst, welche Systeme und Geräte an der Anmeldung beteiligt sind.

  2. Gesamtes Team · Vor-Ort-Workshop

    Erstentwurf im jährlichen Team-Workshop

    Mit Kunde, Fach- und Tech-PO, Scrum Master, Frontend- und Backend-Entwicklung und zwei UX Designer:innen, in zwei parallelen Gruppen. Ein UX-Kollege erarbeitete mit einem Teil der Entwickler den ersten Entwurf; ich war in der zweiten Gruppe an einem anderen Thema. Als Team-Prinzip hielt der Workshop fest: visuelle Hinweise statt Popups.

  3. Ich

    Übernahme und Überführung ins Design System

    Nach dem Workshop habe ich den Entwurf übernommen, weil ich das Projekt aktiv betreue. Ich habe ihn an unsere Design-Guidelines und die eigene Komponentenbibliothek angepasst und bis zur Abnahme gebracht.

  4. Ich

    Drei Arbeitsplatz-Varianten

    Aus dem abgenommenen Screen habe ich Varianten für Haupt- und Nebenarbeitsplätze abgeleitet, weil sich die Anmeldewege je Arbeitsplatztyp unterscheiden.

  5. Ich

    Erweiterungen unter Platzmangel

    Neue übergreifende Anforderungen (Mehrtakter, lange Arbeitsplatznamen, QR-Anmeldung, Abmeldelogik) habe ich in das bestehende Fenster eingepasst, ohne es zu vergrößern.

Teammeine Verantwortung
Lösung

Ein Anmeldefenster, auf den Pixel ausbalanciert.

Die Screens unten sind synthetische Rekonstruktionen des finalen Designs. Sie zeigen Struktur und Entscheidungen, nicht das Originalprodukt.

1
Arbeitsplatz Vorderachse links
mit Leitungssatz
abgemeldet
52 ↻2

anmelden zu
4
3
P-1037
P-1038
P-1039
Anmelden

Synthetische Rekonstruktion · Nebenarbeitsplatz, Mehrtakter, nicht angemeldet · Nummern fiktiv

  1. Arbeitsplatzname, mehrzeilig neuLange Namen umbrechen statt kürzen, damit der Arbeitsplatz eindeutig bleibt.
  2. Mehrtakter-Indikator neuZahl + schlichtes Icon statt aufwendiger Grafik. Eckigere Rundung, damit er nicht mit einem Chip verwechselt wird.
  3. Fahrzeugliste, farbiger IndikatorEine durchgängige Liste statt einzelner Kästen. Bearbeitungsstatus über farbige Kante + Icon, ohne Text: gleiche Zeilenhöhe, ruhige Ausrichtung, kein Springen der Augen.
  4. Chevron-NavigationSchlichte Chevron-Icons statt gefüllter Pfeilform: selbsterklärend, weniger ablenkend, harmonischer im Fenster.
  5. QR-Code für die Handgerät-Anmeldung neuKlein im Kopf, groß, wenn Scannen Pflicht ist. Nicht synchronisierte Daten vom Handgerät werden ausgeblendet.

Drei Arbeitsplätze, drei Anmeldewege auf einem Monitor

Bis zu drei Anmeldefenster stehen nebeneinander auf dem Produktionsmonitor. Jede Station hat einen Hauptarbeitsplatz, der angemeldet sein muss, bevor das System in die Produktionssicht wechselt. Die Fenster teilen Struktur und Komponenten und unterscheiden sich nur dort, wo Anmeldeweg und Zustand es verlangen.

  1. Hauptarbeitsplatz, Anmeldung per Handgerät: Der Werker scannt den QR-Code mit dem PDA.
  2. Hauptarbeitsplatz mit Ausweisleser, angemeldet: ein Fahrzeug aus der vorherigen Anmeldung verbucht (grün), eines in aktueller Bearbeitung, wenn zum blau markierten Fahrzeug abgemeldet wird.
  3. Nebenarbeitsplatz als Mehrtakter, nicht angemeldet: eine Lücke (gelb) zwischen dem zuletzt bearbeiteten und dem gewählten Anmeldefahrzeug (blau).

Synthetische Rekonstruktion · Monitorrahmen, Merkmale und Nummern fiktiv

Abmeldung: eine Zeile mehr und sechs Zustände

Für die Abmeldung brauchte das Fenster eine zusätzliche Zeile: Sie zeigt, bei welchem Fahrzeug sich die Person ursprünglich angemeldet hat. In Ausbaustufen kamen weitere Zustände in der Fahrzeugliste dazu.

Hauptarbeitsplatz
Arbeitsplatz Vorderachse links
mit Leitungssatz
MA-••••
angemeldet zu
P-1036

abmelden nach
P-1037
P-1038
P-1039
Abmelden

Synthetische Rekonstruktion · Beispiel: Abmeldung mit Lücke

  • P-1041
    OffenNoch nicht bearbeitet, wählbar
  • P-1037
    VerbuchtGrüner Rahmen + Häkchen-Icon: aus einer vorherigen Anmeldung verbucht
  • P-1039
    Aktuelle BearbeitungBlauer Rahmen + Pfeil-Icon: wird mit dieser Abmeldung verbucht
  • P-1039
    AusgewähltHellblaue Fläche + Kante, eindeutige Rückmeldung auf den Tap
  • P-1035
    Nicht auswählbarFeld ausgegraut, Status-Icon behält seine Farbe; verhindert Fehlbuchungen (Abmelden an Fahrzeug vor Startfahrzeug)
  • P-1038
    Übersprungen (Lücke)Gelb, sichtbar aber nicht störend, für bewusstes An- oder Abmelden mit Lücke
Exploration

Vom groben Ablauf zum finalen Fenster.

Prozess, Explorationen, Alternativen und verworfene Richtungen auf dem Weg zum finalen Fenster. Alle Abbildungen sind synthetische Rekonstruktionen mit fiktiven Daten.

Ausgangspunkt

Grober initialer An- und Abmeldeprozess

Am Anfang stand ein grober Ablauf: wann und wo sich Werker anmelden, welcher Weg (Terminal oder Handgerät) greift und was bei der Abmeldung automatisch passiert.

Anmeldung
Schichtbeginn
Zum Bildschirm an der Station
Ausweis am Terminal
Code mit PDA scannen
Startfahrzeug wählen
Anmelden
Alle Arbeitsplätze angemeldet?
Produktionssicht
Abmeldung
Pause · Schichtwechsel
Arbeitsplatzwechsel
Zum Bildschirm / PDA
Endfahrzeug wählen
Lücke?
Abmelden
Fahrzeuge dazwischen automatisch verbucht
Verworfen

Horizontale Fahrzeugauswahl

Fahrzeuge nebeneinander als Karten mit seitlichen Pfeilen.

Arbeitsplatz Vorderachse linksMA-••••
◀
P-1039bearbeitet
P-1040bearbeitet
P-1041bearbeitet
▶
Login
Alternativen

Navigation und Auswahl

Navigationspfeile als helle Leiste, als dunkle Leiste oder als reine Pfeile; Auswahl als hellblaue Fläche mit Kante, auch für die Abmeldung.

Leiste hell
Arbeitsplatz Vorderachse
links
MA-••••
▲
P-1039
P-1040
P-1041
▼
Login
Leiste dunkel
Arbeitsplatz Vorderachse
links
MA-••••
▲
P-1039
P-1040
P-1041
▼
Login
Nur Pfeile
Arbeitsplatz Vorderachse
links
MA-••••
▲
P-1039
P-1040
P-1041
▼
Login
Abmeldung
Arbeitsplatz Vorderachse
links
MA-••••
angemeldet zu
P-1036

abmelden nach
▲
P-1039
P-1040
P-1041
▼
Logout
Exploration

Mehrtakter-Indikator: wohin damit?

Der Mehrtakter-Indikator kam nachträglich dazu und brauchte einen Platz im bereits vollen Fenster. Ich habe acht Positionen durchgespielt: als Reiter außerhalb des Fensters, in einer Statusleiste, neben Titel, Status oder QR-Code.

Reiter oben links
2 ↻
Arbeitsplatz Vorderachse
links
abgemeldet
anmelden zu
▲
P-1039
P-1040
P-1041
▼
→ Login
Leiste mit Status
2 ↻abgemeldet
Arbeitsplatz Vorderachse
links
anmelden zu
▲
P-1039
P-1040
P-1041
▼
→ Login
Vor dem Status
2 ↻abgemeldet
Arbeitsplatz Vorderachse
links
anmelden zu
▲
P-1039
P-1040
P-1041
▼
→ Login
Neben dem Titel
Arbeitsplatz Vorder…abgemeldet
2 ↻
anmelden zu
▲
P-1039
P-1040
P-1041
▼
→ Login
Über dem QR-Code
Arbeitsplatz Vorderachse
links
abgemeldet
2 ↻
anmelden zu
▲
P-1039
P-1040
P-1041
▼
→ Login
Hinter dem Status
Arbeitsplatz Vorderachse
links
abgemeldet 2 ↻
anmelden zu
▲
P-1039
P-1040
P-1041
▼
→ Login
Reiter oben rechts
2 ↻
Arbeitsplatz Vorderachse
links
abgemeldet
anmelden zu
▲
P-1039
P-1040
P-1041
▼
→ Login
Eigene Zeile, nur PDA
Arbeitsplatz Vorderachse links
2 ↻
Hauptarbeitsplatzmit PDA anmelden
☰ App
‹ P-1040 ›
2 ↻
Arbeitsplatz mit sehr langem
Namen vorne rechts
MA-••••
angemeldet zuabmelden nachP-1036
P-1039
P-1040
Anmelden

Auf dem Handgerät zeigte sich ein Platzproblem: Bei langen Arbeitsplatznamen überlagerten sich Beschriftungen und Felder (rot markiert).

Exploration

Mehrtakter-Symbol: von der Illustration zur Zahl

Für den Indikator habe ich viele Symbolideen durchgespielt: Person am Band, Stufen, Fahrzeug mit Stationen, Tausch- und Kreispfeile, Positionsbalken. Ergebnis: Die detaillierten Symbole brachten keinen Mehrwert. Die Taktzahl mit einem schlichten Icon trägt die Information allein.

Person + Band + Kreislauf
Stufen + Pfeil
Person + Fahrzeug + Stationen
2Person + Tausch + Zahl
3Kreispfeil + Zahl
Takt 2„Takt 2“ + Tauschpfeile
Position als Balken
2 ↻Zahl + schlichtes Icon

Synthetische Rekonstruktionen · keine Originaldaten · Arbeitsplatznamen, Nummern und Codes fiktiv

Entscheidungen & Trade-offs

Was ich behalten, verworfen und wo ich Kompromisse gemacht habe.

Status über Farbe + Icon, ohne Text

Behalten
Alternative
Textlabel je Fahrzeugzeile
Warum
Spart Platz, hält Zeilen gleich hoch und ausgerichtet, die Augen müssen nicht springen. Weniger kognitive Last beim schnellen Blick.
Trade-off
Die Bedeutung der Icon-Farben muss gelernt werden. Dafür bleibt die Liste ruhig: ein Icon, eine Zeilenhöhe, eine Ausrichtung.

Mehrtakter als Zahl + Icon

Behalten
Alternative
Aufwendiges, eigenes Mehrtakter-Icon
Warum
Ein komplexes Icon bringt keinen Mehrwert. Die Taktzahl ist die eigentliche Information. Eckigere Rundung grenzt das Element klar von Chips ab.

QR-Code groß, wenn Scannen Pflicht ist

Behalten
Warum
Wo die Anmeldung nur übers Handgerät geht, ist der Code die Hauptaktion und muss schnell und sicher scanbar sein.
Dazu
Nicht synchronisierte Daten vom Handgerät blende ich aus, damit kein veralteter Stand angezeigt wird.

Gefüllte Buttons für die Navigationspfeile

Verworfen
Stattdessen
Einfache Icon-Buttons ohne Hintergrund
Warum
Pfeile sind selbsterklärend. Ohne Füllung konkurrieren sie nicht mit der eigentlichen Aktion (Anmelden / Abmelden) und wirken ruhiger.

Gelbe Lücken-Markierung und zusätzliche Zustände in der Fahrzeugliste

Kompromiss
Ausgangslage
Die Werke haben ausdrücklich gefordert, dass übersprungene Fahrzeuge markiert werden, damit man sich bewusst mit Lücke abmelden kann. Dazu kamen die Zustände „nicht auswählbar“ und „ausgewählt“.
Meine Empfehlung
Davon habe ich abgeraten: zu viele Farben auf engem Raum, zu bunt, zu viel auf einmal.
Umsetzung
Die Anforderung blieb, also habe ich sie so neutral wie möglich gestaltet: sichtbar, aber nicht störend.
Gelernt
Wenn eine Anforderung gegen meine Empfehlung kommt, liegt mein Hebel in der Umsetzung: Ich kann die Folgen klein halten.
Ergebnis

Die Papierliste ist abgelöst, das Fenster ist mitgewachsen.

Keine quantitativen Wirkungsangaben: Messwerte zur Nutzung liegen mir nicht vor und werden hier nicht behauptet.

Reflexion

Übernehmen ist auch Designarbeit.

Ich habe diesen Entwurf nicht erfunden, sondern übernommen und zu Ende gebracht. Der größte Teil der Arbeit lag danach: jedes neue Element gegen den vorhandenen Platz abwägen und entscheiden, was wirklich Fläche verdient.

Offen ist, wie Nutzer:innen vor einer automatischen Abmeldung bei Inaktivität gewarnt werden, ohne dafür ein Popup einzuführen. Als Nächstes würde ich die Unterscheidbarkeit der Zustände direkt am Terminal testen, unter realen Lichtverhältnissen und mit Handschuhen.

Projektdetails unter NDA anonymisiert · DSGVO · GeschGehG · Alle Screens sind synthetische Rekonstruktionen.