TiONA — AI-ready B2B-Workflow-Plattform

TiONA ist eine in Deutschland entwickelte und gehostete, DSGVO-konforme digitale Managementplattform für Organisationen, die mit sensiblen Daten und regulierten Prozessen arbeiten. Sie verbindet Kommunikation, Projektarbeit, Video-Meetings, Dokumentenablage, Workflows, Dashboards, Organisationsstrukturen und KI-gestützte Assistenz in einem sicheren Workspace. Als Product Designer arbeitete ich am UX/UI des Produkts – von Informationsarchitektur und User Flows über responsive Interface Patterns und Prototypen bis zum Developer Handoff.

Die zentrale Designaufgabe war Konsistenz auf Plattformebene. Jedes Modul musste eine andere Aufgabe lösen und sich dennoch wie Teil desselben Systems anfühlen – mit vertrauter Navigation, verständlichen Zuständen und Layouts, die von Desktop bis Mobile funktionieren.

Business-Teams koordinieren Kommunikation, Aufgaben, Dokumente und Freigaben oft über voneinander getrennte Tools. TiONA führt diese Prozesse auf einer Plattform zusammen – einschließlich Kanban-basiertem Ticketing, Dokumentenerkennung, konfigurierbaren Dashboards und rollenbasiertem Zugriff. DSGVO-Konformität dient dabei als Differenzierungsmerkmal.

Die Plattform richtet sich insbesondere an Teams aus Steuerberatung, Recht, Finanzen, öffentlichem Sektor, Gesundheitswesen und anderen compliance-getriebenen Bereichen. Vertrauliche Informationen sollen in einer kontrollierten Infrastruktur bleiben; auch AI-assisted Funktionen müssen so gestaltet sein, dass externe Modelle keinen unkontrollierten Zugriff auf sensible Daten erhalten.

Dieses Versprechen erzeugt eine Designherausforderung: Jedes neue Modul – Chat, Tickets, Dokumente oder Dashboards – konkurriert um Navigation, Benennung und Bildschirmfläche. Ohne starke Informationsarchitektur und eine gemeinsame Komponentensprache wird aus „All-in-one“ schnell „alles überall“.

Wie gestaltet man eine Plattform, die sich vom ersten Tag an einfach anfühlt und mit Rollen und Berechtigungen, Dokumenten-Workflows, Dashboards und AI-assisted Features wachsen kann?

• Lose definierte, wachsende Anforderungen in eine kohärente Produktstruktur übersetzen.
• Workflows für unterschiedliche Rollen verständlich machen – Admins, Manager und Teammitglieder.
• Das UI trotz hoher Informationsdichte ruhig und vertrauenswürdig halten.
• Das Produkt auf AI-assisted Features vorbereiten, statt sie später anzubauen.

End-to-End Product Design: UX Research und Usability Testing, Informationsarchitektur, User Flows, Wireframes, High-Fidelity UI, Prototyping, Design System und Design-to-Development Handoff. Darüber hinaus arbeitete ich an Markenstrategie und Produktkommunikation – direkt mit Gründern und Entwicklern.

Die Arbeit verlief in Schleifen statt in starren Phasen: Aufgabe eines Moduls verstehen, Workflow abbilden, Struktur skizzieren, prototypisieren, mit Nutzern testen und Bewährtes anschließend in wiederverwendbare Patterns überführen.

• Research & Flows – Interviews und Usability Tests; verstehen, wie Teams Tickets, Dokumente und Freigaben tatsächlich bearbeiten.
• Struktur zuerst – Navigationsmodell, Modullogik und Benennung vor dem visuellen Design klären.
• Prototypisieren & validieren – klickbare Prototypen, um Stakeholder auszurichten und früh mit Nutzern zu testen.
• Systematisieren – validierte Patterns wurden zu Design-System-Komponenten mit dokumentierten Zuständen.

Die erste systemische Entscheidung war, die Plattform vorhersehbar zu machen, bevor einzelne Module eine eigene Ausprägung erhalten. Ein gemeinsames Navigationsmodell, konsistente Modulpositionen und vertrautes Responsive Behavior reduzieren den Lernaufwand.

