⟶

Ecoval

Idee

Diese Bachelorarbeit umfasst die Konzeption einer Anwendung zur Planung von umweltfreundlichen Reisen. Die Anwendung Ecoval verfolgt das Ziel mehr Aufklärung und Interesse für Nachhaltigkeit im Tourismussektor zu schaffen. Im Vordergrund stehen dabei Transportmöglichkeiten mit niedrigen CO₂-Emissionen. Neben der Planung emissionsarmer Reisen soll dem Nutzer auch durch Bündelung von Informationen eine Zeitersparnis gewährleistet werden. Der Fokus der Bachelorarbeit lag dabei im Bereich User Experience Design. Zudem wurde die Webversion der Anwendung in Teilen umgesetzt.

Vorgehen

Der ausgewählte Arbeitsprozess orientiert sich am Double-Diamond-Modell. Dazu wurde die Arbeit in die vier Phasen: Discover, Define, Design und Develop aufgeteilt. In der Discoverphase wurde zunächst eine umfassende Recherche zum Thema Umwelt & Tourismus, eine Mitbewerberanalyse und eine Analyse der Zielgruppe in Form von Befragungen und Interviews durchgeführt. In der Define Phase wurden die Funktionen und Anforderungen der Anwendung definiert und in der Design Phase Wireframes darauf aufgebaut. Im Anschluss wurde ein Styleguide erstellt und mit Adobe XD ein Prototyp für die mobile Version angefertigt. Zusätzlich wurde die Webanwendung in Teilen umgesetzt.

Konzept

In der Recherchephase wurde ein Konzept aufgebaut, das als Basis für die Kalkulation von CO₂-Emissionen der einzelnen Verkehrsmittel dient. Hier wurde auf Daten von TREMOD (Transport Emission Model), des Umweltbundesamts, sowie des Landesamts für Umwelt und weitere Quellen, die Emissionsdaten liefern, zurückgegriffen. Durch die Recherche wurden insbesondere die Schwankung der CO₂-Emissionen des PKWs ersichtlich, der teilweise sogar mehr Emissionen als ein Flugzeug erbringen kann.

Analyse

Um die Anwendung nutzerfreundlich zu gestalten, wurden Umfragen und Interviews durchgeführt. Als Zielgruppe gingen hier eine jüngere Personengruppe, sowie Vielreisende, insbesondere Geschäftsreisende, hervor. Aus der Zielgruppenanalyse konnte ermittelt werden, dass Faktoren wie Kosten und Dauer für die Zielgruppen wichtige Aspekte darstellen, genauso auch die Gestaltung der Suche an sich. Auf Basis der Ergebnisse wurde eine Struktur für die Anwendung abgeleitet und in vier Menüpunkte unterteilt.

Entwurf

Hauptfunktion der Anwendung bildet die Suchfunktion. Mögliche Reiserouten werden hier auf Basis eines Filters vorgeschlagen und standardmäßig nach CO₂-Emissionen sortiert. Um die Umweltfreundlichkeit einer Route leichter einordnen zu können, wurden hier Indikatoren in Form von Icons (Blatt-Symbol) eingesetzt. Sie vermitteln dem Nutzer auf einer Skala von 1 bis 3 wie umweltfreundlich die Route im Vergleich zu ähnlichen Verbindungen ist. Neben der Suche soll auch die Home-Seite eine wichtige Komponente spielen. Sie verweist auf Artikel, die das Thema Umwelt im Tourismussektor aufgreifen oder transparent darstellen wie die Emissionen in der Applikation berechnet werden. Hauptfunktion der Anwendung bildet die Suchfunktion.

Design

Im nächsten Schritt wurde die Funktionalität der Anwendung in Form von ersten Wireframes abgebildet und stetig weiterentwickelt. Ebenso wurde ein Styleguide definiert und das Design auf die Entwürfe übertragen. Hierbei wurden zunächst die Farben Blau (steht für Vertrauen, Ruhe und Transparenz) und Gelb (steht für Wärme, Anregung und Freude) gewählt, die auf Basis ihrer Bedeutungen und Wortassoziationen mit dem Thema Reisen zur Anwendung passen. Allerdings gestaltet sich die Farbwahrnehmung von Individuum zu Individuum anders, weshalb weitere Farbthemes entwickelt wurden, die dem Nutzer zu Beginn zur Auswahl stehen.

Umsetzung

Der Prototyp für die mobile Version wurde mit Adobe XD erstellt. Die Webversion wurde mit React und Node.js entwickelt. Hierbei wurden die wichtigsten Funktionen wie die Informationsartikel der Home-Seite, die Suchfunktion oder der Login (um Favoriten speichern zu können) umgesetzt. Die Routen, die dem Nutzer hier angezeigt werden, basieren auf beispielhaften Daten, die selbst in die Datenbank eingebunden wurden. Die zugehörigen CO₂-Emissionen werden für jeden Suchvorgang in Abhängigkeit des Filters berechnet. Hierbei standen auch besonders Interaktionen und Animationen im Vordergrund. Das Head-Image der Home-Seite besteht aus mehreren CSS-Animationen, die automatisch oder per Scrollen ausgelöst werden.

Trailer

Usertests

Um die Anforderungen der potentiellen Nutzer erfüllen zu können, wurden laufend Nutzertests durchgeführt. Zunächst wurden die konzeptionellen Entwürfe immer wieder von Testpersonen evaluiert. Im nächsten Schritt wurden die Nutzer auch in Designentscheidungen mit einbezogen. Um das Gesamtbild zu testen, konnten sie den Clickdummy für die mobile Version, sowie die entwickelte Webversion austesten. Um die Anforderungen an die Anwendung zu überprüfen, wurde hier beispielsweise auch eine Zeitmessung durchgeführt, die eine Zeitersparnis durch das Nutzen der Anwendung Ecoval bestätigen konnte.