Beginn des Semesters

Da von Anfang an klar war, dass wir uns in diesem Kurs auf ein einziges Projekt konzentrieren würden, fiel (auch durch Corona) die Einführung des Kurses sehr kurz aus und wir begannen schnell mit der Ideenfindung. 

Es gab ein paar Themen zur Auswahl, eigenen Themen konnten wir uns allerdings auch aussuchen. Tim Hönig und ich entschieden uns dann gemeinsam für ein Projekt, dass Lösungsansätze für die Reduzierung des Co2-Ausstoßes präsentierte.

Ansprüche an unser Projekt

Zu Beginn des Projekt wurde uns klar, dass ein klassischer Co2-Rechner bereits eine Analyse und damit auch Verhaltensänderung zur Co2-Reduzierung möglich machte. Allerdings setzen diese meist die Eingabe von großen Mengen an Informationen durch den Nutzer voraus. Ferner sind sie visuell meist schwach und wie ein Formular gestaltet, was einen schnellen Eindruck beim Nutzer verhindert. Als Paradebeispiel sei hier der CO2-Rechner des Umweltbundesamtes genannt.

Personalisierbarkeit

Damit der Nutzer sich angesprochen fühlt, reichte es uns nicht den „Durchschnittsdeutschen“ zu analysieren. Wir entschieden uns für 3 exemplarische Verbraucher*innen: Niedrig, Mittel und Hoch. Über die Berechnung des Verhaltens der einzelnen Nutzer führten wir Buch, um am Ende unsere Quellen nachvollziehbar offenlegen zu können. 

Interaktiv, aber minimal

Neben der Auswahl der Verbraucher*innenpersona kann das Verhalten vor und nach dem Ergreifen von CO2-sparenden Maßnahmen betrachtet werden. Es gibt also insgesamt 2 mal 3 Verhaltensmuster, die verschiedene CO2-Ausstöße haben. Mehr Informationen vom Nutzer abzuverlangen hielten wir für eine zentrale Schwäche der existierenden CO2 Rechner. Damit war für uns hiermit genug Personalisierbarkeit und Interaktivität gegeben.

Nachvollziehbarkeit

Neben der Offenlegung unserer Berechnungen und Quellen in einem zentralen Dokument, beschlossen wir jede Maßnahme mit einer Erklärung zu versehen. Was genau „Einbau einer Heizpumpe“ für Implikationen hat, ist nicht jedem klar. Ebenso wichtig ist es bei „Nutzung von Ökostrom“ anzumerken, dass die aktuelle Energieinfrastruktur von Deutschland gar nicht jeden Haushalt mit Ökostrom versorgen könnte.

Visualisierung

Da C02 Berechnungen sich hauptsächlich mit Zahlen beschäftigen (duh!) können sie abschreckend wirken. Da Menschen Mengen am besten visuell vergleichen können, entschlossen wir uns statt Zahlen Icons („Units“) zu verwenden.

Designprozess

Arbeitsweise

Basierend auf diesen Voraussetzungen begannen wir mit einem iterativen Designprozess. Da die gesamte Projektarbeit Remote stattfinden musste, beschlossen wir wöchtlich seperate Designs anzufertigen. Jede Woche hielten wir Rüchsprache, verglichen unsere Ansätze, hielten fest was bleibt und wiederholten diesen Prozess. So hatten wir stets Alternativen, fuhren uns nicht fest und drifteten trotzdem nicht auseinander.

Designiterationen

Nach einem kurzen Intro-Screen wird der Nutzer mit einer Übersicht über den unveränderten CO2-Verbrauch der Persona konfrontiert. Eine Aufschlüsselung in verschiedene Kategorien (Energie, Mobilität, etc) mit kurzen Anmerkungen zum entsprechenden Verhalten (Art der Heizung, Fahrzeug, etc) konkretisiert diese.

Zu Beginn des Prozesses experimentierten wir mit übergroßer Typografie, um die Eindrücklichkeit der Grafik zu verbessern, allerdings verwarfen wir diese Idee, da sie das Layout schwierig machte und keinen anderen Vorteile bot.

Da wir zu Beginn einige Maßnahmen identifizierten, die eine Reduzierung in mehreren Kategorien verursachte, gingen wir davon aus, dass wir dies konsequent in unserem Design berücksichtigen müssten. 

Später stellte sich heraus, das dies nur bei sehr wenigen Maßnahmen der Fall sein würde. Diese Designrichtung wurde also verworfen.

Die Kontextualisierung mithilfe der 2015 in Paris beschlossenen deutschen Klimaziele war uns ebenfalls wichtig. Ob dies in die bestehende Grafik integriert werden sollte oder am Ende angemerkt würde, war lange ein vieldiskutierter Punkt.

Wo der Nutzer die Persona auswählt, ob es eine Standardpersona gibt, die von Anfang an ausgewählt ist und ob es am Ende der Seite einen Prompt geben würde, es mit einer anderen Persona erneut zu durchlaufen, war ebenfalls lange unklar.

Abgesehen von diesen Kernfragen variierten wir den visuellen Stil des Projekts fast wöchentlich. Wir hatten uns zu Beginn darauf geeinigt, konkrete visuelle Gestaltungsfragen wir Icons, Farben, Fonts und auch einige Layout-Entscheidungen erst in der Endphase zu entscheiden. Damit sind wir gut verfahren und konnten so schnell iterieren und uns auf das Wesentliche konzentrieren.

Das finale Ergebnis

Gegen Ende fügten wir alle Bausteine zusammen und erstellten einen Klickprototypen, der sich wie eine Webseite durchscrollen lässt.

Umsetzung als Webseite

Voraussetzung für das Bestehen des Kurses war ein Klickprototyp. Da wir allerdings von der Eindrücklichkeit unserer Seite überzeugt sind und sich die Interaktivität auf ein Minimum beschränkt, beschlossen wir sie als Webseite live zu stellen. 

Hierfür benutzten wir Webflow, dessen Einpflegung größtenteils Tim übernahm (🙏), währen Jonathan Exporte anfertigte. Zwar macht Webflow viele Probleme des Webseiten bauens sehr viel erträglicher, allerdings ist es immer noch wesentlich einfachen einen Klickprototyp in Sketch anzufertigen. Wir verbrachten also einen weiteren Monat mit der Umsetzung, sind aber mit dem Resultat sehr zufrieden.

👉https://interface.fh-potsdam.de/klimagrafik/minimizecarbonfootprints/ 👈