A2B Carpool – UX/UI Case Study

Gestaltung eines persönlicheren Carpooling-Erlebnisses

A2B Carpool – UX/UI Case Study

Gestaltung eines persönlicheren Carpooling-Erlebnisses

A2B Carpool App - Prototype

Gestaltung eines persönlicheren Carpooling-Erlebnisses

Kontext:

Bachelorarbeit
Webdesign & Development BA

Kontext:

Bachelorarbeit
Webdesign & Development BA

Dauer:

6 Monate

Dauer:

6 Monate

Methoden:

Research, Wireframing, Screen Design, Prototyping, Usability Testing, Design System (Atomic)

Methoden:

Research, Wireframing, Screen Design, Prototyping, Usability Testing, Design System (Atomic)

Tools:

Figma, Photoshop, Illustrator, Miro, Google Suite

Tools:

Figma, Photoshop, Illustrator, Miro, Google Suite

Der Ausgangspunkt

Carpooling hat ein Vertrauensproblem und das fängt lange vor der Fahrt an.

Viele Menschen verzichten auf Mitfahrgelegenheiten nicht wegen des Preises oder der Verfügbarkeit, sondern wegen der sozialen Unsicherheit:

  • Wer ist die andere Person?

  • Wird die Fahrt unangenehm?

  • Haben wir etwas gemeinsam?

Diese emotionale Unsicherheit führt dazu, dass Carpooling trotz klarer Vorteile nicht genutzt wird. Warum behandeln bestehende Apps Menschen wie bewegliche Pakete.

Das Problem

Bestehende Apps wie BlaBlaCar oder Hitch lösen Logistik. Die Research-Phase hat gezeigt, warum das ein Problem ist:

  • Profile sind funktional, aber kaum persönlich

  • Der Reisegrund wird selten kommuniziert

  • Vertrauen entsteht erst nach dem ersten Touchpoint

Das Problem

Bestehende Apps wie BlaBlaCar oder Hitch lösen Logistik. Die Research-Phase hat gezeigt, warum das ein Problem ist:

  • Profile sind funktional, aber kaum persönlich

  • Der Reisegrund wird selten kommuniziert

  • Vertrauen entsteht erst nach dem ersten Touchpoints



Das Problem

Bestehende Apps wie BlaBlaCar oder Hitch lösen Logistik. Die Research-Phase hat gezeigt, warum das ein Problem ist:

  • Profile sind funktional, aber kaum persönlich

  • Der Reisegrund wird selten kommuniziert

  • Vertrauen entsteht erst nach dem ersten Touchpoint

Die Idee

A2B setzt genau da an, wo andere Apps aufhören.

Persönlichkeit ins Profil. Beim Onboarding wählen Nutzer 4 Interessen aus einer Bibliothek und beantworten 3 von 7 persönlichen Fragen, zum Beispiel «Was wäre für dich ein perfekter Tag?» oder «Was ist dein Vorbild?». Diese Informationen sind im Profil für alle sichtbar. Kein leeres Profilbild, sondern ein echter Gesprächsstarter, noch bevor man einsteigt.

Fahrten an Events knüpfen. Nutzer können Anlässe wie Konzerte, Festivals oder Messen direkt in der App finden und eine Fahrt dazu anlegen. Wer ans gleiche Event will, findet sich automatisch. Ein gemeinsamer Zweck schafft eine natürliche Verbindung und senkt die soziale Hemmschwelle erheblich.

Prozess

Vollständiger UX-Prozess von Research bis moderiertem Usability Testing.

Research & Architektur

Ich analysierte BlaBlaCar, Hitch und Heetch, nicht um sie zu kopieren, sondern um zu verstehen wo sie aufhören. Parallel dazu recherchierte ich in der Sozialpsychologie, wie Verbindungen zwischen Menschen entstehen. Eine zentrale Quelle war der «36 Questions for Increasing Closeness»-Fragebogen. Die Erkenntnis war klar: Gemeinsame Interessen und persönliche Fragen senken soziale Hemmschwellen messbar.

Auf Basis dieser Erkenntnisse entstand das Flussdiagramm der gesamten App-Architektur. Dabei wurde früh eine wichtige Entscheidung getroffen: Die ursprüngliche Idee, Fahrer und Mitfahrer in separate Profile zu trennen, wurde verworfen. Ein ständiger Profilwechsel wäre Reibung und kein Feature. Ein flexibles Profil, das beide Rollen abdeckt, ist natürlicher und entspricht dem, was Nutzer aus anderen Apps kennen.

Wireframes & frühes Testing

Die Wireframes entstanden für Mobile und Tablet in Figma als klickbarer Prototyp für erste Nutzertests. Unmoderierte Usabilitests via Online-Umfrage mit Aufgabenbasierten Szenarien. Das Feedback war wertvoll:

  • Kernflows waren ohne Erklärung verständlich

  • Eine Fahrtenübersicht fehlte komplett und wurde ergänzt

  • Das Profil ähnelte zu stark dem Hauptmenü und sorgte für Verwirrung

