Biceek
Biceek ist eine IoT-App, die Radfahrern das schnelle Auffinden ihres Fahrrads und sicherer Abstellplätze erleichtert. Ein am Fahrrad befestigter Sender löst auf Abruf Ton- und Lichtsignale aus und erspart so zeitaufwendiges Suchen.
Das Projekt entstand im meinem Studium “Media & Interaction Design” in Patnerarbeit – von der Konzeption bis zur Angular-Demo, validiert durch Eye-Tracking-Usability-Tests. Vier Jahre später bewertete ich den idealtypischen Prozess und iteriere das Design.
Zeitraum
2020 – 4 Monate
Leistungen
User Research, Mobile App Design, Usability Testing, Frontend Development
Problem statement
Ein Radfahrer möchte sein Bike schnell zwischen vielen anderen finden. Gleichzeitig sucht er oft vergeblich nach einem sicheren Abstellplatz für sein Zweirad. Wie kann die App mit dem Gerät zusammenspielen, um in diesen Situationen einen echten Vorteil zu bieten?
User Research
Analyse des Nutzungskontext mit Interviews, User Shadowing und Fragebögen
Wir starteten mit 3 Methoden aus dem User-Centered Design gestartet, um den Kontext und die potentiellen User zu verstehen. Persönliche Interviews und User Shadowing auf öffentlichen Fahrradplätzen lieferten qualitative Daten, ein Fragebogen über Google Forms zusätzlich quantitative Daten. Aus den Ergebnissen wurden drei Personas abgeleitet.
Bewertung in 2024
Fokus auf qualitative Methode legen z.B. Interviews mit Radfahrern mit Likert-Skala
Mehr Input von projektfernen Personen
Personas für weitere Entscheidungen nutzen
Ideation & Testing
Von Skizzen zum Wireframing
In einem Flowchart wurden die notwenigen Handlungsschritte in der App erfasst. Erste konkrete Features wurden dann mit der Methode “Crazy 8” skizziert und schließlich in Wireframes übersetzt.
Testing
Eye Tracking und Lautes Denken mit echten Probanden im Usability Labor
Die Wireframes wurden im Usability-Labor mit Eye Tracking untersucht. Heatmaps und Gazeplots zeigten den Blickverlauf einer Prson nach 30 Sekunden pro Screen. Anschließend testeten Probanden einen Low-Fidelity-Click-Dummy mit sechs Aufgaben im Lauten-Denken. Die Ergebnisse waren zufriedenstellend und führten zu Layout-Optimierungen.
Das größte Problem des Click-Dummy war eine vertikale Tab-Navigation. Die Tester ignorierten sie komplett. Im High-Fidelity Protoypen wurde die Ansicht mit klassischen Tabs ersetzt.
Bewertung in 2024
Künstliche Testumgebung im Labor kann Ergebnisse verfälschen, da Eyetracking von App auf Desktop durchgeführt wurde
Mehr Userflows im Clickdummy testen für wertvolle quantitative Insights (z.B. Test draußen mit Fahrrad simulieren)
UI-Design
Minimaler Styleguide für konsistentes UI Design
Ein minimaler Styleguide mit Typografie, Farbpalette, Logo und Animation wurde erstellt. Mit diesen Vorgaben wurde ein Prototyp in Adobe XD entwickelt, der als Grundlage für die weitere technische Umsetzung diente.
Bewertung in 2024
Farben entsprechen nicht WCAG
Dokumentation von Komponenten wäre für konsistente UI hilfreich
Development
Verbindung von Mikrocontroller und Firebase in High-Fidelity Demo
Die Demo wurde mit Angular und Ionic entwickelt. Im Backend verwaltete eine Firebase die Daten zu Abstellplätzen und User. Über Bluetooth kommunizierte die App mit dem Mikrocontroller SP32, um Signalton oder LED-Strip auszulösen.
Gehäuses aus dem 3D-Drucker
Das Gehäuse wurde in Fusion 360 modelliert und mit einem 3D-Drucker hergestellt. Es fasst den Mikrocontroller, die LED-Strips und die Batterie.
Projektabgabe im März 2020
Das Projekt wurde am Ende meines dritten Studiensemester in B.A. Media & Interaction Design fertig gestellt und als Demo erfolgreich präsentiert. (Note 1,0)
Redesign
UI Design 2.0 nach 4 Jahren
Biceek war das erste Projekt, in dem ich den gesamten Designprozess von Anfang bis Ende durchlaufen konnte. Auch wenn der Ablauf im Berufsalltag selten so linear ist, war es eine wertvolle Übung.
Zusätzlich zur Reflektion des Prozesses habe ich die UI aktualisiert und den Fokus stärker auf die Maps-Ansicht mit der Trigger-Interaktion des Gerät gelegt.
