blueplant - Die App für professionelle Raumbegrüner

Farbanpassung des CRM-Redesign im neuen Erscheinungsbild

Die Einführung von Grün als Akzentfarbe stieß gleichzeitig das größere Redesign des CRM-Systems an. Um diese Farbfindung zu erleichtern, haben wir uns damals sogar in das Buch "Das ABC der Farbe: Theorie und Praxis für Grafiker und Fotografen" eingelesen.

Parallel dazu habe ich das CRM-System überarbeitet und dafür Prototypen sowie Mockups entwickelt, deren Umsetzung anschließend im Team erfolgte. Das war dabei weniger eine nutzerforschungsbasierte UX-Neugestaltung im engeren Sinne, da hierfür kein User Research stattgefunden hat, sondern beruhte in erster Linie auf etablierten Design-Prinzipien und einer heuristischen Bewertung der bestehenden Oberfläche. Im Ergebnis orientiert sich die Oberfläche deutlich stärker an der neuen Designsprache und wirkt dadurch fokussierter als die vorherige Version.

Aus dieser heuristischen Prüfung sind bereits erste Optimierungsvorschläge entstanden, die sich anschließend im Redesign umsetzen ließen, etwa für die Kundenübersicht: eine klarere Abgrenzung von Navigation und Inhalt durch Kontrast, ein aussagekräftigerer Status statt eines einfachen Häkchens sowie eine überarbeitete Paginierung. Bei dem gezeigten Vorschlag handelt es sich um ein von mir in Figma erstelltes High-Fidelity-Mockup.

Die Kundenübersicht im Ist-Zustand und als Figma-Mockup mit klarerer Abgrenzung von Navigation und Inhalt sowie aussagekräftigerem Status.

Zu meinen Aufgaben gehörte unter anderem auch, dem Marketing Mockups bereitzustellen, zu bearbeiten und zuzuschneiden. Dafür habe ich mit den zur Verfügung stehenden Ressourcen eigene Mockups erstellt, um die Bewerbung des Produkts zu ermöglichen.

UI-Design der Produktdetailseite

Nach der Webseite lag mein nächster Schwerpunkt auf dem CRM-System, konkret der Produktdetailseite. Diese war wenig übersichtlich, sodass Nutzer:innen nicht alle Informationen auf einen Blick erfassen konnten, dazu kamen teils große Weißabstände. Vor allem aber war nicht klar erkennbar, welche Informationen und Aktionen für Nutzer:innen überhaupt relevant sind, da wir zu diesem Zeitpunkt noch keine Metriken erhoben, um zu erkennen, wie oft welches Feld tatsächlich genutzt wird. Ich habe deshalb aus heuristischer beziehungsweise Expertensicht eingeschätzt, welche Informationen sofort sichtbar sein sollten und was vermutlich seltener gebraucht wird. Auf dieser Grundlage habe ich die Produktfotos weiter unten platziert, den Weißraum durch das Auslagern beziehungsweise Streichen einzelner Eingabefelder reduziert, farblich stärker mit Hierarchie gearbeitet und die Pflegehistorie in einen eigenen Tab ausgelagert, da Nutzer:innen sie der Hypothese nach nicht immer sofort benötigen.

Toolbars mit derart vielen Items gilt es in der Praxis eigentlich zu vermeiden. Da es im Team zu unterschiedlichen Hypothesen zur tatsächlichen Nutzung kam, entschieden wir uns aber für die vollständige Darstellung, bis eine Datengrundlage zur Nutzung geschaffen wurde, unter anderem über die inzwischen implementierten Metriken und Event-Tracking. Meine Empfehlung ist deshalb, nicht direkt in die UI-Umsetzung zu gehen, sondern vorher zu klären, wie eine Funktion tatsächlich genutzt wird, und das immer auch gegen Aufwand, Mehrwert und Risiko abzuwägen: Bei geringem Risiko und geringem Aufwand kann eine Änderung auch ohne vollständige Datenlage sinnvoll sein, bei hohem Aufwand ohne klaren Mehrwert oder hohem Risiko eher nicht.

Die Produktdetailseite vor dem Redesign und danach, mit Tabs statt langer Scrollstrecke.