Evaluationstool für Klimaschutzmaßnahmen

Eckdaten

Kategorie: Studienprojekt

Zeitraum: April 2020 – aktuell

Aufgaben: Research, Design, Testing

Team: Hadi Özdemir (UX/UI), Manuel Zech (Entwicklung), Eike Matthies (Projektleitung)

Tools: Papier, Adobe XD, Slack, Mural, Google Docs, Trello

Idee

Das Evaluationstool für Klimaschutzmaßnahmen im betrieblichen und kommunalen Mobilitätsmanagement ermöglicht es betrieblichen oder kommunalen Mobilitästmanager:innen, etwaige Klimaschutzmaßnahmen, wie z.B. den Austausch von konventionellen Verbrennerfahrzeugen gegen e-Fahrzeuge zu planen und zu evaluieren. Ein besonderer Fokus wurde auf die Evaluation hinsichtlich eigens gesteckter Ziele oder nach Zielen der Bundesregierung (z.B. CO2-Einsparung, Kosteneinsparung etc.) gelegt.

Wie das Tool funktioniert

#1

Diese Seite begrüßt jeden Nutzer, wenn er die Website ansteuert. Wenn er schon registriert ist, kann er sich direkt einloggen.

#2

Sollte er sich nicht einloggen wollen, wird der Nutzende per Onboarding in vier Schritten über die Grundfunktionen des Tools informiert.

#3

Er registriert sich im Folgenden mit seiner E-Mail-Adresse und wird nach dem Login auf die Startseite des Tools weitergeleitet. Hier kann er über das Menü, das sich je nach Bildschirmgröße automatisch ausklappt, orientieren.

#4

Der Nutzende legt Klimaschutzziele an, um die später eigegebenen Maßnahmen danach evaluieren zu können.

#5

Als nächstes legt er eine Klimaschutzmaßnahme an. Die Übersicht ist über das Menü oder den prominent platzierten Button auf der Startseite zu erreichen.

#6

Dazu gibt er die Ausgangslage und die neue Maßnahme an.

#7

Über die Maßnahmenübersicht kann der Nutzende die Maßnahme hinsichtlich Kosten und Treibhausgaseinsparungen evaluieren. Hier kann er sich entscheiden, nach welchem der eingestellten Klimaschutzziele evaluiert werden soll.

#8

In der Gesamtstatistik kann er sich einen Überblick über die Entwicklung aller eingestellten Maßnahmen verschaffen.

#9

Außerdem hat der Nutzende die Möglichkeit, weitere Profile anzulegen, wenn es sich z.B. um eine Klimaschutzagentur handelt, welche die Maßnahmen mehrerer Kommunen/Unternehmen evaluiert und verwaltet.

Interessiert dich die Dokumentation dieses Projekts?

Hier erfährst du mehr!

Methoden & Prozess

Da das Team des Evaluationstools ein interdisziplinäres Team aus Entwickler:innen und Designer:innen verschiedener Fakultäten und Universitäten/Hochschulen ist, haben wir zu Beginn das Double Diamond Prinzip zugrunde gelegt, um sicherzustellen, dass alle Partizipierenden auf den Prozess fokussiert sind und das Problem Nutzerzentriert angehen.

Aufgrund der Corona-Pandemie finden unsere wöchentlichen Meetings per Zoom statt.

  • Methoden: Stakeholder Interview, Brainstorming, User Personas, User Journey Map, Elevator Pitch, Ecosystem Map, Bestandsanalyse, Wireframing, User Testing

Research

Anschließend wurde Research durchgeführt, um Bedürfnisse und Voraussetzungen der potenziellen Nutzer:innen herauszukristallisieren.

Interviews mit Expert:innen

Es wurden Experteninterviews mit Mitarbeiter:innen der Klimaschutzagentur Ebersberg-München durchgeführt, im Zuge derer wir die Möglichkeit hatten, Einschätzungen einzuholen, das Konzept zu validieren und weitere Anregungen zu bekommen. Insgesamt haben wir positives Feedback zu unserer Idee bekommen und wurden bekräftigt, das Konzept weiterzuentwickeln.

Bestandsanalyse

