Prototyp (Framer)

https://fahrstil.framer.website/

Präsentationsvideo

Umsetzung

finales Pitchdeck

User Journey

Der Nutzer möchte aufgrund der hohen Benzinpreise seinen Spritverbrauch senken und findet im Internet die Website FahrStil.

Er scrollt durch die Theorie und möchte es nun selbst ausprobieren.

Dafür lädt er sich die zugehörige App herunter.

Bei der nächsten Autofahrt lässt er sich von FahrStil navigieren und versucht die Tipps, die ihm angezeigt werden, so gut wie möglich umzusetzen.

Daheim angekommen, sieht er sich die Analyse der Fahrt an und klickt sich durch die Verbesserungsvorschläge.

Er startet eine Challenge „Sparanfänger“, um motiviert zu bleiben.

--- Prozess ---

10 Website

Den ersten Entwurf erstellte ich in Webflow. Allerdings hatte ich Schwierigkeiten, die Spline-Szene zu animieren. Außerdem lässt sich in der kostenlosen Version kein embed code einfügen.

Deshalb stieg ich auf Framer um, bei dem beides leichter umzusetzen war.

Hier waren anfangs nur die Buttons zum Navigieren vorhanden – später fügte ich noch die Navigationsleiste hinzu.

09 Analyse - Vibe-Coding

Bei der Fahrt-Analyse hatte ich die Möglichkeit, Vibe-Coding auszuprobieren.

Größtenteils arbeitete ich mit Gemini, die letzten Details überarbeitete ich mit Claude. Gemini schaffte es nicht, die Säulen geordnet und skalierend an der Route zu platzieren, Claude hingegen schon.

Fazit:

Durch KI war es mir möglich die Analyse funktionsfähig zu programmieren, ohne die nötigen Kenntnisse zu besitzen. Allerdings hat es viel Zeit in Anspruch genommen, da ich viele Korrekturschleifen durchlaufen musste, bis die KI die Änderungen so vorgenommen hat, wie von mir gewollt. Durch meine fehlenden Kenntnisse konnte ich kleinere Änderungen zwar selbst vornehmen, jedoch keine größeren und auch die Fehler-Analyse musste teilweise die KI selbst übernehmen.

Ich habe oft einen neuen Chat gestartet, wenn ich nicht weiterkam. Dadurch brachte die KI neue Lösungsansätze. Vor allem dann, wenn sie vorher nur noch mit „Ich bin eine textbasierte KI und kann in diesem Fall nicht helfen.“ antwortete.

Ich habe auch einmal ganz von vorne begonnen, um wirklich nur die wichtigen Funktionen strukturiert zu coden. Dabei fügte ich die Erkenntnisse aus vorherigen Versuchen und Beispiel-Dateien in den Prompt ein:

„ich möchte eine anwendung (name: FahrStil), bei der ich eine datei (steben - location) hochladen kann und deren wert werden in auf einer karte (im stil von hahudia mit zusätzlicher höhen-ebene) angezeigt werden.

die werte aus der datei werden in verständliche formate umgerechnet. die beschleunigung wird berechnet (die erdbeschleunigung schon abgezogen). der verbrauch wird möglichst genau aus den gegebenen werten berechnet (auto: vw polo, geringe beladung (nur eine person), schaltgetriebe (5 gänge), 90PS). der durchschnittliche verbrauch der gesamten fahrt wird aus diesen werten ausgerechnet. die beschleunigungswerte werden zu den anderen werten zeitlich zugeordnet (dabei ist Time a (s) der zeitstempel der beschleunigung und Time (s) der zeitstempel der anderen)

die icons werden in base64 entcodiert.

- die route wird anhand der koordinaten als einzelne punkte angezeigt.

- beim hovern über die einzelnen punkte werden folgende werte als pop-up-feld angezeigt: Geschwindigkeit, Momentanverbrauch, Beschleunigung, Höhe

- die Geschwindigkeit wird außerdem durch die Farbe der Punkte angezeigt: hell -> 0km/h, dunkel -> 120km/h)

- die beschleunigung wird über die größe der einzelnen punkte dargestellt. 0m/s2: default, bei minus werden sie kleiner (bleiben aber sichtbar), bei positiven werten größer

