HIKA

Eine moderne App, die dir dabei Hilft, entspannt durch den öffentlichen Nahverkehr zu kommen. Dazu noch ein Klima-Feature, das dir deine Fehltritte so richtig vor Augen führt und dich dazu animiert, das Auto öfter mal stehen zu lassen. Wie hört sich das an?

In diesem Seminar haben wir uns mit der Frage beschäftigt, wie wir als Interaction Design Studierende unseren Beitrag zum Klimaschutz leisten können. Die Antwort liegt förmlich auf der Hand: Eine App muss her!

Wer sind wir und von wem stammt die geniale Idee?

Das Projekt in seiner Endform war eine Gruppenarbeit von Helena Müller und Niklas Wilke. Die Idee, eine neu gestaltete App für den ÖPNV zu machen (in Gedanken an alle Leidensgenossen in Hildesheim, wir denken an euch), stammt von Niklas. Den ausgezeichnet dazu passenden Klima-Aufsatz hat Helena entworfen. Darum dachten wir uns: Ideen vereinigen, warum nicht? Dazu aber später mehr.

Brainstorming

Zuallererst hat im Rahmen des Kurses ein allgemeines Brainstorming stattgefunden. Jeder hat seine Assoziationen zum Thema Klimaschutz an das Whiteboard geschrieben. Es wurde über verschiedenste Ideen diskutiert.

Ideenfindungsprozess Klima Helena

In meinem Familien- und Bekanntenkreis habe ich gemerkt, dass noch gar nicht alle vom Klimaschutz überzeugt sind, wie man das in unserer linksgrünen Designerbubble vielleicht meinen könnte. Also habe ich mir Gedanken dazu gemacht, wie man denn überhaupt mehr Milieus auf das Problem aufmerksam machen kann. Nachdem ich zuerst an eine Art Virtual Reality Game in Berufsschulen gedacht habe, wollte ich doch in Richtung App gehen.