Beides wurde vor dem Screendesign gezielt adressiert.

Design System (Atomic Design)

Bevor der erste High-Fidelity-Screen entstand, baute ich ein vollständiges Atomic Design System auf, von Atomen (Farben, Typografie, Icons, Grid) über Moleküle und Organismen bis zu Templates. Primärfarbe Violett, Sekundärfarbe Mint.

Der Aufwand hat sich mehrfach ausgezahlt: Jede Anpassung im System zog sich automatisch durch alle Screens. Konsistenz war keine Frage des Aufwands mehr, sondern eine des Systems.

Design System (Atomic Design)

Bevor der erste High-Fidelity-Screen entstand, baute ich ein vollständiges Atomic Design System auf, von Atomen (Farben, Typografie, Icons, Grid) über Moleküle und Organismen bis zu Templates. Primärfarbe Violett, Sekundärfarbe Mint.

Der Aufwand hat sich mehrfach ausgezahlt: Jede Anpassung im System zog sich automatisch durch alle Screens. Konsistenz war keine Frage des Aufwands mehr, sondern eine des Systems.

High-Fidelity Prototyp

Der finale Prototyp bildet ein realistisches End-to-End-Erlebnis ab, für iPhone 13 und iPad Pro 11". Zwei verknüpfte Account-Zustände: verifiziert und nicht verifiziert, da die Verifizierung zentral für das Nutzervertrauen ist. Alle Kernflows sind abgedeckt:

  • Fahrt suchen und erstellen

  • Events finden und verknüpfen

  • Profil mit Interessen und persönlichen Fragen

  • Buchung, Messaging und Systemfeedback

Teste den Prototyp links!

Usability Testing

5 Probanden, moderiert, ergänzt durch eine quantitative Umfrage. Alle getesteten Bereiche wurden mit 8 bis 10 von 10 bewertet. Die Stichprobe ist nicht repräsentativ, lieferte aber eine klare qualitative Richtung. Kleinere UI-Optimierungen wurden direkt danach umgesetzt.

Ergebnisse

  • Usability und Verständlichkeit wurden mit 8–10 bewertet

  • Navigation und Struktur wurden bestätigt

  • Kleinere UI-Optimierungen wurden identifiziert und umgesetzt

Die Stichprobe ist nicht repräsentativ, lieferte jedoch eine klare qualitative Richtung.

Was ich heute anders machen würde

  • Früher und öfter testen. Die fehlende Fahrtenübersicht war ein blinder Fleck, den ich selbst nicht gesehen hatte. Nutzer haben ihn sofort gefunden.

  • Den Onboarding-Flow stärker priorisieren. Gerade bei einer App die auf Vertrauen basiert, sind die ersten Minuten entscheidend.

  • Edge Cases von Anfang an einplanen. Leere Zustände und Fehlermeldungen gehören von Beginn an ins Konzept, nicht erst am Schluss.

Was ich heute anders machen würde

  • Früher und öfter testen. Die fehlende Fahrtenübersicht war ein blinder Fleck, den ich selbst nicht gesehen hatte. Nutzer haben ihn sofort gefunden.

  • Den Onboarding-Flow stärker priorisieren. Gerade bei einer App die auf Vertrauen basiert, sind die ersten Minuten entscheidend.

  • Edge Cases von Anfang an einplanen. Leere Zustände und Fehlermeldungen gehören von Beginn an ins Konzept, nicht erst am Schluss.

Was ich heute anders machen würde

  • Früher und öfter testen. Die fehlende Fahrtenübersicht war ein blinder Fleck, den ich selbst nicht gesehen hatte. Nutzer haben ihn sofort gefunden.

  • Den Onboarding-Flow stärker priorisieren. Gerade bei einer App die auf Vertrauen basiert, sind die ersten Minuten entscheidend.

  • Edge Cases von Anfang an einplanen. Leere Zustände und Fehlermeldungen gehören von Beginn an ins Konzept, nicht erst am Schluss.

Ergebnis

Ein vollständiger, klickbarer High-Fidelity Prototyp für Mobile und Tablet, validiert durch zwei Runden Usability Testing. Ein skalierbares Design System nach Atomic Design. Und ein Konzept das zeigt: Carpooling kann mehr sein als ein günstigeres Uber.




Ergebnis

Ein vollständiger, klickbarer High-Fidelity Prototyp für Mobile und Tablet, validiert durch zwei Runden Usability Testing. Ein skalierbares Design System nach Atomic Design. Und ein Konzept das zeigt: Carpooling kann mehr sein als ein günstigeres Uber.






Ergebnis

Ein vollständiger, klickbarer High-Fidelity Prototyp für Mobile und Tablet, validiert durch zwei Runden Usability Testing. Ein skalierbares Design System nach Atomic Design. Und ein Konzept das zeigt: Carpooling kann mehr sein als ein günstigeres Uber.