- der momentane verbrauch wird auch über die icons dargestellt. bei momentanem verbrauch auf einer strecke von mindestens 5sek über 30litern kommt das achtung-icon und bei unter 5L das gut-icon. das icon wird in der mitte dieser strecke angezeigt. beim hover über diese icons werden die gründe angezeigt, warum der verbrauch hoch oder niedrig ist. dafür werden diese faktoren überprüft:

achtung-icon:

- beschleunigung zu stark (>2) oder beschleunigung von 0 auf 20km/h nicht zwischen 4-6sek

- Geschwindigkeit auf geraden, ebenen strecken nicht konstant

- Geschwindigkeit > 80km/h

- hohe Minus-Beschleunigung

- 0km/h für > 60sek

gut-icon:

- beschleunigung von 0 auf 20km/h zwischen 4-6sek

...

08 Farbpalette

Bei der Auswahl einer geeigneten Farbpalette war mir wichtig, dass es auffällige, leicht zu unterscheidende Farben sind, die man auch beim Autofahren schnell erkennen und dem richtigen Tipp zuordnen kann.

Nachdem ich eine nähere Auswahl getroffen hatte, probierte ich sie an einem Prototypen aus und überprüfte auch, welche Farben genug Kontrast beim Lesen bieten.

Später fügte ich noch Grüntöne hinzu, um bei der Analyse positives Feedback besser erkenntlich zu machen.

07 Storytelling - 3D Animation

Anfangs war der Storytelling-Teil noch in die App intergriert. Hierfür skizzierte ich einen ersten Entwurf und passte ihn an zwei Moodboards an.

Danach überlegte ich eine Route, die ein Auto fahren könnte, um alle vorher recherchierten Tipps daran zu zeigen.

Diese Route erstellte ich in Blender mit Modellen für Autos, Bäume und eine Ampel.

Anschließend importierte ich die Szene in Spline, fügte Farben und Materialien hinzu und animierte Auto und Kamera, um eine Scroll-Animation zu ermöglichen. Außerdem fügte ich die Schilder mit den Tipps hinzu.

06 konkrete Idee

FahrStil - WebApp

Storytelling - Tipps

• Anfang Charakter/Fahrstil und Auto auswählen
• Pain Points: viel Benzin/Geld verbraucht oder noch nicht ganz zufrieden
• Wie verbessern: Tipps (gepaart mit Statistiken, wie hilfreich/Veränderung durch Tipp)
• Überleitung selbst ausprobieren

Praxis

• Vor dem Fahren: Richtige Route auswählen
• Während dem Fahren: Route + Tipps (vor Kurve langsamer, etc.)
• Nach dem Fahren: Analyse der Fahrt, welche Tipps aufgegriffen
• langfristige Entwicklung

05 Moodboards

04 Ideen zur Umsetzung

03 Recherche zum Sparsamen Autofahren

Ich habe mich für das Thema Sparsames Autofahren entschieden und dazu weitere Informationen gesammelt.

Unter anderem zu

• Umsetzungsvarianten
• Informationen, die ich später vermitteln will
• bereits existierenden Projekten (Apps und Websites)

Mein Pitch Deck fasst diese und weitere Informationen zu meinem Projekt zusammen.

02 erste Recherche

Zu den drei ausgewählten Themen habe ich weitere Informationen gesammelt. Außerdem hatte ich eine weitere Idee zum Thema „Steine-Flippen“.

Links

- Pusteblumen:

https://www.youtube.com/watch?v=clKEdi-nXVw

https://pmc.ncbi.nlm.nih.gov/articles/PMC12419876/

https://pmc.ncbi.nlm.nih.gov/articles/PMC9797189/

- Spazieren:

https://sanrita.ca/

- Auto fahren:

https://www.homeandsmart.de/wenow-optimierungs-app

https://www.spiegel.de/auto/aktuell/mydrive-fahrstil-app-zum-weicheren-autofahren-a-1049550.html

https://idw-online.de/de/news636424

https://www.researchgate.net/publication/304533371_MyDrive_Drive_Behavior_Analytics_Method_And_Platform

- Steine Flippen:

https://de.wikipedia.org/wiki/Steineh%C3%BCpfen

https://www.spektrum.de/news/warum-baelle-so-gut-ueber-das-wasser-springen/1398349

01 Ideen

Aus den sieben Ideen, die ich habe, konzentriere ich mich bei meiner Recherche nun auf die Themen „Flugbewegung Pusteblumen“, „Spaziergang von Hund und Mensch“ und „Sparsames Autofahren“.