Projektidee

Das Konzept für unser Projekt besteht aus einem Webportal, das andere Menschen durch Gamification dazu motiviert, mehr zu Fuß zu gehen und ihre Umgebung neu zu erkunden.

Nutzer*innen können vorgefertigte Routen oder einzelne Ziele auswählen und speichern, während sie von einem kleinen virtuellen Begleiter begleitet werden. Durch abgeschlossene Missionen und erreichte Schritte sammeln sie Punkte, mit denen sie neue Items oder Hintergründe für ihren Begleiter freischalten können.

Dieser Artikel erfasst einen Überblick der verschiedenen Entwicklungsphasen, von detalierten Arbeitsschritten zu unseren jeweiligen Erkenntnissen.

Empathize-Phase

Screener Survey

Ziel

Wir wollten herausfinden, wie Menschen aktuell mit Bewegung, Alltag und Erholung im Freien umgehen – und welche Herausforderungen oder Bedürfnisse dabei entstehen.
Der Fokus lag darauf zu verstehen, was Menschen motiviert oder hindert, rauszugehen, und welche Art von Orten oder Informationen sie sich wünschen.

Primäre Zielgruppe

Junge Erwachsene im Alter von 18–30 Jahren, häufig Studierende oder Berufseinsteiger*innen, die sich mehr Bewegung und Ausgleich im Alltag wünschen, aber oft wenig Zeit oder Motivation haben.

Erkenntnisse

  • Viele verbringen viel Zeit drinnen, möchten aber öfter raus, scheitern aber an Motivation, Zeit oder fehlenden Ideen

  • Natur, Ruhe und Abschalten sind zentrale Gründe, rauszugehen

  • Spontane Entscheidungen sind beliebt, Planung wird oft als Aufwand empfunden

  • Wetter, Müdigkeit und fehlende Inspiration sind häufige Barrieren

  • Die meisten wünschen sich eine einfache, motivierende Möglichkeit, neue Orte zu entdecken die zur Stimmung passen

  • Gamification oder kleine Belohnungen könnten ein Anreiz sein, sich öfter zu bewegen

Interviews

Mit den Ergebnissen von der Umfrage haben wir dann unser Interview erstellt und danach ausgewertet und verglichen.

Affinity Mapping

Die Ergebnisse aus den Interviwes haben wir dann für unser Affinty Mapping benutzt und dann am Ende noch eine kleiner Schlussfolgerung daraus gezogen.

Key Insights

1. Bewegung als positives Erlebnis

Nutzer/innen möchten Bewegung mit positiven Emotionen verbinden. Kein Fitnesszwang, sondern Freude, Entspannung und Entdeckung.
2. Einfachheit und Ästhetik

Simpel, ruhig und visuell ansprechend funktioniert besser als sportlich oder technisch. Eine klare, beruhigende Gestaltung schafft Vertrauen und Motivation.
3. Motivation durch kleine Impulse

Kleine Challenges oder Belohnungen steigern die Motivation, solange sie freiwillig und nicht leistungsorientiert sind.
4. Entdeckung und Ruhe als Kombination

Eine App, die Entdeckung mit Ruhe und Achtsamkeit verbindet, füllt eine bestehende Lücke zwischen Fitness und Freizeit Apps.
5. Selbstmotivation statt Wettbewerb

Es braucht keine ständige Community oder Ranglisten, die Zielgruppe wünscht sich sanfte Motivation und persönliche Fortschritte ohne Druck.

Define-Phase

Personas

Auf Basis unserer Ergebnisse der Interviews wurden zuerst drei Personas erstellt. Sie waren nicht allzu verschieden, da wir uns auf eine Zielgruppe beschränken, um nicht in verschiedene Richtungen zu gehen. Im Anschluss haben wir aber nur für zwei Personas entschieden, mit welchen wir weiter verfahren werden.

User Journeys

