Hallo, ich bin Anne.

Durch vorhergehende Interviews hatten wir bereits Empathy Maps der Nutzer*innen zur Verfügung. Für die gegebene Aufgabe haben wir erneut User Interviews durchgeführt und ausgewertet.

Für die Research Phase hatten wir uns für folgendes Vorgehen entschieden:

• Planung und Durchführung von circa 30-minütigen User Interviews
• Dokumentation der Interviews in unserer eigens erstellten Notion User Research Datenbank
• Ableiten und Priorisieren von Findings in einer Impact-Effort-Matrix
• Vorstellen der Ergebnisse vor Stakeholdern und Produktmanagement
• User Stories und Epics in Jira anlegen

Um die Findings zu beheben, hatten wir unter anderem folgende Änderungen vorgenommen:

• Tabs die inhaltlich zusammen gehören wurden zu sogenannten „Akten“ zusammengefasst. Somit öffnete nicht mehr jedes Objekt einen eigenen Tab, sondern innerhalb einer Akte konnten User nun durch die dazugehörigen Objekte navigieren.
• Zur Navigation innerhalb der Akten wurde die bereits vorhandene hierarchische Darstellung von Objekten genutzt und nach links in ein gut sichtbares, einklappbares Panel verschoben. Das aktuell geöffnete Objekt wird nun hervorgehoben.
• Die Objektsuche samt Suchergebnissen wird nicht mehr als Modal, sondern als Sicht in einem Tab angezeigt. Nutzer*innen können somit jederzeit zu ihren Suchergebnissen zurückkehren und mehrere Objekte aus der Liste öffnen. Die Objektsuche ist über ein neu eingeführtes Hauptmenü zu erreichen.
• Die Liste verfügbarer Filterkriterien kann nun durchsucht werden. Felder zur Eingabe von Suchbegriffen passen jetzt zu den erwarteten Werten, z.B. Multi Select für Auswahllisten und Date Picker für Datumswerte. Des Weiteren wurden die Filter um eine Vergleichsoperatoren-Auswahl erweitert, welche es ermöglicht die Suchergebnisse genauer einzuschränken.

Anhand der in Figma entstandenen Prototypen führten wir erneut interne User Tests mit Teilnehmer*innen der vorherigen Interviews durch. Das Ergebnis bestätigte eine deutliche Verbesserung der Usability.

Nach Abstimmung mit Stakeholdern und Produktmanagement haben wir ausführliche Spezifikationen, Stories und Epics passend zu den Entwürfen erstellt. Wir haben die Machbarkeit mit Frontend & Backend Entwickler*innen abgestimmt und sie auch während des Entwicklungsprozesses begleitet.

Ich war für dieses Projekt als UX / UI Designerin sowie Product Owner verantwortlich und habe im letzten Schritt die entwickelten Features abgenommen.

Zu Beginn der Erstellung des Design Systems habe ich die folgenden Grundlagen in Figma angelegt:

• Farbpalette – Zwei Hauptfarben des Unternehmens (Schwarz und Gelb), passende Abstufungen, Grautöne, sowie vier zusätzliche Auszeichnungsfarben, für Status wie Information, Erfolg, Warnung und Fehler
• Eigens entwickeltes Iconset – 230 Icons in einer Outline Version und einer Version zur Hervorhebung mit passender farblicher Hinterlegung
• Set an Typografie Styles – Um Hierarchie und Bedeutung von Text durch verschiedene Schriftstile darzustellen

Für alle erstellten Komponenten wurde eine ausführliche Spezifikation geschrieben und jeweils mit Beispielen versehen. Diese diente einerseits dazu, dass alle UX / UI Designer die am Projekt beteiligt waren genau einsehen konnten, wie und wann welche Komponenten eingesetzt werden und welche Ausprägungen sie haben können. Andererseits stellte die Spezifikation die Grundlage zum Austausch und Handover mit den Frontend Entwickler*innen zur Entwicklung der React Component Library dar. Dazu wurde in der Spezifikation unter anderem auch die Tastatur­steuerung und komplexes Verhalten beschrieben, wie das Ausführen einer Suche in verschiedenen Komponenten, Sonderfälle wie Error / Empty States oder das Konfigurieren von Tabellen.

Die Spezifikation einer Komponente enthielt jeweils die Kategorien:

• Anatomie
• Status/Varianten
• Platzierung
• Verhalten

Die benötigten Anforderungen an das User Interface wurden größtenteils vom Product Owner des Teams vorgegeben. Erkenntnisse aus User Research sowie ein Design System wurden von einem dedizierten, zentralen UX / UI Team des Projekts bereitgestellt. In englischsprachigen Design Gilden Meetings wurden Entwürfe, Anforderungen und Updates von jeder Domain mit dem zentralen UX / UI Team besprochen.

Die Umsetzung der Mockups und Prototypen erfolgte mit Sketch und die Versionierung der Dateien geschah via Abstract. Die Entwürfe wurden außerdem in regelmäßigen Scrum Review Meetings dem Team und Stakeholdern vorgestellt.

Kartenfunktionen zu gestalten und umzusetzen war eine spannende Aufgabe, besonders in Hinblick auf das Zusammenspiel von Interaktion in und UI Elementen neben der Karte. Dabei ist hoher Abstimmungsbedarf mit Entwickler*innen und ausgiebiges Testen nötig, da viele Kartenfunktionen nur schwer oder gar nicht in Prototypen abbildbar sind.

Eine weitere Herausforderung war die Organisation und Entwicklung einer einheitlichen User Experience über viele Teams hinweg. Um beispielsweise Icons, Erweiterungen von Komponenten oder gar gänzlich neue Komponenten in das Design System aufzunehmen, war umfangreiche Kommunikation nötig, da dies stets von der Design Gilde und dem zentralen UX / UI Team mitentschieden und umgesetzt wurde.