UI/UX für GREENZERO
Nachhaltigkeit trifft Design
Das Projekt
Die GREENZERO GmbH spezialisiert sich auf die Erstellung von Ökobilanzen für Unternehmen und deren Produkte. Im Rahmen eines Auftrags eines großen deutschen Handelsunternehmens sollte GREENZERO die Umweltauswirkungen einer Vielzahl von Hygieneprodukten analysieren (Life Cycle Assessment). makandra wurde als technischer Partner hinzugezogen und entwickelte eine maßgeschneiderte Software zur Durchführung der Ökobilanzierungen.
Designtechnisch lag ein besonderer Fokus darauf, für GREENZERO ein vollständig neues UI/UX-Design zu gestalten. Ziel war es, eine intuitive und effiziente digitale Plattform bereitzustellen, die den komplexen Prozess der Datenerhebung und -auswertung nicht nur erheblich beschleunigt, sondern auch durch eine klare und nutzerfreundliche Oberfläche erleichtert.
Zentrale Herausforderungen
- Informationsvielfalt in ein schlankes Design überführen
Die große Menge an Tabellen, Formularen und Modalen machte es herausfordernd, eine klare und intuitive Benutzeroberfläche zu gestalten, ohne den Informationsgehalt zu reduzieren. - Komplexe Workflows aus unterschiedlichen Systemen zusammenführen
Bisher verteilte und uneinheitliche Prozesse aus Excel, LCA-Datenbanken und anderen Systemen mussten in eine einheitliche, logisch strukturierte Software überführt werden. - Gute User Experience trotz hoher Komplexität sicherstellen
Trotz der umfangreichen Funktionen und Daten musste die Anwendung benutzerfreundlich bleiben – ein auf Userflows abgestimmter Aufbau, animierte Icons und ein integriertes Help Center waren daher essenziell.
Uns war es wichtig, dass die Dateneingabe Spaß macht, intuitiv ist und die Komplexität nicht immer im Vordergrund steht. Auch wissenschaftliche Software darf schick sein!
Video Individualsoftware für für eine reibungslose User Experience
Designprozess & Umsetzung
1. Verständnis entwickeln
Von Beginn an war es uns wichtig, ein tiefes Verständnis für LCAs, den Kunden, Workflows und die Vision zu gewinnen. Dafür haben wir intensiv mit GREENZERO und verschiedenen Usergruppen (LCA Consultants, Supplier, Clients) gesprochen, ihre bisherigen Prozesse analysiert und die Erkenntnisse in Organigrammen, Stoffsammlungen und Userflows strukturiert.
2. Wireframing & Prototyping
Wireframes sind schematische Entwürfe einer Benutzeroberfläche, die Layout, Navigation und Funktionalität visualisieren. Sie dienen als frühes Konzept, um die Struktur einer Anwendung zu planen, bevor Design und Details ausgearbeitet werden.
Unsere Ideen zur Struktur, Navigation und Workflows wurden in Wireframes überführt, zu Prototypen verknüpft und in enger Abstimmung mit dem Kunden iterativ optimiert.
3. Mockups & Moods
Auf Basis der Wireframes entstand der erste Design-Entwurf, angelehnt an die Corporate Identity von GREENZERO. Diese Moods bildeten die Grundlage für das Design System und erste UI-Komponenten.
4. Design System & Screen Designs
Das Design System definierte Farben, Typografie, Icons und Layouts, aus denen UI-Komponenten wie Buttons, Inputs und Tabellen entstanden. Diese Komponenten wurden anschließend in vollständige Screen Designs integriert. Das Design System wuchs während des gesamten Projekts kontinuierlich weiter und half dabei, ein konsistentes Erscheinungsbild und eine einheitliche User Experience über die gesamte Software hinweg sicherzustellen.
5. Optimierung & Feinschliff
Mit zunehmender Projekttiefe tauchten neue Herausforderungen auf. Das Design wurde laufend optimiert, teils verworfen oder überarbeitet. High-Fidelity-Prototypen halfen, komplexe Abläufe zu testen, während Kunden und User aktiv eingebunden wurden, um Flows gezielt zu verbessern.
Gutes UI/UX-Design braucht ein echtes Verständnis fürs Thema, die Workflows und die Vision des Kunden. Durch den engen Austausch mit dem Kunden und den Nutzern der Anwendung haben wir eine Lösung entwickelt, die für alle perfekt passt.
Unsere Design-Lösung für GREENZERO
Fokus auf Nutzerfreundlichkeit und intuitive Bedienung
- Intuitive Navigation aufgrund logischer Workflows
- Auflockerung der Anwendung und Nutzerführung durch eine klare Iconsprache und Mikroanimationen
- Integration eines Helpcenters, um den Nutzer*innen die Anwendung zu erklären und den Einstieg zu erleichtern
- Dashboards zur schnellen Übersicht der Aufgaben je nach Nutzergruppe
- Grafische Auswertung der Bilanzierung
Ästhetik trotz datenintensiver Inhalte
- Dark-Mode mit leuchtenden Akzenten unterstützt zusätzlich die Energieeffizienz
- Farbig animierte Icons
- Nutzung der Interaktionsfarbe “water” aus den Grundfarben von GREENZERO sowie weiterer Highlight-Farben aus der CI des Unternehmens
Barrierefreiheit für eine inklusive Nutzung
- Ausreichend hohe Kontraste für bessere Lesbarkeit
- Vollständige Tastaturbedienung zur Unterstützung unterschiedlicher Nutzungsszenarien
Strukturierte Datenvisualisierung und Prozessdarstellung
- Strukturierten Visualisierung durch Tabellen und Diagramme
- Aufteilung mehrstufiger Prozesse in kleinere Schritte oder Tabs
- Statusanzeigen mit Icons und Farben, um Informationen auf einen Blick erfassbar zu machen
- Verstärkte visuelle statt textbasierte Führung durch die Anwendung
- Visuelle Ausarbeitung verschiedener Prozessstatus, um den Nutzer*innen direkt wichtige Informationen zu liefern
In diesem Projekt haben wir zusammen mit makandra ein eigenes Design-System entwickelt. Das UI/UX-Team hat dort fantastische Arbeit geleistet.
Screendesigns Einblicke ins Projekt
Bei diesem Projekt hatten wir die Freude, mit einem langjährigen Wegbegleiter zusammen zu arbeiten: Jens Vogel in der Rolle als Product Owner.
Projektumfang Unsere Designleistungen für GREENZERO