Mit den zwei gewählten Personas erstellen wir nun zwei verschiedene User Journey Maps, mit denen wir Szenarien von Awareness bis zur regelmäßigen und lanzeitige Nutzung ausschließen können. Daraus entwickelten wir danach unsere Problem Statements.

Problem Statements

Nachdem die User Journey Maps erstellt wurden wenden wir uns nun den Problem Statements. Diese haben wir in zwei Herausforderungen eingeteilt um die Probleme klar voneinander zu trennen und zu Kategorisieren.

Herausforderung

1.-5.: Inhaltlich / Verbindung zu den Nutzer*innen

6.-10.: Design / Struktur der App

Problem Statement

  1. Als Nutzer*in mit wenig Zeit fällt es mir schwer, Bewegung fest in meinen Alltag zu integrieren.

  2. Als Nutzer*in verliere ich schnell Motivation, wenn keine regelmäßigen Impulse oder Erinnerungen vorhanden sind.

  3. Als Nutzer*in fühle ich mich nach Aktivitäten oft nicht wirklich belohnt oder stolz auf meinen Fortschritt.

  4. Als Nutzer*in verliere ich Interesse, wenn die App meine individuellen Ziele, Stimmung oder Tagesform nicht berücksichtigt.

  5. 
Als Nutzer*in fällt es mir schwer, motiviert zu bleiben, wenn ich keine Möglichkeit habe, mich auszutauschen oder zu vergleichen.

  6. Als neuer Nutzerin verliere ich Motivation, wenn die Registrierung zu viele Schritte und unnötige Eingaben erfordert.

  7. Als Nutzer*in fühle ich mich überfordert, wenn mir zu viele oder zu unstrukturierte Informationen auf einmal präsentiert werden.

  8. Als Nutzer*in wünsche ich mir ein ruhiges, harmonisches Design, das Entspannung statt Leistungsdruck vermittelt.

  9. Als Nutzer*in möchte ich ohne Umwege auf die wichtigsten Funktionen zugreifen, statt mich durch viele Menüs zu klicken.

  10. Als Nutzer*in wünsche ich mir, dass die App meine vorherigen Aktivitäten berücksichtigt und mir passende neue Vorschläge macht.

How Might We?

  1. Wie könnten wir Bewegung als etwas Natürliches in den Alltag einbauen, statt sie als zusätzliche Aufgabe wirken zu lassen?

  2. Wie könnten wir subtile, positive Erinnerungen einbauen, die mich zum Dranbleiben motivieren, ohne aufdringlich zu wirken?

  3. Wie könnten wir Erfolge sichtbarer, emotionaler und persönlicher feiern, um ein langfristiges Erfolgserlebnis zu schaffen?

  4. Wie könnten wir das Nutzungserlebnis stärker personalisieren, damit sich jede Interaktion relevant und bedeutungsvoll anfühlt?

  5. Wie könnten wir soziale Motivation schaffen, ohne Druck oder Wettbewerb auszulösen?

  6. Wie könnten wir den Onboarding-Prozess vereinfachen, um direkt in das eigentliche Erlebnis einzusteigen?

  7. Wie könnten wir Daten klarer, visueller und kontextbezogener aufbereiten, um Orientierung und Verständnis zu fördern?

  8. Wie könnten wir das visuelle Design so gestalten, dass es Ruhe, Motivation und Natürlichkeit zugleich ausstrahlt?

  9. Wie könnten wir den Aufbau der App so strukturieren, dass die Kernfunktionen sofort erkennbar und zugänglich sind?

  10. Wie könnten wir ein adaptives System gestalten, das auf vergangenes Verhalten reagiert und individuelle Empfehlungen gibt?

Wettbewerbsanalyse

Das Ziel der Wettbewerbsanalyse war es, den aktuellen Markt für die uns relevante Apps zu verstehen, bestehende Stärken und Schwächen der Konkurrenz zu erkennen und daraus gezielte Chancen für Innovation abzuleiten. Dabei haben wir untersucht, wie andere Anbieter Nutzer motivieren, die Nutzung langfristig aufrecht erhalten und welche Design aspekte besonders erfolgreich sind.

