Smart solution for stressed cyclists
- Development of an IoT app for easy localization of your own bike and secure parking spots
My role
UX-Designer
Timeline
04/2020 – 07/2020
Deliverables
UX Audit
UI Pattern Library
UX Design
The app Biceek simplifies the daily life of cyclists by quickly locating the bicycle and finding a suitable parking space. For this purpose, a transmitter on the frame generates a sound and a light pulse on demand, making the user aware of the bike's position. The endless searching and doubting comes to an end - the user saves time and stress.
The development, from concept to programmed app demo, took place as a semester project in partnership for my study "Media & Interaction Design". Four years later, I evaluate the ideal process and iterate the design. Questioning the former train of thought puts my professional development to the test.
Problem Statement
A cyclist wants to quickly identify his bike in a crowd of bicycles and save time and energy when remembering the parking location and searching. At the same time, a secure parking space is needed at the destination. What could the operation of the app look like in combination with the device to provide an advantage in this automated and hectic process?
Prozess
Analyzing the context of use with interviews, user shadowing, and questionnaires
It was initiated with typical methods of User-Centered Design to understand the needs and circumstances in the problem situation. Personal interviews were conducted for qualitative data and User Shadowing was carried out at public bicycle stands. Conversely, a questionnaire via Google Forms provided quantitative data. Three personas were derived from the results.
Marktposition
From sketches to wireframing
Comprehensive range of products
No restriction of product selection due to independent position in the market as a middleman.
Fusion of product recommendation and purchase
The shopping inspiration by influencers is directly combined with the point of sale to create an immediate call to purchase.
Minimal distraction factor in the shopping experience
Advertising is not perceived as a disruptive factor, but actively sought by the user.
Reach of the live shows through dual format
Live shows work in both classic teleshopping long-form content as well as in a familiar social media format, appealing to different user groups.
Vibrant product experience for informed purchase decisions
The product catalog is enlivened by clips of the live shows, which provide the user with an authentic and immersive impression of the products.
Sicherheitsstandards
Anpassungsfähigkeit des Systemsetups an Sicherheitsanforderungen
UX Audit
Connection of microcontroller and Firebase in High-Fidelity Demo
The demo was developed using the open-source web framework Ionic. In the backend, the data for public parking spaces and user data was managed in a Cloud Firestore by Firebase. A Bluetooth connection between the app and the SP32 microcontroller sends a trigger for the signal tone or the illumination of the built-in LED strip.
The fully functional demo contained many complex features through the collaboration of Ionic, Angular, and Cordova. In addition to Firebase Authentication and Google Maps API, access to the smartphone camera also allowed for taking photos for a digital bike pass.
In the case of the click dummy, a vertical tab proved to be the biggest problem as the testers completely ignored it. In the high-fidelity prototype, the view was replaced with a classic list of tab contents.
Im wirHub werden häufig Radio Buttons für Optionenauswahl verwendet. An einigen Stellen wäre jedoch eine andere Komponente wie Checkbox, ein Toggle oder ein Segment Button semantisch passender und effizienter, um z.B. eine Option zu eliminieren.
Keine Pflichtfelder und Validierung von Eingaben
Die meisten SmartBlocks haben keine Pflichtfelder oder Validierungen, wodurch die Überprüfung von Dateiformaten fehlt und leere Module erstellt werden können. Teilweise fehlen auch Default-Werte für Auswahlmöglichkeiten wie Segment-Buttons. Dieses führt im schlimmsten Fall zu einer Fehlerseite. Der User wird nicht darüber informiert, wie dieser Fehler aufgetreten ist und muss seine letzten Bearbeitungsschritte wiederholen.
Kein Feedback zu Systemzustand
Der User erhält nur selten Fehlermeldungen und Feedback zu seinen Aktionen. Idealerweise sollte ein Hinweis z. B. in Form einer Snackbar nach wichtigen Änderungen im System erscheinen und so dem User bei seiner Arbeit Sicherheit geben.
Inkonsequente Gestaltung
Viele UI-Elemente und Interaktionsmuster wiederholen sich im System, weichen jedoch ohne erkennbaren Grund in ihrem Design voneinander ab. Beispielsweise gibt es unterschiedliche Designs für den Download von Anhängen oder verschiedene Icons für dieselbe Funktion. Diese inkonsequente Gestaltung führt zu Verwirrung und erschwert das Erlernen von Abläufen.
Minimal styleguide for consistent UI design
Before designing the high-fidelity screens, a simple style guide was defined, including logo, typography, and color palette. The deliberate reduction of colorfulness and the focus on clear lines and contrasts form the counterpart to the central, detailed maps view.
4 Wächter
9 Anwender
Key-Feedback der Wächter
Colors do not meet today's accessibility standards
incomplete documentation of all UI elements
Die Einstellung von Inhalten bedarf einer Schulung, sodass Mitarbeiter / Abteilungen sagen: „Wir haben keine Zeit Inhalte einzustellen.”
Definition of recurring components for a clear visual language
a reduced word-image-brand creates a recognition value
Key-Feedback der Anwender
Man weiß nicht, ob es seit dem letzten Download ein Asset-Update gab. Wodurch ständig die selben Assets erneut heruntergeladen werden.
Es fehlen personalisierte Inhalte und eine allgemeine Anpassung an die individuellen Bedürfnisse des Nutzers.
Für eine schnelle Contentpflege sollte der Bearbeitungsmodus noch mehr in Echtzeit funktionieren.
Eine Änderungsverlauf zum Rückgängigmachen und Wiederherstellen von Aktionen würde die Contentpflege erleichtern.
Die Anbindung von Tools, smarten Lösungen und Automatisierung / Generatoren sollte weiter verfolgt werden.
Ideation
Connection of microcontroller and Firebase in High-Fidelity Demo
The demo was developed using the open-source web framework Ionic. In the backend, the data for public parking spaces and user data was managed in a Cloud Firestore by Firebase. A Bluetooth connection between the app and the SP32 microcontroller sends a trigger for the signal tone or the illumination of the built-in LED strip.
The fully functional demo contained many complex features through the collaboration of Ionic, Angular, and Cordova. In addition to Firebase Authentication and Google Maps API, access to the smartphone camera also allowed for taking photos for a digital bike pass.
UI Pattern Library
Successful completion of the demo
The project was completed at the end of my third semester, March 2020, and was demonstrated as a demo. Going through an ideal design process from start to finish improved my understanding of the significance of each design method and the importance of iteration.
Prototyping
UI Design 2.0 after 4+ years
Biceek still represents a key point in my development as a designer in 2024. Because the project made the comprehensive design process tangible for the first time.
In addition to evaluating the process, I redesigned the UI according to my current quality standards and focused the user flows on the map view with the device trigger interaction.
Biceek still represents a key point in my development as a designer in 2024. Because the project made the comprehensive design process tangible for the first time.
In addition to evaluating the process, I redesigned the UI according to my current quality standards and focused the user flows on the map view with the device trigger interaction.
Before
After
Before
After
UI Design 2.0 after 4+ years
Im Status Quo des wirHub gab es keinen Registrierungsprozess. Stattdessen wurden neue Accounts von Administratoren angelegt. Der Wunsch nach einem einfacheren Verfahren kam schnell in den Stakeholder-Interviews auf und zwei Wächter ihr Interesse bekundeten.
Der Aufwand verhält sich zum Mehrwert relativ gering und gilt in der Feature-Priorisierung als Quick Win.
Als Administrator möchte ich, dass potenzielle Nutzer ihre Zugangsdaten selbst übermitteln, um viel Zeit und administrative Arbeit zu sparen.
Als Administrator und Brand Manager möchte ich die Kontrolle über zugelassene Accounts meiner Kollegen und Dienstleister behalten, um die unsachgemäße Verwendung der Informationen im wirHub zu unterbinden.
Verlinkungen
In vielen SmartBlocks war es möglich, Verlinkungen über fest implementierte Buttons oder den Markdown-Editor einzufügen. Allerdings war dieser Prozess nicht standardisiert und musste oft mit HTML-Tags durchgeführt werden.
Ein neues Modal wurde eingeführt, das eine einfache Verlinkung zu internen Seiten, Ankerlinks und externen Quellen ermöglicht. Dabei wird das Prinzip des Progressiven Disclosures verwendet, um die individuellen Eingabefelder für jede Option erst nach der Auswahl anzuzeigen.
Als Redakteur möchte ich schnell aus einem SmartBlock heraus eine Verlinkung zu einem beliebigen Element der vier Navigationsebenen oder einem externen Ziel setzen, um die Nutzerführung individuell zu bestimmen.
Analytics
wirHub sammelte im Hintergrund bereits Daten, die bisher kaum genutzt oder visualisiert wurden. Mit geringem Aufwand bot sich die Möglichkeit, die Marktposition des wirHub im Bereich Analytics zu stärken. Das Dashboard ist für Administratoren im Backend sichtbar.
Als Administrator möchte ich sehen, wie oft eine Seite angesehen und sich die Downloads auf der Seite heruntergeladen wurden, um das Verhalten und die Bedürfnisse der Benutzer besser zu verstehen.
Als Administrator möchte ich Nutzerdaten wie Login-Rate, Sitzungsdauer vergleichen können, um das durchschnittliche Benutzerverhalten zu registrieren.
Usability Testing
Successful completion of the demo
The project was completed at the end of my third semester, March 2020, and was demonstrated as a demo. Going through an ideal design process from start to finish improved my understanding of the significance of each design method and the importance of iteration.
Biceek still represents a key point in my development as a designer in 2024. Because the project made the comprehensive design process tangible for the first time.
In addition to evaluating the process, I redesigned the UI according to my current quality standards and focused the user flows on the map view with the device trigger interaction.
Before
After
UX-Audit endet und Development beginnt
Neue Funktionalitäten wie ein Asset-Management, eine Registrierung und die hub-interne Analytics wurden erfolgreich implementiert, während die Echtzeit-Bearbeitung vorangetrieben wurde. Diese Neuerungen bieten einen Mehrwert für User und Redakteure, indem sie einen effizienteren Workflow und eine verbesserte Usability bieten.
Obwohl das Projekt endet, ermöglicht der Double-Diamond-Prozess einen fortlaufenden Zyklus aus Verbesserungen und Iterationen.
