Training anlegen und das Analyseziel bestimmen.
01 Orientierung im Produkt
Projekt, Daten und Training
in Beziehung setzen.
Die Anwendung verbindet mehrere Ebenen: ein Projekt mit seinen Daten, unterschiedliche Werkzeuge zur Untersuchung dieser Daten und Trainings mit eigenen Einstellungen und Ergebnissen. Die Nutzerführung musste diese Ebenen auseinanderhalten und ihre Zusammenhänge sichtbar machen.
In den Arbeitsskizzen erhält das Projekt einen festen Rahmen. Projektinformationen, Tabellen, Datenexploration und Training sind als eigene Bereiche angeordnet. Innerhalb dieser Bereiche kommen weitere Aufgaben hinzu: eine Tabelle auswählen, eine Visualisierung anlegen oder einen Trainingslauf öffnen.
Unser Gestaltungsumfang reichte dabei vom Onboarding und der Projektanlage bis zu den Daten- und Trainingsansichten. Unter meiner Leitung arbeiteten wir an einer gemeinsamen UX für diese zusammenhängenden Aufgaben.
Varianten im Arbeitsmaterial
Zwei Ebenen der Navigation auseinanderhalten.
Die Skizzen A und B untersuchen, wo die Schritte innerhalb eines Trainings liegen: in einer zusätzlichen vertikalen Spalte oder horizontal oberhalb des Arbeitsbereichs. Die Projektbereiche bleiben in beiden Varianten links erreichbar.
Damit wird eine konkrete Gestaltungsfrage sichtbar: Wie lässt sich durch ein Training führen, während die übergeordnete Projektnavigation erhalten bleibt? Die ausgearbeitete Trainingsansicht zeigt eine horizontale Schrittfolge. Die Skizzen machen die untersuchten Anordnungen und ihren Bezug zum Arbeitsbereich nachvollziehbar.
02 Zusammenhängende Abläufe
Vom Trainingsstart
bis zur Ergebnisansicht.
Ein Training beginnt mit mehreren fachlichen Entscheidungen. Der gezeigte Entwurf gliedert sie in vier Schritte: Analyseziel, Zielauswahl, Auswahl der Merkmale und Empfehlungen für das Modell. Eine Schrittanzeige hält die Position im Ablauf sichtbar; Zurück- und Weiter-Aktionen verbinden die einzelnen Entscheidungen.
Diese Gliederung gibt der Konfiguration eine Reihenfolge. Im ersten Schritt wird beispielsweise zwischen Analysezielen wie Vorhersage, Klassifikation oder Clustering gewählt. Die spätere Modellempfehlung hat einen eigenen Platz im Ablauf. So werden die fachlichen Auswahlmöglichkeiten in aufeinanderfolgende Oberflächen übersetzt.
Auch die Ergebnisansichten sind nach Aufgaben gegliedert. Sie unterscheiden die Verarbeitungskette, die Anwendung des Modells auf neue Daten und die Auswertung seiner Leistung. Innerhalb der Verarbeitungskette bleiben wiederum Dateninformationen, Vorverarbeitung und weitere Schritte zugänglich. Die Figma-Verknüpfungen zeigen, wie die Ansichten und Dialoge im Prototyp zusammenhängen.
Weitere Auswahlentscheidungen im Ablauf darstellen.
Pipeline und Ergebnisse in gegliederten Ansichten zugänglich machen.
03 Gestalterische Grundlage
Wiederkehrende Elemente
konsistent gestalten.
Die strukturelle Überarbeitung brauchte eine gemeinsame visuelle Grundlage. Wiederkehrende Navigation, Eingaben, Dialoge und Karten sollten sich über die unterschiedlichen Arbeitsbereiche hinweg konsistent bedienen lassen.
Das Komponentenboard verbindet allgemeine UI-Bausteine mit anwendungsspezifischen Elementen. Auf dieser Ebene treffen die vielen Einzelansichten wieder zusammen: Die fachlichen Inhalte unterscheiden sich, gemeinsame Bedienelemente geben ihnen einen wiedererkennbaren Rahmen. Im weiteren Verlauf entwickelten wir außerdem Farbpalette und Oberfläche weiter.
04 Workflow & Prototyp
Verarbeitungsschritte
als Workflow darstellen.
AICU brachte die Idee eines nodebasierten Workflows ein. Unser Beitrag war, diesen Ansatz in eine Oberfläche und eine prototypische Darstellung zu übersetzen.
Die Arbeitsstudie teilt die Oberfläche in eine Bibliothek und eine Arbeitsfläche. Links lassen sich Bausteine über Kategorien und ein Suchfeld erschließen. Rechts zeigt der Entwurf die Verbindung von Daten, Vorverarbeitung, Visualisierung und Training.
Die Darstellung macht damit zwei Aufgaben gleichzeitig zugänglich: verfügbare Schritte finden und ihren Zusammenhang im Workflow überblicken. Zoom-Steuerung und eine kleine Übersichtskarte ergänzen die Orientierung auf der Arbeitsfläche. Diese Elemente sind Teil der Designstudie.
Den späteren Prototyp setzten wir gemeinsam im Team unter meiner Leitung um. Ein großer Teil dieser Arbeit entstand mit KI-gestütztem Coding. Gestaltung und prototypische Umsetzung griffen dabei ineinander.
05 Meine Verantwortung
Die Überarbeitung führen.
Mit dem Team ausarbeiten.
Ich verantwortete Kundenkommunikation, Designentscheidungen und die Lieferung unserer Arbeit auf userdoo-Seite. Dazu gehörte die fachliche Führung der beteiligten Designer.
Meine Aufgabe war, die übergreifende Richtung zu führen und die Ausarbeitung mit dem Team und AICU abzustimmen. Die gemeinsame Arbeit verband die Struktur des Produkts mit konkreten Datenansichten, Konfigurationsschritten und wiederkehrenden Bedienelementen.
Bei der Node View lag die Produktidee bereits auf Kundenseite. Mein Beitrag bestand darin, ihre gestalterische und prototypische Ausarbeitung mit dem Team zu führen. Die spätere Umsetzung mit KI-Unterstützung entstand gemeinsam im Team unter meiner Leitung.
Zusammenarbeit
Mein Beitrag
Projekt- und Designleitung, Kundenabstimmung und fachliche Teamführung
Tommy Haacke und Team
Gestaltung zentraler Ansichten und prototypische Ausarbeitung
AICU
Fachlicher Produktkontext und die Idee des nodebasierten Workflows
Ergebnis
Produktentscheidungen an konkreten Abläufen prüfen.
Das Kundenteam konnte Navigation und Trainingsabläufe anhand konkreter Screens besprechen und weiterentwickeln. Gemeinsame Komponenten verbanden die zuvor uneinheitlichen Bereiche. Der Node-Prototyp machte die vom Kunden eingebrachte Workflow-Idee interaktiv erprobbar.
Navigation & Projekte
Überarbeitete Einstiege, Projektanlage und Projektübersichten.
Daten & Training
Ausgearbeitete Datenansichten, Visualisierungen und Trainingsabläufe.
Node View
Gestalterische und prototypische Ausarbeitung der vom Kunden eingebrachten Workflow-Idee.