Die gewonnenen Erkenntnisse wurden dann genutzt um das eigene Konzept zurecht zu stellen und zu in jeglicher Art zu ergänzen und verbessern. Es soll eine sowohl emotionale, spielerische und nutzer zentrierte erfahrung für zukünftige Nutzer geschaffen werden.

Vorgehensweise / Schritte

  1. Marktüberblick erstellen


  2. SWOT-Analyse

  3. Nutzerfeedback einbeziehen

  4. Lightning Demo durchführen
Sammlung visueller und funktionaler Inspirationsbeispiele (aus direkten und indirekten Wettbewerbern), um kreative Ideen für das eigene Design zu entwickeln

Erkenntnisse

Wir haben uns verschiedene Apps und Portale wie Pokémon GO, Komoot, Route You, etc. uns naher analysiert mit der SWOT-Methode und in Bezug auf online Bewertungen. Für unsere weitere Arbeit haben wir folgende zusammengefasst.

  • strukturierte moderne, schlichtes Design und UX

  • direkter Zugang zur Karte und Routenplanung

  • Routenvorschläge und Zusatzinformationen

  • Focus auf Gamification

Ideation-Phase

Brainstorming

Zu beginn der Ideation Phase haben wir verschiedeste Ideen aufgeschrieben, egal ob realistisch oder nicht, simple oder nicht. Danach haben wir alle Ideen in acht Kategorien eingeordnet. Zunächst sind wir dann alle einzeln die Ideen durchgegangen und haben mit dem Daumen hoch oder runter unsere Stimme/Meinung abgegeben.

Anschließend haben wir die Ideen mit mindestens einem Daumen runter oder schräg, ausdiskutiert um dann nachher auszuwählen mit welchen Ideen wir Fortfahren werden:

  • Ideen, die wir dann kollektiv ausschließen wollten haben wir rot eingefärbt.

  • Ideen, die wir auch nach der Diskussion als nicht all zu relevant aber eine schöne mögliche ergänzung empfunden haben, haben wir gelb eingefärbt und uns fürs erste noch offen gehalten.

  • Ideen, mit welchen wir dann weiter fortfahren haben wir grün eingefärbt.

Skizzen

Anschließend haben wir nach dem Brainstorming angefangen, Skizzen anzufertigen. Skizzen wurden wie beim Brainstorming erstmal konzeptuell erstellt um alle Ideen zunächst aufs blatt zu bringen.

  • Profil

    • Statistiken und Achievements

    • Routen und Orte

  • Begleiter

    • Große Darstellung des Begleiters

    • Customization

  • Mission Center

    • Begleiter

    • Planner

    • Routen

  • Navigation

    • Wetter

    • Karte mit Filter

    • Routensuche mit Von und Nach

  • Community & Friends

    • Profil

    • Events

    • Chat Section

  • Shop

    • Punktanzahl

    • Begleiter im Blick

    • Shop

Wireframing

Nachdem das Brainstorming zu den gestalterischen Aspekten beendet war, haben wir direkt mit dem Wireframing angefangen und dann mit dem Gestalten der Wireframes weitergemacht. Anders als in der Lektüre haben wir uns gleich ins Wireframing gestürzt, da wir persönlich so besser arbeiten konnten und viel mehr fortschritt und Erkenntnisse sammeln konnten.

Vorgehensweise


Im Rahmen des Wireframings wurde zunächst versucht, auf zuvor erstellte Skizzen als Inspirationsquelle zurückzugreifen. Diese erwiesen sich jedoch als nur bedingt hilfreich für die weitere Ausarbeitung. Aus diesem Grund entschied sich das Team, den Gestaltungsprozess gemeinsam neu aufzusetzen und von Beginn an systematisch zu überdenken.


