ERIKA-App - Die digitale Begleiterin für klimabewusstes Handeln im Alltag

ERIKA-App - Die digitale Begleiterin für klimabewusstes Handeln im Alltag

Entstehungszeitraum: Jänner 2024 - laufend
Rahmen:Forschungsprojekt
Links:
Technologien:
Next.jsTypeScriptTailwind CSSReduxAxiosFramer Motion

ERIKA ist ein Forschungsprojekt, das untersucht, wie Menschen – insbesondere in ländlichen Regionen – dabei unterstützt werden können, ihren Alltag klimafreundlicher zu gestalten. Als Modellregion dient die Stadt Waidhofen an der Ybbs.

Im Mittelpunkt steht die ERIKA-App mit ihren Initiativen. Sie vermittelt Wissen und konkrete Handlungsmöglichkeiten zu unterschiedlichsten Themen – von Lebensmittelverschwendung über Wiederverwertung bis hin zu Wasserschutz. Dabei setzt sie auf spielerische Elemente wie Challenges, Fortschrittsanzeige und Belohnungen, um Klimaschutz aktiv und erlebbar zu machen.

Ziel des Projekts ist es, herauszufinden, wie digitale Technologien Menschen im Alltag wirksam zu klimafreundlichem Verhalten motivieren können und wie eine solche Lösung auch in anderen Regionen eingesetzt werden kann.

Recherche & Anforderungsanalyse

Von Jänner bis einschließlich Juli 2024 war ich in die erste Phase des Projekts eingebunden, die sich auf Recherche und Anforderungsanalyse konzentrierte. Ziel war es, ein besseres Verständnis dafür zu gewinnen, welche Ansätze es bereits gibt und welche Anforderungen Nutzer:innen an eine Lösung wie ERIKA haben könnten.

Meine Aufgaben lagen vor allem darin, bestehende (Forschungs-)Projekte, Produkte und Initiativen auf regionaler Ebene in Österreich sowie auf internationaler Ebene zu analysieren. Besonderes Augenmerk lag dabei auf Konzepten, die – ähnlich wie ERIKA – Menschen im Alltag begleiten, informieren, motivieren und belohnen.

Foto von einem Workshop in Waidhofen an der Ybbs.

Foto von einem Workshop in Waidhofen an der Ybbs.

Dazu zählte auch die Definition von Zielgruppen, um die spätere Entwicklung stärker an den Bedürfnissen potenzieller Nutzer:innen auszurichten sowie die Mitorganisation und Teilnahmen an Workshops mit Stakeholder und Bürger:innen, in denen wir gemeinsam erarbeitet haben, welche Erwartungen die Menschen an ein solches digitales Angebot haben könnten und wie eine passende Lösung aussehen kann.

Prototyping

Von August 2024 bis einschließlich Dezember 2024 lag mein Schwerpunkt auf dem Prototyping der ERIKA-App. Zunächst habe ich Wireframes per Hand erstellt, um erste Ideen zu Struktur, Navigation und Funktionalität der Anwendung festzuhalten – basierend auf den zuvor erarbeiteten Anforderungen und Überlegungen, welche Inhalte und Funktionen für die App sinnvoll wären. Diese Skizzen wurden anschließend projektintern diskutiert, insbesondere im Hinblick darauf, welche Ansätze realistisch umsetzbar sind und ob die Konzepte verständlich wirken.

Vergleich eines Low-Fidelity Wireframes und einem Screen aus dem High-Fidelity Figma-Projekt zur ERIKA App.

Vergleich eines Low-Fidelity Wireframes und einem Screen aus dem High-Fidelity Figma-Projekt zur ERIKA App.

Darauf aufbauend entwickelte ich in Figma einen umfangreichen Prototypen, der das geplante Nutzungserlebnis detailliert abbildete. Dieser Prototyp wurde im November 2024 im Rahmen eines Workshops mit Bürger:innen in Waidhofen an der Ybbs getestet, um Rückmeldungen aus der Zielgruppe zu erhalten und die Ausrichtung der App zu überprüfen.

Das Prototyping stellte einen iterativen Prozess dar, in dem kontinuierlich Feedback einfloss und Anpassungen vorgenommen wurden. Es bildete zugleich die Ausgangsbasis für die weitere Entwicklung der App.

Frontend-Entwicklung

Von Jänner 2025 bis Juni 2025 war ich in der Frontend-Entwicklung der ERIKA-App tätig. Gemeinsam mit einem weiteren Kollegen habe ich das Projekt aufgesetzt und anschließend die Umsetzung der einzelnen Seiten und Komponenten übernommen. Dabei konnte ich praktische Erfahrungen sammeln – insbesondere im Umgang mit Tailwind CSS und Framer Motion, das ich zuvor noch nicht (intensiv) genutzt hatte, sowie in der Arbeit in einem professionellen Projektkontext.

Ein zentrales Element der App ist die ERIKA-Pflanze. Sie wächst, wenn Nutzer:innen an Initiativen teilnehmen, Ideen einreichen oder bewerten und Feedback geben. So wird persönlicher Fortschritt sichtbar gemacht. Am Ende können die erreichten Stufen in Belohnungen eingetauscht werden – spielerische Gamification-Elemente, die motivieren sollen.

Drei Screenshots der ERIKA App.

Screenshots der ERIKA App.

Im Frontend von ERIKA kommt Next.js mit TypeScript zum Einsatz, für das Styling wird Tailwind CSS und Framer Motion verwendet, und für die zentrale Datenverwaltung Redux Toolkit. Die App ist als Progressive-Web-App (PWA) umgesetzt.

Im Fokus der Implementierung standen darüber hinaus:

  • die Kommunikation mit dem Backend über Axios,
  • die Darstellung von Initiativen mit dynamisch wechselnden Inhalten,
  • eine An- und Abmeldelogik für Initiativen,
  • ein QR-Code-Scanner zur Teilnahme und zum Einlösen von Belohnungen,
  • ein Level-Up-System mit Animation,
  • eine Funktion zum Einreichen und Bewerten von Ideen,
  • sowie Push-Benachrichtigungen, um Nutzer:innen an bevorstehende Initiativen zu erinnern.

Pilotphase

Die Pilotphase der ERIKA-App läuft seit dem 18. Juni 2025 und dauert bis zum 30. September 2025.

Seit Juli 2025 bin ich Teil dieses Prozesses. Meine Aufgaben umfassen einerseits die Erstellung eigener Initiativen, darunter Reduce. Reuse. Rethink und Wasser sparen im Alltag, sowie die Mitwirkung bei Initiativen wie dem Mobilitätstag in Waidhofen an der Ybbs.

Foto vom ERIKA-Stand beim Energie- und Mobilitätstag in Waidhofen an der Ybbs.

Foto vom ERIKA-Stand beim Energie- und Mobilitätstag in Waidhofen an der Ybbs.

Darüber hinaus bin ich in die Auswertung und Dokumentation der Pilotphase eingebunden. Diese Ergebnisse fließen in den finalen Projektbericht ein und bilden die Grundlage für ein Whitepaper, das anderen Gemeinden helfen soll, die Erfahrungen aus Waidhofen zu übernehmen und die ERIKA-App an ihre Bedürfnisse anzupassen.