Im Hinblick auf die Entwicklung haben wir uns Tools angeschaut, die einen ähnlichen Funktionsumfang besitzen, oder die gleiche Zielgruppe bedienen sollen. Hierbei sind uns zwei Produkte, die die Evaluation von Klimaschutzmaßnahmen erlauben, besonders ins Auge gestochen. Bei dem einen Tool handelt es sich um eine Excel-Tabelle, die mittels Macros funktioniert. Der Nutzende trägt seine Daten ein und bekommt am Ende einen Output generiert. Hierzu muss er allerdings erst händisch in den Einstellungen das Ausführen der Macros erlauben, was zu mehreren Warnmeldungen seitens Excel führt und kein unerhebliches Sicherheitsrisiko für den Computer darstellt. Ein weiteres Tool war auch als Web-Anwendung umgesetzt, bot jedoch nicht den Funktionsumfang, welches unser Evaluationstool bietet. Des Weiteren war kein Tool in der Lage, eine grafische Auswertung der eingegeben Daten zu erzeugen.

Anhand anderer Tools und guter digitaler Services konnten wir einige Funktionsweisen mitnehmen, die in das Klimatool integriert worden sind. So ist z.B. das Menü feststehend und erscheint beim Laden der Seite ab einer bestimmten Bildschirmgröße (Tablet und kleiner) automatisch eingeklappt. Dadurch wird Platz gespart, aber auch die Übersichtlichkeit auf großen Bildschirmen bewahrt. Das Onboarding, wie schon in diversen Services gesehen, hilft dem Erstnutzenden, sich im Tool zurechtzufinden und gibt eine kleine Einführung.

Einige Insights:
  • #1 Professionals verwenden diese Art von Tools zumeist am Laptop oder Desktop-Rechner, also sollte eine Desktop-Umsetzung Priorität haben
  • #2 Es kann durchaus vorkommen, dass 10+ Maßnahmen eingegeben werden, deshalb sollten wir eine Möglichkeit zur individuellen Benennung und Filterung der Maßnahmen bieten
  • #3 Klimaschutz gewinnt auch im individuellen & privaten Bereich an Bedeutung, deshalb sollten wir Privatpersonen als Zielgruppe in Betracht ziehen
  • #4 Eine grafische Auswertung ist ein Alleinstellungsmerkmal und wichtig zur etwaigen Kommunikation der Klimaschutzmaßnahmen

User Tests

Zu einem gelungenen Research gehören natürlich auch User Tests. Die ersten Tests haben wir bereits in einem frühen Stadium mittels eines Adobe XD Prototypen durchgeführt. Hierbei ging es vor allem darum, den logischen Aufbau des Prototypen zu validieren und Insights hinsichtlich möglicher Verbesserungen zu generieren. Die Tests waren in zwei Abschnitte gegliedert. Zuerst wurde ein sogenannter Lo-fi Prototyp getestet. Hierbei ging es ausschließlich um die Benutzerführung und den bereits genannten logischen Aufbau des Produkts. Mit einem Designprototypen haben wir dann zusätzlich noch Feedback zur Gestaltung des Tools eingeholt. Außerdem dienten diese dazu, Edge-Cases herbeizuführen bzw. aufzudecken, um auf Grundlage dieser Insights das Tool weiter zu verfeinern. Durchgeführt wurden die Tests mittels Zoom oder anderer Videokonferenz-Software. Die Testperson hat dabei ihren Bildschirm freigegeben, sodass wir beobachten konnten, wie diese sich durch das Tool bewegt. Des Weiteren waren sie angehalten, ihre Aktionen ständig zu kommentieren und direkt zu sagen, was sie denken. Diese qualitativen Tests wurden mit insgesamt 8 Tester:innen durchgeführt.

Als ein funktionsfähiger Prototyp zur Verfügung stand, haben wir mit diesem eine zweite Testreihe gestartet. Hierbei stand vor allem das Testen der Berechnungsfunktionalität und der Plausibilität der Ein- und Ausgaben im Vordergrund. Auch hier steht der iterative Prozess im Vordergrund. Auf Grundlage des Feedbacks werden stetig Verbesserungen in das Tool mit aufgenommen. Hierzu arbeiten wir eng mit dem Entwickler zusammen.

Screenshot einer User-Test Session
Screenshot einer User-Test Session

Konzeptentwicklung

Das Problem

Die Idee zum Evaluationstool basiert auf dem Abschlussbericht zum Projekt „MAXIH“ aus Holzminden. Es existieren zwar mitunter bereits Tools zur Evaluation von Klimaschutzmaßnahmen, diese sind aber in der Regel nicht für den Endanwender konzipiert und benötigen ein Management durch eine Agentur o.ä. Die Herausforderung war, ein Tool zu entwerfen, welches es KMU und kleineren bis mittleren Kommunen ermöglicht, Klimaschutzmaßnahmen eigenständig zu planen und auf deren Wirkung und Erfolg hin zu evaluieren.

