Case Study: Cards neu gedacht
Disclaimer
Dieses Projekt unterliegt einer Vertraulichkeitsvereinbarung. Im Einklang mit diesen Vorgaben zeige ich hier abstrahierte Screens, nachgebaute Dummies sowie generische Funktionen wie z. B. das Editieren von Inhalten oder das Filtern von Daten. Detaillierte Informationen zu spezifischen Features, Prozessen oder unternehmensbezogenen Inhalten wurden entsprechend der jeweiligen Vereinbarung entfernt, anonymisiert oder bewusst allgemein gehalten.
Über das Projekt
Im Rahmen des Projekts kam der agile Entwicklungsansatz gezielt zum Einsatz, um auf konkrete Herausforderungen im Nutzungskontext flexibel reagieren zu können. In enger Abstimmung mit den Fachbereichen wurde nicht nur der bestehende Funktionsumfang kritisch hinterfragt, sondern auch schrittweise neu gedacht. Die entkoppelte Umsetzung eines zentralen Prozesses ist ein Beispiel für die Wirkung agiler Individualsoftware: Anstelle starrer, vorab definierter Strukturen wurde iterativ eine Lösung entwickelt, die sich an tatsächlichen Nutzungsmustern orientiert. Dabei stand die Nutzerführung klar im Fokus – weniger Komplexität, mehr Übersicht, kürzere Wege. Durch regelmäßiges Feedback konnte die neue Umsetzung fortlaufend angepasst und verbessert werden. Das Ergebnis ist eine funktional schlanke, aber in der Praxis deutlich effektivere Anwendung – maßgeschneidert auf den realen Bedarf statt auf rein technische Konzepte.
Parameter
Beschreibung
Produktkategorie
Agile Individualsoftware (Desktop-fokussiert)
Aufgabenbereiche
User-Research, Usability-Audits, Informationsarchitektur, UX-Konzeption, Designsystem, UI-Design, Testing & Iteration
Nutzergruppe
Fachanwender:innen im B2B-Kontext
Teamstruktur
- vertraulich -
Tools
Figma, Miro, Jira, Confluence, Storybook
Projektlaufzeit
- vertraulich - (agil in Sprints)
Ausgangssituation
Die Anwendung setzt auf eine große Akkordeon-Ansicht, bei der jeder Eintrag ein aufklappbares Akkordeon ist – innerhalb dieses Akkordeons liegen wiederum mehrere Tabs.
Ein wichtiger Vorgang war direkt in diese Ansicht integriert – ein Ablauf, der zwar technisch sinnvoll untergebracht war, sich in der Praxis jedoch als hinderlich erwiesen hat. Die Ansicht war unübersichtlich, die Nutzung wenig intuitiv, und der eigentliche Prozess ging darin regelrecht unter. Deshalb habe ich diesen Teil aus der Akkordeon-Ansicht herausgelöst und entkoppelt. Die ursprüngliche Ansicht bleibt weiterhin im Programm erhalten, da sie an anderer Stelle nach wie vor sinnvoll genutzt werden kann.
Das Ergebnis vorher: lange Klickwege, ständiges Springen zwischen Ansichten, kein klares Nutzungskonzept. Die Struktur war technisch gedacht, aber nicht aus Nutzerperspektive heraus aufgebaut.
Alter Ablauf
Um mit der Bearbeitung zu starten, mussten Nutzer:innen eine Reihe verschachtelter Schritte durchlaufen:
Service auswählen → Über eine Kachel
Oberen Reiter (Tab) klicken → Navigation in den richtigen Bereich
Kategorie im Akkordeon öffnen → Übergeordneter Inhaltsbereich
Unterkategorie öffnen → Weitere Detaillierung innerhalb der Kategorie
Konkreten Inhaltspunkt auswählen → Einzelner Eintrag in der Ansicht
Im Detailbereich den richtigen Tab für den Prozess wählen
Eigene Card öffnen → Je eine Card pro beteiligter Person
Gesamt: 7 Klicks, um zum ersten Bearbeitungspunkt zu gelangen.
Für jeden weiteren Inhaltspunkt in der Ansicht:
Neuen Inhaltspunkt auswählen
Richtigen Tab öffnen
Eigene Card öffnen
3 Klicks pro weiteren Bearbeitungsschritt.
Neuer Ablauf
Um mit der Bearbeitung zu starten, mussten Nutzer:innen eine Reihe verschachtelter Schritte durchlaufen:
Service auswählen → Über eine Kachel
Oberen Reiter (Tab) klicken → Der Prozessbereich ist direkt über die obere Navigation erreichbar
Kategorie auswählen → Übergeordneter Inhaltsbereich
Gesamt: 3 Klicks, um zum ersten Bearbeitungspunkt zu gelangen.
Für jeden weiteren Inhaltspunkt in der Ansicht:
Alle Inhalte sind direkt sichtbar und direkt bearbeitbare Kacheln
Nach Unterkategorien gegliedert für semantische Orientierung
Kein mühsames Aufklappen mehr
Optimierter Workflow durch Tastaturnavigation
Mit der Tab-Taste zwischen Kacheln wechseln
Keine unnötigen Maus-Wege
0–1 Klicks pro weiteren Bearbeitungsschritt, je nach Navigation.
Card-Design
Überschrift
Zeigt klar an, um welchen Inhaltspunkt es sich handelt.
Wichtige Informationen
m bisherigen Design waren zusammengehörige und gleichwertige Informationen nicht direkt miteinander verknüpft dargestellt. Im neuen Design sind diese Inhalte untereinander angeordnet, was einen schnelleren und direkteren Vergleich ermöglicht.
Weiterführende Informationen
Früher wurden zusätzliche Inhalte in mehreren Accordions unterhalb des Hauptinhalts versteckt, die jeweils einzeln aufgeklappt werden mussten. Jetzt sind alle weiterführenden Informationen über einen einzigen Button zugänglich, der die Nutzer gezielt weiterleitet. So genügt ein Klick, um alle Inhalte auf einmal zu sehen – platzsparend und übersichtlich.
Bearbeitung der Inhalte
Zuvor waren Bearbeitungsfunktionen an verschiedenen Stellen im Design verteilt. Nun lassen sich alle Bearbeitungsoptionen zentral über einen Button ein- und ausblenden. Zusätzlich werden nur noch die relevanten Bearbeitungsfunktionen für die jeweilige Nutzergruppe angezeigt – andere Gruppen sehen diese nicht mehr.
ENTFERNT: Nicht relevante Inhalte
Durch das Entfernen irrelevanter Prozesse aus der alten Ansicht werden Nutzer nicht mehr mit unnötigen Informationen oder Funktionen überladen. Zuvor wurden auch Prozesse angezeigt, die für die aktuelle Bearbeitung keine Relevanz hatten – das ist jetzt bereinigt und sorgt für mehr Fokus und Klarheit.
NEU: Anzeige von wichtigen Infos
Es gibt projektrelevante Informationen, die vorher nicht angezeigt wurden, den Anwendern jedoch sehr das Arbeiten erleichtern. Ich habe die Anzeige mit Tags umgesetzt, die die jeweiligen Inhalte labeln.
Ergebnis
Durch die Entkopplung des Prozesses und den vollständigen Neuaufbau entstand eine deutlich fokussiertere und nutzerzentrierte Lösung. Die neue Ansicht ist klar strukturiert, enthält nur relevante Inhalte – ergänzt um zuvor fehlende Elemente – und ermöglicht eine wesentlich direktere Navigation. Die Klickwege wurden deutlich reduziert, der Ablauf ist sofort ersichtlich und intuitiv bedienbar. So wird der Prozess nicht mehr von der komplexen Struktur der ursprünglichen Ansicht überlagert, sondern steht eigenständig und klar im Mittelpunkt.
