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,
Front- & Backend-Development
Timeline
11/2019 – 02/2020
Deliverables
User Research
UI Design
Usability Testing
App Development
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?
User Research
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.
2024
Process Review
detailed examination of potential users and context
Visualization of insights in easily understandable contextual format
Interviews with fellow students and little input from people not involved in the project diminishes the quality of the data
No use of the personas in the following decisions
Personas to cookie cutter format with irrelevant information
Focus the investigation on qualitative method → 5 intensive interviews with cyclists and final short Likert scale
Two personas with a sharpened gaze as a tool for further process
Prototyping
From sketches to wireframing
Eye tracking and Thinking Aloud with real test subjects in the usability lab
The layout of the wireframes was examined in a usability lab using eye tracking. The subjects looked at a screen for 30 seconds each, and the gaze pattern was displayed with a heatmap and a gaze plot.
Subsequently, a test was conducted with wireframes as a low-fidelity click dummy. The tester was given a usage scenario in which six tasks had to be completed. He was required to think out loud during this time. The results were satisfactory and formed the basis for some changes in the layout of the wireframes.
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.
2024
Process Review
Testing the design in an early stage of development
Eyetracker provides comparatively objective data
Artificial test environment in the laboratory in front of a desktop monitor
Long eye tracking forces unnatural gaze pattern
Eye Tracking reliably provides insights into the perceived visual hierarchy, but a more natural presentation of the wireframes makes sense
More focus on testing with click dummy for valuable quantitative insights into user behavior → Simulate outdoor test with bicycle
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.
2024
Process Review
Definition of recurring components for a clear visual language
a reduced word-image-brand creates a recognition value
Colors do not meet today's accessibility standards
incomplete documentation of all UI elements
Development
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.
Conception and 3D printing of the housing
The case had to accommodate the microcontroller, the LED strips, and a battery. Over several iterations, a model was designed in Fusion 360 and manufactured with a 3D printer. It was designed as small as possible and sanded and spray painted black after printing.
Final Design
Successful completion of the demo
Redesign
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.