Brainstorming

Zuerst hat im Team ein Brainstorming stattgefunden, das wir aufgrund der Corona-Situation online durchgeführt haben. Damit hatten wir mit Mural ein ideales Tool, um verschiedene Vorstellungen mit „Post-its“ zu visualisieren. Außerdem gab uns das Tool die Möglichkeit, die Einträge am Ende anonym nach Wichtigkeit abstimmen zu lassen. Hier haben sich einige kritische Voraussetzungen und Herausforderungen herauskristallisiert, welche für die spätere Entwicklung essenziell waren.

Brainstorming in Mural

User Personas

Auf Grundlage der Interviews mit Expert:innen und der Konkurrenzanalyse haben wir User Personas erstellt, um eine Schnittmenge aus den potenziellen Nutzer:innen zu bilden und ihre Bedürfnisse und Herausforderungen bestmöglich in der Gestaltung der UX und UI berücksichtigen zu können.

User Journey Map

Sitemap / User Flow

Es wurde die grobe Struktur und Funktionalität des Tools mittels Post-its erstellt. Diese Methode hat sich bewährt, da sie eine schnelle Ideenfindung gewährleistet. Seitens des Entwicklers wurde eine Ereignisgesteuerte Prozesskette (EPK) erstellt. Auf Grundlage dieser und der von uns vorgeplanten groben Struktur haben wir eine Sitemap bzw. einen User Flow erstellt, um die Struktur des Evaluationstools detaillierter zu planen und die Erstellung von Lo-fi Wireframes vorzubereiten.

Die Sitemap bzw. der User Flow diente vor allem dazu, die Struktur des Tools auf eine für die nach den Personas angenommenen Benutzer:innen möglichst passgenau zu gestalten, bevor der Prototyp erstellt wird und grobe Änderungen in der Grundstruktur sehr aufwändig werden.

USP

Herausgearbeitet wurden die „unique selling points“ des Tools:

  • #1 Evaluation mehrerer Maßnahmen im Zeitverlauf
  • #2 Grafische Auswertung
  • #3 Soll-Ist-Vergleich
  • #4 Nutzerführung & Prozessvereinfachung

Visuelle Umsetzung

Sketching

Die visuelle Umsetzung haben wir mit einfachen Sketches auf Papier begonnen. Diese Methode hat den Vorteil, dass verschiedene Konzepte in kurzer Zeit ausprobiert werden können und Ideen schnell festgehalten werden können.

Erste Sketches auf Papier

Wireframing

Auf Grundlage dieser Sketches haben wir Lo-fi Wireframes in Adobe XD erstellt, die zuerst auf Schmuckelemente, wie z.B. Bilder und farbliche Gestaltung, verzichteten. Durch das Prototyping der Wireframes konnten bereits erste User-Flows getestet werden, bevor mit der Reinzeichnung des Prototypen begonnen wurde.

Prototyping

Infolgedessen haben wir mit dem Prototyping begonnen. Die Wireframes wurden durch uns mittels der im Styleguide festgelegten Schriften und Farben reingezeichnet. In Zusammenarbeit mit dem Projektteam wurden Inhalte in den Prototypen eingefügt. Die Verknüpfungen zwischen den verschiedenen Screens wurde finalisiert, um einen Clickdummy für die Testpersonen bereitstellen zu können. Insbesondere war hier die Herausforderung, die Verknüpfungen alle richtig und vollständig zu setzen, sodass die Testpersonen alle Links und Buttons im Clickdummy anklicken können.

Onboarding

Das Onboarding wurde von uns in das Tool eingebunden, um neuen Nutzer:innen einen niederschwelligen Start zu ermöglichen. Es enthält elementare Informationen zur Funktionsweise des Tools und gibt Auskunft über die weiteren Schritte.

Grafische Auswertung