In einem nächsten Schritt wurden die im Brainstorming entwickelten Ideen erneut gesichtet und schrittweise in das Wireframing überführt. Zu Beginn des Prozesses einigte sich das Team auf grundlegende Gestaltungsrichtlinien, darunter unter anderem die Abstände der seitlichen Ränder, die Entscheidung für einen Fixed Header sowie die Definition der benötigten Seitenstrukturen.
Auf dieser Basis begann die gemeinsame Umsetzung der Wireframes in Figma. Sämtliche Gestaltungsschritte wurden im Team diskutiert, reflektiert und gemeinsam beschlossen, wodurch ein kollaborativer und iterativer Arbeitsprozess entstand.

Wireframing

Vorgehensweise:


Da die gestalterischen Grundlagen bereits im Rahmen des Brainstormings umfassend erarbeitet wurden, bestand der nächste Schritt darin, konkrete Gestaltungsentscheidungen zu treffen. Hierzu zählten insbesondere die finale Auswahl der Schriftarten, des Logos, der Schriftgrößen sowie der Farbpalette. Nach der Festlegung dieser gestalterischen Parameter wurden die einzelnen Seiten systematisch und schrittweise ausgearbeitet.


Im weiteren Verlauf erfolgte die Anpassung von Typografie, Größenverhältnissen und Farbwerten auf jeder Seite. Zusätzlich wurden gestalterische Effekte integriert, auf die sich das Team im Vorfeld gemeinsam verständigt hatte. Die Umsetzung erfolgte iterativ, wobei jede Seite einzeln betrachtet und entsprechend angepasst wurde. Außerdem Ist hier anzumerken das In diesem Prototyp die Schriftart nicht die ist die wir ausgewählt haben, da diese bei Figma nicht vorhanden war.


Erkenntnisse:

Die zuvor ausgewählten Schriftarten, Schriftgrößen, das Logo sowie die Farbpalette wurden zunächst wie geplant angewendet. Während der praktischen Umsetzung ergaben sich jedoch neue Erkenntnisse, die zu weiteren Anpassungen führten. So wurden unter anderem Farben, Schriftgrößen und Effekte im Verlauf des Wireframings überarbeitet.


Auch in dieser Phase wurde jede Seite gemeinsam Schritt für Schritt analysiert und optimiert. Das daraus resultierende Ergebnis stellt ein vorläufiges Endprodukt dar. Ob dieses dem finalen Stand entsprechen wird, ist zum aktuellen Zeitpunkt noch offen, da einzelne gestalterische Aspekte weiterhin überprüft und gegebenenfalls angepasst werden sollen. Der Schwerpunkt lag in dieser Phase insbesondere auf der Entwicklung einer tragfähigen Grundstruktur, da diese als zentrales Element für den weiteren Projektverlauf betrachtet wird. Inhalte wie Bilder oder konkrete Daten wurden bewusst noch nicht integriert, da der Fokus zunächst auf der strukturellen und visuellen Gesamtwirkung lag.

Prototyp

Die Erstellung des Codes für das finale Prototyp wurde mit Hilfe von den LLMs Lovable und ChatGPT erfolgt. Da wir aber mit den limitierten funktionen von der kostenlosen Version von Lovable unzufrieden waren sowie die Resultate von unseren Prompts, haben wir bei der Umsetzung auf ChatGPT umgewechselt.

Styleguide

Typografie

  • Font: Sans Serif

  • Header: 16px / Bold

  • Fließtext und Labels: 13px

Farben

  • Text: #11372a und #1f3f34

  • Primary: #2a4d40

  • Secondary: #2f5a49

  • Punkte: #49a07b

  • Buttons: #3a7861

  • Weiß: #ffffff

Autoren

Angelina Miteva, Vladyslava Prodan, Alyssandra Soriano

Betreuer

Prof. Damian Gerbaulet