Case Study: Datensatz-Upload und Datensatzvisualisierung |

SaaS-Applikation zur Digitalisierung von Prozessen in öffentlicher Verwaltung.

Tools: Figma und Miro

Rolle: Lead UX/UI Designerin – alleinige Verantwortung für die gesamte UX-Strategie und das UI-Design in enger Zusammenarbeit mit den Entwicklern und der Produktmanagerin.

Firma: Polyteia GmbH

Projektzeitraum: September – Dezember 2024

Projektstatus: in Entwicklung

Die Ausgangssituation

Das Startup Polyteia befindet sich derzeit in der Product Discovery Phase für eine neue Web-Anwendung, die Arbeitsprozesse der öffentlichen Verwaltung – sogenannte Fachverfahren – abbilden soll. Als ich als freiberufliche UX/UI Designerin zur Unterstützung ins Team kam, lagen bereits ein neues Design-System sowie erste Designs vor, die in Zusammenarbeit mit einer Agentur entwickelt wurden und auch bereits technisch umgesetzt waren.

Das Ziel

Nach der Implementierung des User-Management-Systems sollte eine weitere zentrale Funktion ergänzt werden: die Möglichkeit, Datensätze hochzuladen, anzusehen, mit ausgewählten Personen zu teilen, Zugriffsrechte zu verwalten und die Datensätze zu exportieren.

Ziel des Projekts war die Entwicklung eines Prototyps, der mithilfe von Usability-Tests evaluiert werden sollte. Da die Datenaufbereitung und -analyse eine der Hauptaufgaben in der Verwaltung darstellen, waren im Anschluss zusätzliche Funktionen wie Abfragen und Visualisierungen geplant.

Herangehensweise: Design Sprint

Um den Upload und die Darstellung von Datensätzen in der Polyteia-Applikation zu gestalten, starteten wir mit einem Design Sprint. Ziel war es, eine gemeinsame Vision im interdisziplinären Team zu entwickeln und zentrale Herausforderungen zu identifizieren.

Kernpunkte des Sprints:

Experteninterviews: Gespräche mit internen Stakeholdern, um Kundenbedürfnisse, Pain Points und Chancen zu verstehen.
Key Findings: Nutzer erwarten eine intuitive Lösung, die mit bestehenden Tools wie Excel konkurrieren kann und Kollaboration sowie flexible Exporte ermöglicht.
Herausforderungen: Die Balance zwischen einfacher Bedienbarkeit und komplexen Funktionen, Integration mit bestehenden Fachverfahren und die unterschiedlichen technischen Vorkenntnisse der Nutzer.

Basierend auf diesen Erkenntnissen entstand das Konzept für den Datenupload und die Darstellung von Datensätzen in der Applikation.

Persona

Designprozess

Vom Low- zum High-Fidelity Design

In unserem interdisziplinären Team machten wir uns am Ende des Design Sprints Gedanken über mögliche Workflows (siehe Abb. 1). Die Datensätze sollten genau wie die Formulare eines Arbeitsbereiches (ehemals Ablaufs) zugeordnet sein. Ich erstellte verschiedene Scribbles dazu (siehe Abb. 2 und 3).

Einstieg Datensatz als neuer Tab im Arbeitsbereich

Innerhalb eines Arbeitsbereiches ist ein neuer Menüpunkt namens „Datensätze“ hinzugekommen. Dort hat der User die Möglichkeit einen Datensatz hinzuzufügen. Alle hochgeladenen Datensätze werden dort in einer Liste angezeigt. Es können für einen Arbeitsbereich also mehrere Datensätze hochgeladen werden. Mit Klick auf einen Datensatznamen kann dieser geöffnet werden, sofern der User über die Berechtigung verfügt.

Flow 1: Datensatz erstellen

Datensatz benennen

Für den Upload eines Datensatzes habe ich einen Flow entwickelt, der es ermöglicht, den Datensatz zu benennen und zu beschreiben. Dafür habe ich ein Overlay gewählt, da es sich um eine abgeschlossene Aktion handelt. Zudem kann der Nutzer hier eine Quelle angeben, aus der der Datensatz stammt.

Datensatz Detailseite

Nach der Benennung des Datensatzes wird eine neue Unterseite erstellt, was auch im Breadcrumb sichtbar ist. Oben werden der vergebene Name und die Beschreibung des Datensatzes angezeigt. Zudem stehen zwei Tabs zur Verfügung: Übersicht und Einstellungen. Auf der Übersicht kann der Nutzer die Datensatzdatei entweder per Drag & Drop oder über den Dateibrowser importieren.

Datensatz beschreiben

Nach Auswahl einer Datei öffnet sich ein Overlay zur Beschreibung des Datensatzes. Der Nutzer sieht eine Dateivorschau und wählt in zwei Dropdown-Menüs das Feldtrennzeichen sowie die verwendeten Anführungszeichen. Zusätzlich findet sich die Information, dass die erste Zeile als Kopfzeile verwendet wird. Diese Angaben sind erforderlich, damit das System die Datei korrekt verarbeiten kann. Die Vorschau erleichtert dem Nutzer die Eingabe. Möglicherweise kann das System die Felder automatisch erkennen und vorausfüllen, doch zum Zeitpunkt der Design-Erstellung war dies noch unklar.