Aus den Insights der Interviews und des Researchs ergab sich, dass eine grafische Auswertung der eingegebenen Maßnahmen ein wichtiger Baustein des Evaluationstools ist. Diese sollte vor allem einfach zu verwenden und hinsichtlich der individuellen Bedürfnisse anpassbar sein. Hierbei wurde ein Ansatz gewählt, der es sowohl erlaubt, auf den ersten Blick wichtige Informationen über den Zielerreichungsgrad der ausgewerteten Maßnahme zu erlangen, aber auch detailliertere Informationen und Auswertungen abrufen zu können. Diese sind zum einen in tabellarischer Ansicht, zum anderen in grafischer Ansicht, verfügbar. Die grafische Ansicht kann hinsichtlich relativer und absoluter Darstellung angepasst werden. Außerdem existiert die Möglichkeit, die Daten in tabellarischer Form (.xlsx und .csv) und grafisch (.pdf und .png) zu exportieren, um sie in andere Tools zu importieren, oder aber die Kommunikation der eigenen Ziele zu vereinfachen, indem die Daten als Handreichung weitergegeben werden oder in eine Präsentation eingebunden werden können.

Maßnahme anlegen

Für das Herzstück des Tools, die grafische Auswertung, ist es vorher notwendig, Maßnahmen (das ist z.B. das Ersetzen eines Golf TDI durch einen e-Golf) anzulegen. Die Eingabemaske hierzu sollte den Spagat aus Nutzerfreundlichkeit, Kompaktheit und Schnelligkeit schaffen. Deswegen wurde sie so strukturiert, dass alle Eingabefelder auf einen Blick zu erkennen sind, die notwendigen Eingaben aber auf ein Minimum reduziert sind. Dies wird Beispielsweise durch eine Datenbank erreicht, welche einige Faktoren direkt mit einbezieht. Hinsichtlich harter Fakten müssen nur Laufleistung in km, Anzahl der Fahrzeuge und Verbrauch eines Fahrzeuges angegeben werden. Dies erspart dem Nutzenden die Recherchearbeit und senkt die Schwelle zur Evaluation einer Maßnahme bedeutend. Gleichzeitig ist die kompakte Darstellung der Eingabemaske wichtig, um nicht zu viele Schritte zu erzeugen, durch die sich der Nutzende klicken muss.

Typo & Farbe

Um den Einsatz vom Typografie und Farbe innerhalb des Tools konsistent zu gestalten, haben wir einen Styleguide angelegt, nach dem wir uns beim Erstellen und Gestalten neuer Screens stets richten konnten.

Als Schriftfamilie in verschiedenen Schriftgraden zum Einsatz. Open Sans ist serifenlos und für den Einsatz auf Bildschirmen, also vor allem in digitalen Produkten, optimiert. Ihre Stärke ist ihre gute Lesbarkeit. Des Weiteren ist sie als freie Schriftfamilie auf Google Fonts verfügbar und somit gut für Webprojekte geeignet.

Als Primärfarbe kommt im Tool ein Petroleum-Farbton zum Einsatz. Dieser garantiert ein gutes Kontrastverhältnis bei weißer Schrift auf farbigem Hintergrund, wie es z.B. bei Buttons zum Einsatz kommt. Die Farbpalette hat sich im Verlauf der Toolentwicklung und der Tests geändert, worauf im nachfolgenden Abschnitt genauer eingegangen wird.

Verbesserungen am Prototyp

Auf Basis des Feedbacks und der Insights, die wir während der Tests des Tools mit Nutzer:innen generieren, wird der Prototyp stetig optimiert. Exemplarisch wird hier auf einige Schritte im iterativen Prozess eingegangen:

Profileinstellungen

In den Tests stellte sich heraus, dass die aktuelle Seite für Profileinstellungen für Verwirrung bei Nutzer:innen gesorgt hat. Es gab z.B. ein Eingabefeld für eine E-Mail-Adresse, mit Hilfe dessen man sein Profil für eine Agentur oder andere Personen freigeben kann. Das Design der Seite führte jedoch dazu, dass Nutzer:innen davon ausgingen, hier die eigene E-Mail-Adresse ergänzen zu müssen. Somit haben sie das Profil für sich selber freigegeben, was ggf. Datenverlust zur Folge hatte.

Außerdem gab es keine Möglichkeit, eine Übersicht über die aktiven Freigaben zu sehen. Somit wurde die Seite umgestaltet und während dieses Prozesses kontinuierlichen Tests unterworfen.

Überarbeitung der Gesamtstatistik

Die Gesamtstatistik wurde dem Feedback der Tester:innen folgend so überarbeitet, dass die einzelnen Maßnahmen, die bis dato nur über die Maßnahmenübersicht aufgerufen werden konnten, über die Tabelle in der Gesamtstatistik erreichbar sind. Somit muss der Nutzende nicht mehr so viele Klicks machen, wenn er von der Gesamtstatistik zu einer Einzelstatistik wechseln möchte.

