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
Als Nutzer*in mit wenig Zeit fällt es mir schwer, Bewegung fest in meinen Alltag zu integrieren.
Als Nutzer*in verliere ich schnell Motivation, wenn keine regelmäßigen Impulse oder Erinnerungen vorhanden sind.
Als Nutzer*in fühle ich mich nach Aktivitäten oft nicht wirklich belohnt oder stolz auf meinen Fortschritt.
Als Nutzer*in verliere ich Interesse, wenn die App meine individuellen Ziele, Stimmung oder Tagesform nicht berücksichtigt.
Als Nutzer*in fällt es mir schwer, motiviert zu bleiben, wenn ich keine Möglichkeit habe, mich auszutauschen oder zu vergleichen.
Als neuer Nutzerin verliere ich Motivation, wenn die Registrierung zu viele Schritte und unnötige Eingaben erfordert.
Als Nutzer*in fühle ich mich überfordert, wenn mir zu viele oder zu unstrukturierte Informationen auf einmal präsentiert werden.
Als Nutzer*in wünsche ich mir ein ruhiges, harmonisches Design, das Entspannung statt Leistungsdruck vermittelt.
Als Nutzer*in möchte ich ohne Umwege auf die wichtigsten Funktionen zugreifen, statt mich durch viele Menüs zu klicken.
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?
Wie könnten wir Bewegung als etwas Natürliches in den Alltag einbauen, statt sie als zusätzliche Aufgabe wirken zu lassen?
Wie könnten wir subtile, positive Erinnerungen einbauen, die mich zum Dranbleiben motivieren, ohne aufdringlich zu wirken?
Wie könnten wir Erfolge sichtbarer, emotionaler und persönlicher feiern, um ein langfristiges Erfolgserlebnis zu schaffen?
Wie könnten wir das Nutzungserlebnis stärker personalisieren, damit sich jede Interaktion relevant und bedeutungsvoll anfühlt?
Wie könnten wir soziale Motivation schaffen, ohne Druck oder Wettbewerb auszulösen?
Wie könnten wir den Onboarding-Prozess vereinfachen, um direkt in das eigentliche Erlebnis einzusteigen?
Wie könnten wir Daten klarer, visueller und kontextbezogener aufbereiten, um Orientierung und Verständnis zu fördern?
Wie könnten wir das visuelle Design so gestalten, dass es Ruhe, Motivation und Natürlichkeit zugleich ausstrahlt?
Wie könnten wir den Aufbau der App so strukturieren, dass die Kernfunktionen sofort erkennbar und zugänglich sind?
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
Marktüberblick erstellen
SWOT-Analyse
Nutzerfeedback einbeziehen
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