Smarte Lösung für gestresste Radfahrer
– Entwicklung einer IoT-App zur einfachen Lokalisierung des eigenen Fahrrads und sicheren Abstellorten
Meine Rolle
UX-Designer,
Front- & Backend-Development
Zeitplan
11/2019 – 02/2020
Leistungen
User Research
UI Design
Usability Testing
App Development
Die App Biceek vereinfacht den Alltag von Radfahrern durch eine schnelle Lokalisierung des Fahrrads und einer Suche nach einem geeignetem Abstellplatz. Dafür erzeugt ein Sender am Gestell auf Abruf einen Ton sowie einen Lichtimpuls und macht den User so auf die Fahrradposition aufmerksam. Das endlose Suchen und Zweifeln nimmt ein Ende – der User spart sich Zeit und Stress.
Die Entwicklung, von Konzept bis programmierter App-Demo, fand als Semesterprojekt in Partnerarbeit für mein Studium "Media & Interaction Design" statt. Vier Jahre später bewerte ich den idealtypischen Prozess und iteriere das Design. Das Hinterfragen des damaligen Gedankengangs stellt meine fachliche Entwicklung auf die Probe.
Problem Statement
Ein Radfahrer möchte schnell sein Bike in einer Schar aus Fahrrädern identifizieren und Zeit sowie Energie beim Erinnern an den Abstellort und dem Suchen sparen. Gleichzeitig wird am Zielort ein sicherer Abstellplatz benötigt. Wie kann die Bedienung der App zusammen mit dem Gerät aussehen, um in diesem automatisierten und hektischen Handlungsablauf einen Vorteil zu bietet?
User Research
Analyse des Nutzungskontext mit Interviews, User Shadowing und Fragebögen
Es wurde mit typischen Methoden aus dem User-Centered Design gestartet, um die Bedürfnisse und Gegebenheiten in der Problemsituation zu verstehen. Für qualitative Daten wurden persönliche Interviews gehalten und User Shadowing auf öffentlichen Fahrradplätzen durchgeführt. Ein Fragebogen über Google Forms lieferte hingegen quantitative Daten. Aus den Ergebnissen wurden drei Personas abgeleitet.
2024
Process Review
detaillierte Untersuchung der potentiellen User und des Kontexts
Visualisierung der Insights als Personas in leicht verständlichen konzextbezogenem Format
Interviews mit Kommilitonen und wenig Input von projektfernen Personen mindert Qualität der Daten
Keine Nutzung der Personas bei folgenden Entscheidungen
Personas nach Cookie Cutter Format mit unwichtigen Informationen
Fokus der Untersuchung auf qualitative Methode legen → 5 intensive Interviews mit Radfahrern und abschließender kurzen Likert-Skala
Zwei Personas mit geschärftem Blick als Hilfsmittel für weiteren Prozess
Prototyping
Von Skizzen zum Wireframing
Eye Tracking und Lautes Denken mit echten Probanden im Usability Labor
Das Layout der Wireframes wurde in einem Usability Labor mit Eye Tracking untersucht. Die Probanden schauten dafür jeweils 30 Sekunden auf einen Screen und der Blickverlauf wurde mit einer Heatmap und einem Gazeplot aufgezeigt.
Anschließend wurde ein Test mit Wireframes als Low Fidelity Click-Dummy durchgeführt. Dem Tester wurde eine Nutzungssituation beschrieben in der sechs Aufgaben gelöst werden mussten. Währenddessen wurde zum Lauten Denken aufgefordert. Die Ergebnisse waren zufriedenstellend und Grundlage für einige Änderungen im Layout der Wireframes.
Bei dem Click-Dummy stellte sich eine vertikale Tabs als größtes Problem heraus. Da die Tester sie vollkommen ignorieren. Im High-Fidelity Protoypen wurde die Ansicht mit einer klassische Auflistung der Tab-Inhalte ersetzt.
2024
Process Review
Testing des Design in einem frühen Entwicklungsstadium
Eyetracker liefert vergleichsweise objektive Daten
Künstliche Testumgebung im Labor vor einem Desktop-Monitor
Langes Eye-Tracking erzwingt unnatürlichen Blickverlauf
Eye Tracking gibt verlässlich Aufschluss über die wahrgenommen visuelle Hierarchie, aber eine natürlichere Präsentation der Wireframes ist sinnvoll
Mehr Fokus auf Test mit Click-Dummy für wertvolle quantitative Insights in das Nutzerverhalten → Test draußen mit Fahrrad simulieren
Minimaler Styleguide für konsistentes UI Design
Vor der Gestaltung der High Fidelity-Screens wurde ein simpler Styleguide aus Logo, Typographie und Farbpalette definiert. Die bewusste Reduktion von Farbigkeit und der Fokus auf klare Linien und Kontraste bildet den Gegenpol zu der zentralen, detaillierten Maps-Ansicht.
2024
Process Review
Definition von wiederkehrenden Komponenten für eine klare visuelle Sprache
eine reduzierte Wort-Bild-Marke schafft einen Wiedererkennungswert
Farben entsprechen nicht den heutigen Barrierefreiheit-Standards
unvollständige Dokumentation aller UI-Elemente
Development
Verbindung von Mikrocontroller und Firebase in High-Fidelity Demo
Die Demo wurde mit dem Open-Source-Webframework Ionic entwickelt. Im Backend wurden die Daten zu öffentlichen Abstellplätzen und Nutzerdaten in einem Cloud Firestore von Firebase verwaltet. Über eine Bluetooth-Verbindung zwischen der App und dem Mikrocontroller SP32 wird ein Trigger für den Signalton oder das Aufleuchten des verbauten LED-Strips gesendet.
Die vollfunktionsfähige Demo enthielt viele komplexe Funktionen durch die Zusammenarbeit von Ionic, Angular und Cordova. Neben einer Firebase Authentication und Google Maps API ermöglichte der Zugriff auf die Smartphone-Kamera auch die Aufnahme von Fotos für einen digitalen Fahrradpass.
Konzeption und 3D-Druck des Gehäuses
Das Gehäuse musste den Mikrocontroller, die LED-Strips und eine Batterie fassen. Über mehrere Iterationen wurde ein Modell in Fusion 360 gestaltet und mit einem 3D-Drucker hergestellt. Es wurde so klein wie möglich konzipiert und nach dem Druck geschliffen sowie Schwarz angesprüht.
Final Design
Erfolgreicher Abschluss der Demo
Redesign
UI Design 2.0 nach 4+ Jahren
Biceek stellt für mich in 2024 noch immer einen Schlüsselpunkt in meiner Entwicklung als Designer dar. Denn das Projekt machte den vollumfänglichen Designprozess das erste Mal greifbar.
Zusätzlich zu der Bewertung des Prozess habe ich die UI nach meinen heutigen Qualitätsstandards redesigned und den Fokus der User Flows auf die Maps-Ansicht mit der Trigger-Interaktion vom Gerät gesetzt.