• Desktop nutzt den verfügbaren Raum. Die Sidebar lässt sich auf Icons reduzieren, ohne den Zugang zur vollständigen Plattform zu verlieren.
• Mobile priorisiert Fokus. Ein vollständiges Menü ermöglicht den Modulwechsel; die Bottom Navigation hält häufige Aktionen erreichbar.
• Eine visuelle Sprache. Aktive Zustände, Icons und Labels verhalten sich über alle Bildschirmgrößen hinweg konsistent.

Operative Workflows lassen sich leichter steuern, wenn das Interface ihren Zustand sichtbar macht. Das Analytics-Modul unterstützt die Entwicklung vom hilfreichen First-Use-Zustand über eine kompakte Mobile-Prozessliste bis zur datenreichen Desktop-Übersicht.

Status-Badges, Verantwortliche und Datumsangaben bleiben über alle Layouts hinweg konsistent. Mobile betont die nächste relevante Aktion; Desktop erleichtert Vergleich und Monitoring.

Nach Orientierung und Prozesstransparenz bestand der nächste Schritt darin, die eigentliche Arbeit zu verbinden. Rooms gibt Teams einen gemeinsamen Kommunikationskontext, während Storage Ordner und Arbeitsdateien in derselben Produktumgebung verfügbar hält.

Beide Module nutzen die List-Detail-Logik der Plattform: Auf dem Desktop stehen Übersicht und Detail nebeneinander, auf Mobile werden daraus fokussierte Einzelscreens.

Statt jedes Modul als separates Produkt zu behandeln, gestaltete ich die gemeinsamen Regeln dahinter: Sidebar-, Listen-, Detail- und Panel-Layouts, wiederverwendbare Cards und Tabellen, eine konsistente Statuslogik sowie responsive Übergänge, die die Informationshierarchie erhalten.

Das Ergebnis wird in den gezeigten Screens sichtbar. Dashboard-Cards ordnen sich neu, statt ein zweites Mobile-Produkt zu bilden, und dasselbe List-Detail-Pattern unterstützt Konversationen, Prozesse und Dateien.

Die Produktvision geht über einen separaten Chatbot hinaus: Integrierte Assistenten sollen Routineaufgaben, Deadlines, Follow-ups und Content-Routing unterstützen. Die von mir entwickelten KI-Oberflächen übersetzen diese Richtung in ein Interaktionskonzept – sie waren Teil der Produktvision, nicht des veröffentlichten Umfangs. Ask TiONA befindet sich auf dem Desktop neben einem aktiven Room und wird auf Mobile zu einem fokussierten Sheet. So bleibt der Assistent nah am Arbeitskontext.

• Handlungsorientierter Einstieg. Quick Actions verbinden die Assistenz mit Dokumenten, Zeiterfassung, Deadlines und Mandanten.
• Mehrere Eingabemöglichkeiten. Text und Sprache nutzen denselben Einstieg in den Assistenten.
• Kontext ohne Überlagerung. Auf dem Desktop läuft die Assistenz neben der Konversation; Mobile nutzt eine eigene, schließbare Oberfläche.
• Wiedererkennbare Systemlogik. Navigation, Sheets, Eingaben und Aktionen verwenden etablierte TiONA-Patterns.

Das TiONA Design System verbindet diese Module durch gemeinsame Foundations und wiederverwendbare Komponenten: Navigation, Tabellen, Cards, Eingaben, Tabs, Status-Badges, Sheets und Dialoge. Ihr Responsive Behavior war Teil der Spezifikation und keine nachträgliche Anpassung.

Diese gemeinsame Sprache ermöglichte es, unterschiedliche Funktionen hinzuzufügen und dennoch das Gefühl eines Produkts über Desktop und Mobile hinweg zu bewahren.

Die wertvollste Designarbeit an TiONA bestand darin, die Gemeinsamkeiten verschiedener Module zu definieren, bevor ihr jeweiliges Erscheinungsbild festgelegt wurde. Mit stabiler Navigation, konsistentem Responsive Behavior und zentralen Interaction Patterns konnte das Produkt sehr unterschiedliche Aufgaben unterstützen, ohne in getrennte Erlebnisse zu zerfallen.

Der Assistent bestätigte dieselbe Erkenntnis: Neue Technologie wird nützlicher, wenn sie an vertraute Aktionen und Kontexte anknüpft, statt ein völlig neues Produktmodell einzuführen.