Ladezustand und abgeschlossener Upload

Während des Uploads kann der User den Ladeprozess anhand eines Ladebalkens und einer Prozentangabe nachvollziehen. Sobald der Upload abgeschlossen ist, kann der Datensatz direkt geöffnet werden.

Ansicht der Datenfelder des Datensatzes

Alternative: Datensatz per API übermitteln

Im Tab Einstellungen finden sich alle Informationen zur Übertragung der Daten via API. Der Tab wurde generisch Einstellungen genannt, da sich in Zukunft dort noch mehr Funktionen finden sollten. Hier kann der User die Datensatz URL mithilfe eines Buttons kopieren. Das Feld ist nicht editierbar und daher mit einem grauen Hintergrund gestaltet. Ich habe mich bewusst gegen ein deaktiviertes Eingabe-Feld entschieden, da ich generell keine deaktivierten Elemente verwende, da sie die Usability beeinträchtigen.

Mit Klick auf API-Schlüssel erstellen öffnet sich ein Overlay. Dort kann der User den API-Schlüssel benennen und die Berechtigung auswählen („Lesen“ oder „Lesen und Schreiben“).

Mit einem Klick auf „Speichern“ gelangt der Nutzer zum nächsten Schritt, in dem der generierte API-Schlüssel angezeigt wird. Ein Button ermöglicht das einfache Kopieren des Schlüssels. Sobald der Schlüssel in den Zwischenspeicher kopiert wurde, ändert sich der Buttontext zu „Kopiert“. Zudem erhält der Nutzer den Hinweis, den Schlüssel zu speichern, da er später nicht erneut angezeigt wird.

Flow 2: Datensatz teilen

Mit Klick auf den Teilen-Button oben rechts, öffnet sich ein Overlay. Hier kann nach Personen oder Gruppen gesucht werden, mit denen der Datensatz geteilt werden soll. Sobald eine Person/Gruppe ausgewählt wurde, erscheint ein Dropdown-Menü zur Auswahl der Rolle. (Mehr zur Gestaltung der Suchfunktion findest du hier).

Flow 3: Spaltennamen editieren im Datensatz Editor

Nutzerführung bei initialer Öffnung

Da komplexe Software nicht immer vollständig selbsterklärend ist, haben wir uns entschieden, den Nutzer mit einem Dialogfeld zu unterstützen. Dieses erklärt, wie Spaltennamen definiert oder umbenannt werden können. Um die Kopfzeile hervorzuheben, wird der Hintergrund ausgegraut, sodass der Fokus klar auf den relevanten Bereichen liegt.

Flow 4: Datenfelder editieren

Alternativ zur Bearbeitung der Datenfelder im Editor kann der Nutzer die Datenfelder auch direkt auf der Datensatz-Übersichtsseite per Inline-Editierung anpassen. Dabei kann immer eine ganze Zeile bearbeitet werden. Sie ermöglicht eine schnellere Bearbeitung, da Nutzer direkt in der Übersicht arbeiten können, ohne die Ansicht zu wechseln.

Änderungen werden mit einem „Speichern“-Button bestätigt oder können verworfen werden. Für diese Aktionen habe ich mich bewusst für Text-Buttons anstelle von Icons entschieden, um mögliche Missverständnisse zu vermeiden.

Klickbarer Prototyp

👉 Prototyp 1

Was ich aus dem Projekt gelernt habe

Meine erste Teilnahme an einem Design Sprint war eine spannende und lehrreiche Erfahrung. Die kurzen Zeitfenster für Aufgaben zwangen zu schnellen Entscheidungen und zeigten, wie effektiv dieses Format sein kann – auch wenn es herausfordernd war, unter Zeitdruck Ideen zu entwickeln.

Besonders beim Upload-Flow gab es viele Iterationen. Zunächst war geplant, den Teil zur Beschreibung der CSV-Datei aus einem Legacy-Produkt zu übernehmen. Im Laufe des Projekts stellte sich jedoch heraus, dass dieser Ansatz nicht zielführend war, da einige Schritte direkt im Datensatz-Editor durchgeführt werden sollten. Daher wurde intensiv über den optimalen Flow diskutiert. Zusätzlich musste ich mich eng mit dem Entwicklungschef abstimmen, um zu verstehen, welche Informationen die Nutzer bei der Übermittlung von Datensätzen über die API benötigen.

Da ich das Projekt vor Abschluss verlassen habe, konnte ich die Umsetzung nicht mehr begleiten. Das hat mir noch einmal bewusst gemacht, wie essenziell eine gute Dokumentation für eine reibungslose Übergabe ist. Trotz der Herausforderungen war es eine wertvolle Erfahrung, aus der ich viel mitnehme.