Hallo Johan,
hier meine fertige "Hausaufgabe". Ihr könnt einfach nach unten scrollen und seht einen Teil der Entstehungsgeschichte, oder aber gleich zum Prototypen springen.

PS: Ich habe mich ausschließlich mit dem komplexen use case b beschäftigt.

Use Case B: Pharmacoat Prototyp

Ich habe bewusst nur diesen Case gewählt, da er am meisten Freiheiten aber auch am meisten Komplexistät mitbrachte.

Workflow

Vorgehensweise

Der Ablauf von der ersten Skizze bis zum interaktiven Prototyp im Überblick. Insgesamt habe ich zwei Tage für diese Aufgabe investiert. 2/3 Design 1/3 Code und Deployment.

Wahl und Besprechung der Aufgaben mit den Eltern
Skizze der Fabriksituation aus Aufgabe 2
Unbekannte Begriffe klären (GMP)
Die Devices und ihre Abmessung sowie Bediener
Bottleneck: Alarmflut welche einfach weggeklickt wird
Wireframes in Figma (Allgemeines Layout, Alarmliste, Produktionsübersicht)
Wireframes „verschwimmen“ zu echten Screendesigns
Frage: Wird der Fehler vom Menschen oder von der Maschine gemacht
Tablet Display des Maschinen-Arbeiters (KI-Recherche)
Screendesign Tablet Display des Maschinenarbeiters
Kurzer Ausflug zu Stitch (by google)
Astro Prototyp (Zed + Gemini + eignes Coding)

Beginn des Gestaltungsprozesses

Detaillierte Screens und Workflows des Systems. Begonnen mit minimalistischen Wireframes und diese dann stellenweise in Richtung high fidelity ausgearbeitet.

Übersicht (mit KI generiert)

Pharmacoat – So könnte das Szenario sein

Übergeordnete Gesamtdarstellung der Produktionsanlage und des pharmazeutischen Coating-Systems im laufenden Betrieb.

Use Case B · 001

Allgemeines Layout als Wireframe

Strukturierte Desktop-Architektur mit robuster Seitenleiste und Freiraum für verschiedene, wiederkehrende Bereiche.

Use Case B · 002

Produktionsübersicht als Wireframe

Zentrale Visualisierung aller Prozessparameter, Batch-Fortschritte und Maschinenzustände auf einen Blick.

Use Case B · 003

Alarmliste als Screendesign

Priorisierte Fehler- und Warnmeldungen mit direkter Quittierfunktion. Teile der Ansicht sind noch roh als Wireframe, da sie nicht Teil der Aufgabe waren und für mich somit keine Priorität hatten. Außerdem weicht mein Screendesign vom Prototypen ab, da wäre im nächsten Schritt noch Feinjustierung notwendig.

Use Case B · 004

Tablet-Interface für die Arbeiter an den Maschinen

Touch-optimierte Benutzeroberfläche zur flexiblen Vor-Ort-Überwachung direkt an der jeweiligen Maschine.

Hallo Johan,hier meine fertige "Hausaufgabe". Ihr könnt einfach nach unten scrollen und seht einen Teil der Entstehungsgeschichte, oder aber gleich zum Prototypen springen.