Außerdem ist es nun möglich, durch das Setzen von Haken in der Tabelle zu entscheiden, welche Maßnahmen in die Gesamtstatistik mit einbezogen werden sollen.

Barrierearmut

Während der Weiterentwicklung des Tools und im Verlauf der Tests wurde die Primärfarbe geändert, um dem WCAG 2.1 Standard hinsichtlich des Kontrasts auf dem AA Level zu genügen. Hierbei ist ein Kontrastverhältnis von mindestens 4.5:1 bei normalem Text oder 3:1 bei Überschriften zu erreichen. Um unsere Farben zu testen, haben wir ein Online-Tool verwendet, welches das Kontrastverhältnis von Vordergrund zu Hintergrund ausgibt. In Folge des Ergebnisses haben wir die Farben etwas abgedunkelt, um auch Menschen mit eingeschränktem Sehvermögen barrierearmen Zugang zu unserem Tool zu ermöglichen.

Test neuer Farben und deren Kontrastverhältnis

Arbeitsaufteilung

ArbeitsbereichVerantwortliche Person
ExperteninterviewsHadi & Niklas
BestandsanalyseHadi & Niklas
Dokumentation Insights & ProzessNiklas
UserFlow / SitemapNiklas
User PersonasHadi & Niklas
SketchesHadi
WireframingHadi & Niklas
PrototypingHadi & Niklas
Typo & FarbeHadi & Niklas
LogoHadi
Prüfung Prototyp (Barrierefreiheit etc.)Niklas
Erstellung MockupsHadi

Anmerkung: Bei einigen Arbeitsbereichen ließ sich die Aufgabenteilung nicht genau herausarbeiten. Das liegt vor allem daran, dass es sich hierbei um ein Teamprojekt handelt und wir grundsätzlich miteinander im Austausch waren und gemeinsam gearbeitet haben. Das Co-Editing von Adobe XD hat es möglich gemacht, dass wir beide gleichzeitig an einer Aufgabe gearbeitet haben. Eine alleinige verantwortliche Person soll nicht bedeuten, dass der jeweils andere nicht daran mitgewirkt hat. Grundsätzlich lässt sich sagen, dass sowohl Hadi, als auch ich, versucht haben, zu gleichen Teilen an allen Disziplinen mitzuarbeiten.

Learnings

Was lief gut?

  • Know-how aus verschiedenen Disziplinen wurde zusammengebracht
  • Gute Projektplanung und Leitung durch Eike Matthies
  • Zusammenarbeit remote im Team funktionierte reibungslos
  • Positives Feedback von Praktiker:innen und Tester:innen
  • Zusammenarbeit mit Praxispartner/Tester:innen (Agenturen, Kommunen)
  • Verlassen der eigenen Komfortzone – sei es durch die Herausforderungen eines realen Projektes oder durch die Anwendung neuer Methoden, vor allem mit realen Partizipierenden
  • Das Anwenden neuer Online-Tools hat großen Spaß gemacht und war sehr lehrreich
  • Das Begleiten eines Projekts über nunmehr 2 Semester hat viele neue Erfahrungen hervorgebracht

Was war herausfordernd?

  • Remote User-Testing (bedingt durch Covid-19)
  • Sich bei der Skalierbarkeit und Erweiterung des Tools nicht zu verzetteln und fokussiert zu bleiben
  • Teilweise zähe Kommunikation per Mail mit Praxispartner/Tester:innen
  • Fehlfunktionen in digitalen Tools hinsichtlich der Zusammenarbeit in Echtzeit, vor allem in Adobe XD (Dokument kann nicht freigegeben werden, etc.)

Wie geht’s weiter?

Wir freuen uns, das Tool auch in Zukunft weiterentwickeln zu können. Aktuell arbeiten alle Beteiligten entweder freiwillig, im Rahmen von Seminar- oder Abschlussarbeiten oder mittels einer HiWi-Stelle am Evaluationstool.

Aktuell befinden wir uns im zweiten Testzyklus mit dem funktionsfähigen Prototypen, verbessern das Tool und erweitern es nach und nach um neue Funktionen.

Da die Entwicklung weitergeht, gerne am Ball bleiben!

Redebedarf?

Niklas Wilke
UX/UI Design Student

Kontakt

hi@niklaswilke.de