Für das VR Game war meine Idee, dem User die Grad Celsius Klimaerwärmung durch ein Spiel vor Augen zu führen. Je nachdem wie er sich im Spiel verhält, würde sich seine virtuelle Welt um eine bestimmte Temperatur erwärmen.  (https://www.nabu.de/umwelt-und-ressourcen/klima-und-luft/klimawandel/11420.html)

Die Idee behielt ich bei und wollte erst einmal lokal in Hildesheim einen Wettbewerb über grüne Mobilität starten, bei dem man Preise gewinnen kann. Durch  den jeweiligen CO2 Verbrauch in der Mobilität, würde man monatlich eine bestimmte Erderwärmung erreichen. Innerhalb der App sollte man Zugriff auf seine Statistiken, seinen Rang innerhalb von Hildesheim und auf Informationen zum Klimawandel haben.

Ideenfindungsprozess ÖPNV Niklas

Als das Thema Klimaschutz verkündet wurde, musste ich direkt an die Bedeutung des ÖPNV im Hinblick auf den Klimaschutz denken. Eine Reduzierung des Individualverkehrs würde einen großen Beitrag dazu leisten. Eine kleine Umfrage meinerseits hat gezeigt, dass die Unzuverlässigkeit und Unbequemlichkeit des ÖPNV, insbesondere des Busverkehrs im Raum Hildesheim, ein großes Hemmnis ist. So verwenden Menschen, die durchaus bereit wären, den Bus zu nehmen, doch lieber ein Auto, da sie sich bei dem Bus nicht auf die Pünktlichkeit verlassen können bzw. immer mit einem Ausfall rechnen müssen. Dies deckte sich mit meinen eigenen Erfahrungen. Meine Idee war eine App, in der man live den Standort des Busses nachverfolgen kann, die sich einfach und ohne Einarbeitung bedienen lässt und dem Nutzer überdies einen digitalen Ticketkauf ermöglicht.

Designprozess Klima Helena

Vom Anfang bis zum Ende hat sich relativ wenig geändert. Die Hauptstruktur sollten runde Cards bilden. Auf der Hand lag ohnehin schon die Farbe Grün. Auf der Startseite sollte man direkt von einem runden Graphen begrüßt werden, der den eigenen Verbrauch visualisiert. Die Rangliste sollte einem Auskunft über den Hildesheimer Wettbewerb geben und seine eigene Position deutlich machen. Unter Verbauch könnte man dann seine genaue Mobilität verfolgen, die durch die Standortangabe möglich gemacht wird.

Letztlich kann man nun also auch über seinen erreichten Wert Infos einholen und generelle Tipps und Tricks zum Klima- und Umweltschutz einholen.

Research ÖPNV

Im Vorherein habe ich mir angeschaut, welche Apps es diesbezüglich bereits auf dem Markt gibt und welche Features gut oder schlecht umgesetzt worden sind. Ein Beispiel für eine Bestandsanalyse anhand der App „Citymapper“ ist unten zu sehen. Daraus konnte ich viele Dinge mitnehmen, welche in meine App integriert werden sollen. Auch konnte ich einige Fehler gleich im Vorherein vermeiden.

Auch habe ich eine Customer Journey Map erstellt, um Anforderungen und Probleme der Benutzer zu identifizieren.

Designprozess ÖPNV Niklas

Zuerst habe ich einige Skizzen auf Papier erstellt, um schnell meine Idee visualisieren und kommunizieren zu können. Auch bei mir basierte das Design von Anfang an auf Cards, die sich vom Hintergrund abheben und ein klickbares Element visualisieren. Auf dem Startbildschirm sollte der Benutzer direkt die Möglichkeit haben, sich eine Verbindung zu suchen. Wenn die verschiedenen Möglichkeiten gezeigt bekommt soll ebenfalls angezeigt werden, wo sich welche Busse in der Umgebung befinden. Außerdem sollte die Ankunftszeit des Busses an der Haltestelle live aktualisiert werden. Diese Skizze resultierte in einem Prototypen, der in Adobe XD erstellt worden ist. Innerhalb des Prozesses war es nötig, das Design und die Funktionen immer wieder mit etwas Abstand zu betrachten, aber auch nicht involvierte Personen testen zu lassen. Aus diesen kleinen Tests konnte ich gutes Feedback bezüglich der Funktionen der App generieren.

Der Prototyp

Nachdem der Beschluss gefasst war, die beiden Ideen in einer App zu vereinen, haben Helena und ich uns zusammengesetzt, um den Aufbau der App und die Integration der verschiedenen Funktionen zu besprechen. Glücklicherweise unterschieden sich unsere Designs nicht maßgeblich voneinander, sodass eine Integration keine allzu große Hürde war. Neu entstanden sind im Zuge dessen die Menüleiste unten. Die Startseite wurde auch leicht überarbeitet, um das Klimadiagramm zu integrieren.

Styleguide

Nachdem wir unsere beiden Ideen zusammengeführt hatte, haben wir einen Styleguide entwickelt, um die Designs der Screens möglichst einheitlich zu halten.

Der Prototyp zum Testen

Der Prototyp steht als Clickdummy unter folgendem Link zum Testen bereit:

https://xd.adobe.com/view/0d994b92-3a18-4349-6ed6-d7b13f245c49-7ba8/?fullscreen

Fazit

Im Designprozess ist uns bewusst geworden, dass das Designen eines Services bzw. einer App keine leichte Aufgabe ist und ein großes Maß an Empathie für den User vorraussetzt. Außerdem ist Research unbedingt notwendig, man sollte sich nicht von seinen eigenenen Gefühlen dazu veleiten lassen zu denken, man wüsste, was der Benutzer braucht. In Zukunft wollen wir ein noch größeres Auge auf das Thema Reseach legen und unsere Ideen mit den entsprechenden Methoden stärker validieren und iterieren. Nichtsdestotrotz hat uns der Prozess großen Spaß bereitet, es gab viele Möglichkeiten, etwas über Interface Design und Research Methoden zu lernen.


Dieser Prototyp ist im Rahmen des Seminars „Grundlagen des Interaction und Interface Designs“ an der Fakultät Gestaltung der HAWK – Hochschule für angewandte Wissenschaft und Kunst Hildesheim/Holzminden/Göttingen bei Prof. Stefan Wölwer entwickelt worden.

Helena Müller, helena.mueller@stud.hawk.de

Niklas Wilke, niklas.wilke@stud.hawk.de