Die Phasennavigation ordnet den aktuellen Bearbeitungsstand ein.
01 Bestehendes Produkt
Die Oberfläche
zusammenführen.
intilio sollte aus dem eigenen Arbeitsumfeld heraus auch für andere Unternehmen nutzbar werden. Der Wunsch nach mehr Struktur betraf damit sowohl die Oberfläche als auch die Führung durch die Arbeit: Die Anwendung sollte verständlich vermitteln, wo ein Projekt steht und welche Aufgaben dazugehören.
Wir konsolidierten vorhandene Screens, Layouts und Interaktionsmuster. Listen, Tabellen, Detailansichten und Systemzustände erhielten eine gemeinsame gestalterische Grundlage. Dazu gehörte auch, die Übersicht über mehrere Projekte von der Arbeit innerhalb eines einzelnen Projekts zu unterscheiden.
Die Projektübersicht macht die erste Ebene sichtbar: Suche und Phasenfilter helfen, einen relevanten Vorgang zu finden. Einheitlich aufgebaute Projektkarten ordnen Verantwortlichkeiten und Statusinformationen. Innerhalb eines Projekts übernimmt anschließend der geführte Ablauf die Orientierung.
02 Mein Konzeptvorschlag
Projektphasen mit
konkreten Aufgaben verbinden.
Ich stellte dem Kunden einen Flow vor, der Projektphasen mit konkreten Aufgaben verbindet. Die Phase gibt den übergeordneten Rahmen vor; die zugehörigen Karten beschreiben die Arbeit innerhalb dieses Rahmens. Gemeinsam mit meinem Team arbeitete ich den Ansatz als „Project Navigator Lite“ aus.
Das lässt sich an der Phase „Anfrage“ nachvollziehen. Hier kommen mehrere unterschiedliche Aufgaben zusammen: Sind die Unterlagen vollständig? Soll die Zusammenarbeit stattfinden? Wie wird die Erstberatung vereinbart? Der Entwurf ordnet diese Fragen nebeneinander an und verbindet sie mit passenden Aktionen.
Die horizontale Navigation hält den weiteren Verlauf sichtbar, von der Anfrage bis zum Projektabschluss. Innerhalb der Phase stehen Aufgabenstatus und konkrete Handlungsmöglichkeiten. Damit erhält die abstrakte Forderung nach „mehr Struktur“ eine bedienbare Form.
Aufgabenkarten machen ausstehende Entscheidungen und Schritte sichtbar.
Erinnerungen und Terminvorschläge sind direkt an die jeweilige Aufgabe angebunden.
03 Eine Aufgabe im Detail
Unterlagen nachfordern.
Den Bearbeitungsstand erkennen.
Die Karte „Unterlagen vollständig“ zeigt, wie der Flow bis in einzelne Zustände ausgearbeitet ist. Im gezeigten Entwurf fehlen noch Unterlagen. Direkt darunter liegt die Aktion „Erinnerung senden“; zusätzlich wird angezeigt, ob bereits eine Erinnerung verschickt wurde.
Der Versand einer Nachricht und das Erledigen der Aufgabe bleiben getrennt sichtbar. Eine Erinnerung zu verschicken bedeutet schließlich noch nicht, dass die benötigten Unterlagen vorliegen. Die Karte enthält deshalb neben dem Versandstatus einen eigenen Abschluss der Aufgabe.
Dasselbe Prinzip findet sich bei der Terminfindung: Terminvorschläge versenden, den Versand erkennen und die Aufgabe als erledigt markieren sind eigene Elemente. Diese konkrete Ausarbeitung verbindet fachliche Arbeit, Kommunikation und Fortschritt in einer Ansicht.
04 Hilfen im Ablauf
Kommunikation im
Projektkontext vorbereiten.
Zur Projektarbeit gehören wiederkehrende Nachrichten an Kunden und Partner. Wir arbeiteten E-Mail-Vorlagen im Kontext der jeweiligen Phase aus. In der Angebotsphase stehen beispielsweise eine Nachricht zum fast fertigen Angebot, eine Terminverschiebung und Anfragen bei Partnern zur Verfügung.
Die Ansicht berücksichtigt dabei auch Abweichungen vom geplanten Verlauf: Eine Vorlage behandelt den Fall, dass die Angebotserstellung zurzeit nicht möglich ist. Gesendete Nachrichten zeigen Zeitpunkt und Absender, andere bleiben als „Nicht gesendet“ erkennbar. Die Oberfläche verbindet damit den Anlass einer Nachricht mit ihrem Bearbeitungsstand.
Empty States und kurze Einstiegshilfen ergänzten den ausgearbeiteten Umfang. Sie sollten auch dort Orientierung geben, wo noch keine Inhalte oder Einträge vorhanden sind.
05 Zusammenarbeit & Übergabe
Das Konzept führen.
Im Team ausarbeiten.
Ich übernahm die Projekt- und Designleitung auf userdoo-Seite und gestaltete gemeinsam mit dem userdoo-Team. Der von mir vorgestellte Flow gab der weiteren Ausarbeitung eine konkrete Richtung.
Die Ausarbeitung entstand mit meinem Team und in iterativer Abstimmung mit Kunde und Entwicklung. Aus dem Flow wurden konkrete Layouts, Komponenten und Zustände sowie Spezifikationen für die Umsetzung.
Mein Beitrag verband damit zwei Ebenen: den konzeptionellen Vorschlag für die Projektführung und die Verantwortung dafür, dass die gemeinsame Ausarbeitung diese Richtung bis in Aufgaben, Nachrichten und Zustände fortführt.
Verantwortung im Projekt
Mein Beitrag
Flow-Konzept, Designleitung, Kundenabstimmung und eigene Gestaltung
Tommy Haacke und Team
Gemeinsame Ausarbeitung der Oberflächen und Spezifikationen
Zusammenarbeit mit der Entwicklung
Iterative Abstimmung zur Umsetzung der Entwürfe
Ergebnis
Eine UX-Grundlage für das SaaS-Angebot.
Der Kunde erhielt ein konkretes Bedienkonzept für die Öffnung seines internen Werkzeugs an weitere Unternehmen. Der Project Navigator Lite zeigt je Phase, welche Aufgaben erledigt sind, welche Unterlagen fehlen und welcher Schritt folgt. Ausgearbeitete Screens und Spezifikationen machten diesen Ablauf für die Entwicklung nachvollziehbar.
Konsistente Ansichten
Layouts, Komponenten und Interaktionsmuster als Basis für die weitere Produktentwicklung.
Project Navigator Lite
Phasen, Aufgaben und nächste Aktionen in einem zusammenhängenden Ablauf.
Spezifikationen & Abstimmung
Ausgearbeitete Screens und Zustände als Grundlage für die Zusammenarbeit mit der Entwicklung.
