Biceek
Biceek is an IoT app that helps cyclists quickly locate their bikes and find secure parking spaces. A transmitter attached to the bike triggers sound and light signals on demand, saving time-consuming searches.
The project was developed as part of my Media & Interaction Design degree in collaboration with another student – from conception to Angular demo, validated by eye-tracking usability tests. Four years later, I evaluated the ideal process and iterated the UI.
Timeline
2020 – 4 months
Services
User Research, Mobile App Design, Usability Testing, Frontend Development
Problem statement
A cyclist wants to find their bike quickly among many others. At the same time, they often search in vain for a safe place to park their bike. How can the app interact with the device to offer a real advantage in these situations?
User Research
Analysis of context of use with interviews, user shadowing, and questionnaires
We started with three methods from user-centred design to understand the context and potential users. Personal interviews and user shadowing at public bicycle parking facilities provided qualitative data, while a questionnaire via Google Forms provided additional quantitative data. Three personas were derived from the results.
Hindsight in 2024
Focus on qualitative methods such as interviews with cyclists using a Likert scale
More input from people outside the project
Use personas for further decisions
Ideation & Testing
From sketches to wireframing
The necessary steps were recorded in a flowchart in the app. Initial concrete features were then sketched using the ‘Crazy 8’ method and finally translated into wireframes.
Testing
Eye tracking and thinking aloud with real participants in the usability lab
The wireframes were examined in the usability lab using eye tracking. Heat maps and gaze plots showed a person's eye movement after 30 seconds per screen. Test subjects then tested a low-fidelity click dummy with six tasks using think-aloud protocol. The results were satisfactory and led to layout optimisations.
The biggest problem with the click dummy was vertical tab navigation. The testers ignored it completely. In the high-fidelity prototype, the view was replaced with classic tabs.
Hindsight in 2024
Artificial test environment in the laboratory may distort results, as eye tracking was performed from app to desktop
Test more user flows in Clickdummy for valuable quantitative insights (e.g. simulate outdoor test with bicycle)
UI-Design
Minimal style guide for consistent UI design
A minimal style guide with typography, colour palette, logo and animation was created. Using these specifications, a prototype was developed in Adobe XD, which served as the basis for further technical implementation.
Hindsight in 2024
Colors do not meet WCAG
Documentation of components would be helpful for a consistent UI
Development
Connection of microcontroller and Firebase in high-fidelity demo
The demo was developed using Angular and Ionic. In the backend, Firebase managed the data on parking spaces and users. The app communicated with the SP32 microcontroller via Bluetooth to trigger an audible signal or LED strip.
Casing made by 3D printer
The casing was modelled in Fusion 360 and manufactured using a 3D printer. It contains the microcontroller, LED strips and battery.
Project submission in March 2020
The project was completed at the end of my third semester in B.A. Media & Interaction Design and successfully presented as a demo. (Grade 1.0)
Redesign
UI Design 2.0 after 4 years
Biceek was the first project in which I was able to go through the entire design process from start to finish. Even though the process is rarely so linear in everyday working life, it was a valuable exercise.
In addition to reflecting on the process, I updated the UI and placed greater focus on the map view with the device's trigger interaction.
