Nachweise & Monitoring
Ein Dokument beschreibt
einen Teil des Bildes.
Die Oberfläche unterscheidet verfügbare Nachweise vom laufenden Monitoring eines Dienstleisters.
01 Die Nutzeraufgabe
Dienstleister finden
und Informationen einordnen.
Von der Suche zu einer nachvollziehbaren Einschätzung und einem nächsten Schritt.
Ein Mitarbeiter auf Unternehmensseite sucht einen Personaldienstleister. Er möchte verstehen, welche Nachweise vorliegen, wie aktuell diese sind und ob er genauer hinschauen muss. Anschließend soll er den Dienstleister in seine Watchlist aufnehmen und relevante Veränderungen wiederfinden können.
Dieser Ablauf macht die zentrale Gestaltungsaufgabe deutlich: Suchergebnis, Profil, Nachweise und Hinweise müssen zusammenpassen. Die Aussage eines Status muss aus den zugehörigen Informationen verständlich werden.
- 01
Finden
Dienstleister suchen und verfügbare Prüfquellen erkennen.
- 02
Einordnen
Profil, Aktualität und zugängliche Nachweise betrachten.
- 03
Merken
Den Dienstleister zur eigenen Watchlist hinzufügen.
- 04
Nachverfolgen
Von einem Änderungshinweis zur betroffenen Information gelangen.
Ein exemplarischer Nutzerablauf als roter Faden durch das Produkt.
02 Produktaufbau · 2025
Aus Markenansätzen
eine Produktoberfläche entwickeln.
Stylescape, Wireframes, Komponenten und ausgearbeitete Screens.
Am Anfang mussten wir eine gemeinsame Vorstellung davon entwickeln, wie sich TYCT als Anwendung anfühlen sollte. Dafür erstellten wir ein Stylescape mit visuellen Ansätzen und Modulvarianten. Es machte mögliche Gestaltungsrichtungen für den Kunden greifbar.
Auf dieser Grundlage folgte die Wireframe-Arbeit. Wir strukturierten die Abläufe und Ansichten des Hauptflows und arbeiteten mit der abgestimmten Designrichtung die eigentlichen Komponenten und finalen Screens aus.
Das Designsystem wuchs mit den benötigten Elementen und Seitentypen. Der Umfang erweiterte sich über den ursprünglichen Prototyp hinaus auf weitere Bereiche der Software.
Was das Team erhielt
Einen Hauptflow-Prototyp, ausgearbeitete Produktoberflächen und eine gemeinsame Gestaltungsbasis für weitere Bereiche.
03 Informationsstruktur
Nachweise strukturiert
zugänglich machen.
Vom Überblick über einen Dienstleister bis zu den einzelnen Dokumenten.
Zu einem Dienstleister gehören unterschiedliche Informationen: Unternehmensdaten, Niederlassungen und Nachweise, etwa zur Arbeitnehmerüberlassung oder zu Versicherungen. Diese Inhalte mussten sowohl im Gesamtzusammenhang als auch einzeln auffindbar sein.
Die Dokumentansicht gliedert Nachweise nach Typ. Suche und Dokumentaktionen sind unmittelbar an dieser Aufgabe angeordnet. Die Gestaltung verbindet damit das Unternehmensprofil mit den Informationen, die für eine genauere Prüfung benötigt werden.
Die enge Zusammenarbeit mit dem TYCT-Team war dafür entscheidend. Das Team brachte tiefes Fachwissen ein. Ich half, die Anforderungen zu strukturieren und mit dem userdoo-Team in verständliche Abläufe und Oberflächen zu übersetzen.
04 Weiterentwicklung · 2026
Unterschiedliche Prüfstände
sichtbar auseinanderhalten.
Mit dem Produktumfang wuchs auch die fachliche Komplexität.
2026 arbeiteten wir an einer bereits bestehenden Anwendung. Neue Funktionen, externe Datenquellen, Dokumentenanfragen und Gruppenstrukturen waren hinzugekommen. Navigation und Informationshierarchie mussten diese Nutzungskontexte wieder zusammenführen.
Ein Dienstleister konnte in der Watchlist stehen, einer Gruppe zugeordnet sein und einzelne Nachweise besitzen. Daraus folgte noch nicht, dass er laufend überwacht wurde. Zusätzlich mussten Herkunft, Aktualität und Freigaben der Informationen erkennbar bleiben.
Ein Dokument beschreibt
Unbekannt & kritisch
Fehlende Angaben
haben eine eigene Bedeutung.
Ohne Daten lässt sich keine negative Bewertung begründen. Dieser Zustand bleibt von einer Warnung getrennt.
Quelle & Aktualität
Der Status braucht
seinen Kontext.
Herkunft, Prüfbezug und Zeitpunkt helfen dabei, die Aussage einer Information einzuordnen.
Unsere Arbeitsweise
Vollständige Abläufe machten das Fachmodell besprechbar.
Mit realistischen Beispielen, Screen-Flows und interaktiven Figma-Prototypen konnten wir Einstieg, Zuordnung und Rücknavigation gemeinsam prüfen. Die Grundlage waren Produktanalyse und der iterative Austausch mit Produktverantwortlichen und Entwicklung.
05 Dashboard & Gruppen
Handlungsbedarf zeigen.
Den betroffenen Dienstleister benennen.
Eine einzelne Warnung darf nicht die gesamte Gruppe als kritisch erscheinen lassen.
Das Dashboard beantwortet, wo Aufmerksamkeit nötig ist. Hinweise nennen den betroffenen Dienstleister und den Anlass. Im Gruppenbereich stehen dagegen Zuordnungen, Untergruppen und die enthaltenen Dienstleister im Mittelpunkt.
Die Gruppendarstellung erhielt neutrale Flächen. Warnungen und Klärungsbedarf bleiben gezielt sichtbar, ohne alle Gruppenmitglieder visuell gleich zu bewerten. Aktive Dienstleister ohne Daten werden außerdem von inaktiven Dienstleistern unterschieden.
Bestehende Komponenten und vertraute Seitenmuster blieben die Basis. Die zusätzlichen Funktionen sollten als zusammenhängende Weiterentwicklung des Produkts bedienbar sein.
OK, Klärungsbedarf, Warnung, ohne Angabe und inaktiv bleiben unterscheidbar.
TYCT-Monitoring, Dokumentenservice und externe Informationen werden benannt.
Gruppen, Untergruppen und direkt zugeordnete Dienstleister sind unterschiedliche Ebenen.
06 Design & Entwicklung
Implementierte Komponenten
an die Entwicklung übergeben.
Die Zusammenarbeit reichte von der visuellen Richtung bis zur wiederverwendbaren Komponentenbasis.
Neben Screens und Spezifikationen lieferten wir ein Storybook mit ausgearbeiteten Vue-/TypeScript-Komponenten. Darin sind Varianten, Zustände und Interaktionsverhalten dokumentiert und prüfbar.
Die Entwicklung konnte diese Komponenten in das Portal übernehmen und mit den Anwendungsdaten verbinden. Backend, Berechtigungen, Routing und die konkrete Integration blieben beim Entwicklungsteam.
Regelmäßige Abstimmungen, besonders mit dem Lead-Entwickler, verbanden unsere Designentscheidungen mit den Anforderungen der Umsetzung. Ich verantwortete die Designarbeit und Delivery auf userdoo-Seite.
Die gemeinsame Grundlage
Figma
Produktansichten, Abläufe und Gestaltung
Storybook
Wiederverwendbare Komponenten mit dokumentierten Zuständen
Portal-Entwicklung
Anbindung von Daten, Berechtigungen und Backend
Beispiele aus dem gelieferten Komponentenbestand
Supplier Tile
Darstellung von Dienstleistern und ihren unterschiedlichen Informationsständen.
Status Summary
Getrennte Statuskategorien mit passenden Lade- und Darstellungszuständen.
Handlungsbedarf
Konkrete Hinweise und ein Zugang zur betroffenen Detailinformation.
Ergebnis & mein Beitrag
Wiederverwendbare UI für den Produktausbau.
TYCT konnte auf einer fertigen UI-Komponentenbasis aufbauen. Wiederkehrende Elemente mussten damit nicht für jeden Flow neu gestaltet werden. Die gemeinsam geklärten Prüfzustände gaben Produkt und Entwicklung eine einheitliche Grundlage.
Konkrete Screen-Flows
Such-, Profil-, Nachweis- und Verwaltungsaufgaben in zusammenhängenden Entwürfen und Prototypen.
Differenzierte Informationen
Eine Struktur, die Prüfstatus, Datenquellen, Aktualität und konkreten Handlungsbedarf unterscheidet.
Wiederverwendbare Komponenten
Figma-Grundlage und implementierte Storybook-Bausteine mit dokumentierten Varianten und Zuständen.
Zusammenarbeit
Christine BognerTYCT
“The team is fantastic. They address our specific needs and work with us to find the best solutions. They are also flexible, allowing us to incorporate any last-minute changes without them losing sight of the overall goal or strategy. We will continue to work together.”Weitere Case Studies
Geführte Projektabläufe für eine SaaS-Anwendung
Ein geführter Projektablauf schuf die Grundlage, ein internes Werkzeug als SaaS-Angebot zu öffnen. Aufgaben, Unterlagen und nächste Schritte wurden dafür zusammengeführt.
Bestandsverwaltung für die Gastronomie
Weniger manuelle Dateneingabe beim Wareneingang: Drop übernimmt Rechnungsdaten per KI in die Bestandsverwaltung. Gemeinsame Komponenten bilden die Basis für den weiteren Produktausbau.
Kundenwege und Designsystem für eine Lernplattform
Weitere Landingpages ließen sich auf gemeinsamen Vorlagen und Komponenten aufbauen. Walkthroughs zeigten konkrete Hürden beim Zugang zu Kursen und Angeboten auf.